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毫秒），则会在隐藏时设置超时。

问题是在 togglePreloader 的调用之间存储变量超时和时间的位置。突变 this.props 并不是一个好主意。 this.state 中的更改会触发重新渲染。将变量移出组件？或者使用带有 shouldComponentUpdate 的州？什么是最好的方法？我是reactJs的新手

Answer 1

这不仅不是一个好主意，您也无法使用this.props，它是该组件的父级控制的数据集合。您可以使用将要呈现的状态，或者您可以做一件显而易见的事情：只使用this.timeout = ...，因为您的React组件仍然只是一个具有自己的实例范围的JavaScript对象。

this.props.xyz表示您已分配的值＆＃34;来自上方＆＃34;
this.state.xyz表示您控制的值，并直接影响用户界面的外观
this.xyz表示对UI没有任何影响的任何瞬态值，技术上可以重置而不会产生任何不利影响。

但是，请考虑超时值是通用的，因此应该是静态的：

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

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

如果您有新的反应，那么它的100％值得通过＆＃34;入门＆＃34;和＆＃34;教程＆＃34; React网站上的部分。只需坐下来，一次性完成所有操作 - 只需不到30分钟 - 您就可以更好地了解您应该如何使用React。然后，如果你仍然需要更多的洞察力，那么谷歌上有关于React的精彩文章很多。

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

1 个答案: