React-在ShouldComponentUpdate中捕獲中間體

Question

在我shouldComponentUpdate實現中，我需要做一個簡單的計算。 我還需要做與render實現相同的計算。 我希望能夠在shouldComponentUpdate捕獲計算結果，並在render實現中重用它-即，我希望避免兩次計算相同的值。

有沒有推薦的方法來實現這一目標？

Answer 1

最好的方法可能是在組件內部定義自己的setState()包裝器，例如：

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

並在可以調用setState()任何地方以及從componentWillReceiveProps調用此新方法。

包裝者可以訪問所有當前的道具和狀態以及您傳入的任何新道具和狀態。這樣，您應該可以進行所需的任何計算。

此外，您可能需要在第一輪中從getInitialState()調用doStuff() 。

在此設置中，每個渲染只進行一次計算。 您可以在shouldComponentUpdate()檢查結果。

在反應生命周期中， shouldComponentUpdate()在componentWillReceiveProps()之后調用shouldComponentUpdate() componentWillReceiveProps() ，所以這應該可以工作。

Answer 2

您可以在componentWillReceiveProps處處理它，並用計算結果在那里更新狀態嗎？ （對不起，這應該更像是評論，但我沒有足夠的代表）