javascript - React - 捕获 shouldComponentUpdate 中的中间体

Question

作为 shouldComponentUpdate 实现的一部分，我需要进行一次重要的计算。我还需要执行相同的计算作为渲染实现的一部分。我希望能够捕获 shouldComponentUpdate 中的计算结果，并在我的 render 实现中重用它 - 即我希望避免两次计算相同的值.

有推荐的方法来实现这个吗？

Answer 1

最好的方法可能是在组件中定义您自己的 setState() 包装器，例如:

setMyState(newProps, newState) {
  var nonTrivialResult = doStuff(newProps, newState);
  newState.checkSum = nonTrivialResult;
  this.setState(newState);
}

并在任何要调用 setState() 的地方调用这个新方法，也可以从 componentWillReceiveProps 调用。

包装器可以访问所有当前的 Prop 和状态以及您传入的任何新 Prop 和状态。这样，您应该能够进行任何您想要的计算。

此外，您可能需要在第一轮中从 getInitialState() 调用 doStuff()。

在此设置中，每次渲染时仅执行一次计算。您可以在 shouldComponentUpdate() 中检查结果。

在react生命周期中，shouldComponentUpdate()在componentWillReceiveProps()之后调用，所以这应该可以工作..