Question

这是我的shouldComponentUpdate：

  shouldComponentUpdate(nextProps, nextState) {
    let equal = _.isEqual(this.state, nextState);
    console.log(this.state, nextState, equal);
    return !equal;
  }

根据https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate，这应该是避免不必要更新的正确方法。

但我的问题是，当某些内容发生变化时，它不会出现在浏览器中。多次调用shouldComponentUpdate并在一个点返回true，然后返回false。当它返回true时，将按原样调用render，但结果不会出现在DOM中。

我的假设是，尽管渲染已被调用并且会呈现我想要的东西，但是在DOM更新之前，react会接收另一个状态更改，它会看到shouldComponentUpdate返回false，并且它决定不更改DOM。

但那可能是对的，可以吗？这种情况可能吗？如果是这样，任何解决方案的建议（除了修复我的混乱代码，以便它不发送一堆快速，有时多余的状态更改）？如果没有，还有其他任何假设吗？

Answer 1

（0）当然，React不会产生额外的render（）或setState（）。

（1）看起来保存状态在url开始无限循环 - 因为更改状态会产生更改的道具（来自url更改后的react-router），这会产生新的更改状态我猜。这可以解释控制台日志中的true-false-true-false循环。

（2）当您在shouldComponentUpdate中拒绝时，您没有看到更改过的道具 - 只有状态更改才能立即生成重新渲染。（因为对于状态未更改的已更改道具，shouldComponentUpdate将返回false。）

Answer 2

看起来我的假设是正确的，就像看起来那样真实。我将第三次更新（shouldComponentUpdate返回false的速度放慢了它）放慢了100ms的setTimeout，现在渲染传播到DOM。如果没有setTimeout，则会正确调用render，但是在shouldComponentUpdate返回false的下一次更新时，它会以某种方式被破坏。

CanComponentUpdate返回false clobber，其中shouldComponentUpdate返回true的先前更新？

2 个答案: