reactjs - 使用 setTimeout 避免 React 中的重新渲染

Question

我经常使用一种模式，我觉得它一定是反模式，但我不知道更好的选择。

有时，我的组件可能会收到一个或多个事件，这意味着需要重新渲染。有时我不知道事件处理程序将被调用多少次。为了防止由于多次调用处理程序而导致多次重新渲染，我做了如下操作:

 _myEventHandler() { // may be called multiple times between renders
   if (!this._updateQueued) {
     this._updateQueued = true;
     this._updateTimer = setTimeout(() => {
       this._updateQueued = false;
       this.forceUpdate();
     }, 0);
   }
 }

这里的问题是我觉得由于代码停止和事件循环启动之间的延迟而无法提高性能。

一个现实世界的例子是，当我使用react-visibility-sensor时，我有多个元素同时改变它们的可见性，我不想为每个元素重新渲染，而是只想要一个重新渲染收到所有更新后渲染。

还有其他更好的方法来处理多个调用吗？

顺便说一句:如果您要使用上述技巧，请不要忘记在 componentWillUnmount 中调用 clearTimout(this._updateQueued)

Answer 1

去抖会减少特定代码段的运行次数，无论调用的频率如何。这是一个相当简单的实现。

const debounce = (callable, time) => {
  let timeout;

  return function() {
    const functionCall = () => callable.apply(this, arguments);

    clearTimeout(timeout);
    timeout = setTimeout(functionCall, time);
  };
};

这就是如何使用它。

const debouncedIteration = debouce(() => {
   console.log("Iteration"); // This will be called once every 1000 milliseconds.
}, 1000);

while (true) {
   debouncedIteration();
}