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

Question

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组件的方法。它触发显示和隐藏预加载器。如果预加载程序显示的时间小于最小持续时间(例如500 If )，则在隐藏时设置超时。

问题是在togglePreloader.调用之间存储变量超时值和time变异this.props不是一个好主意。this.state中的更改会触发重命名。将变量从组件中移出？还是在shouldComponentUpdate中使用状态？最好的方法是什么？我是新来的。

Answer 1

这不只是一个好主意，您不能使用this.props，而是组件的父控件的数据收集。您可以使用状态(它将呈现)，或者只需做一件显而易见的事情:只需使用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来跟踪时间，然后使用一个状态变量(一旦您知道您已经通过了阈值)。

如果你是新的反应，这是100%值得在反应网站上的“入门”和“教程”部分运行。只要坐下来，一蹴而就，-it只需不到30分钟，你就能更好地了解你应该如何应对。然后，如果你还需要更多的洞察力，在谷歌上有很多关于反应的好文章。