在ReactJs组件方法调用之间存储变量

Store variables between ReactJs component method calls

本文关键字：之间 存储 变量 调用 方法 ReactJs 组件      更新时间：2023-09-26
togglePreloader: function(toggleState) {
    var timeout = null;
    var time = 0;
    if (toggleState) {
        if (this.state.preloading) console.log("Preloader alredy shown");
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        } else if (!this.state.preloading) {
            console.log("Show preloader");
            time = Date.now();
            this.setState({ preloading: true });
        }
    } else {
        if (!timeout) {
            var elapsed = Date.now() - time;
            if (elapsed < Config.PRELOADER_MIN_DISPLAY_DURATION) {
                console.log("Preloader hiding timeout was started; elapsed: " + elapsed + "/" + Config.PRELOADER_MIN_DISPLAY_DURATION);
                timeout = setTimeout(function() {
                    timeout = null;
                    this.setState({ preloading: false });
                    console.log("Hide preloader by timeout");
                }.bind(this), Config.PRELOADER_MIN_DISPLAY_DURATION - elapsed);
            } else {
                this.setState({ preloading: false });
                console.log("Hide preloader; elapsed: " + elapsed + "/" + Config.PRELOADER_MIN_DISPLAY_DURATION);
            }
        } else console.log("Preloader hiding is waiting for timeout");
    }
}

这是reactJs组件的方法。它触发显示和隐藏预加载器。如果预加载程序显示的时间小于最小持续时间(例如500ms)，它将在隐藏时设置超时。

问题是在调用togglePreloader之间存储变量timeout和time。变异。props不是一个好主意。this的变化。state触发重渲染。将变量移出组件?或者使用状态shouldComponentUpdate ?最好的方法是什么?我是reactJs新手

这不仅不是一个好主意，你不能玩this.props，它是组件的父控件的数据集合。你可以使用state，它会渲染，或者你可以只做显而易见的事情:只使用this.timeout = ...，因为你的React组件仍然只是一个JavaScript对象，有自己的实例作用域。

  • this.props.xyz为"从上面"分配的值
  • this.state.xyz用于您控制并直接影响UI外观的值
  • this.xyz用于任何对UI没有影响的瞬态值，并且可以在技术上重置而没有任何不利影响。

但是，考虑到超时值是通用的，因此可能应该是静态的:

var YourComponent = React.createClass({
  statics: {
    timeout: 500
  },
  ...
  checkStuff: function() {
    if (this.currentTime >= YourComponent.timeout) {
      this.doAThing();
    }
  },
  ...
});

如果想法是不同的事情发生在UI基于该超时，那么真的你应该触发一些state值，你的组件可以在render()中使用，以确保它现在显示，或做正确的事情。因此，您使用this.currentTime来跟踪到目前为止的时间，然后使用状态变量，一旦您知道您已通过阈值。

如果你是react的新手，那么浏览react网站上的"入门"answers"教程"部分是完全值得的。只要坐下来，一次完成所有的事情——不到30分钟——你就会对如何使用React有一个更好的想法。如果你还需要更多的见解，谷歌上有很多关于React的好文章。

相关文章：