Question

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

是否有推荐的方法来实现此目的？

Answer 1

最好的方法是在组件中定义自己的setState()包装器，如：

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

无论您拨打setState()还是componentWillReceiveProps，都可以调用此新方法。

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

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

在此设置中，您的计算仅在每次渲染时完成一次。您可以在shouldComponentUpdate()。

中查看结果

在反应生命周期中，shouldComponentUpdate()之后会调用componentWillReceiveProps()，所以这应该有效。

Answer 2

你可以在 componentWillReceiveProps 处理它并用计算结果更新那里的状态吗？（对不起，这应该更像是评论，但我没有足够的代表）

React - 在shouldComponentUpdate中捕获中间件

2 个答案: