在哪裏存儲從道具計算的值React

什麼是存儲從React道具的昂貴計算結果的最佳位置，我在render()中使用了這些道具，但不想在每個render()執行？在哪裏存儲從道具計算的值React

constructor(props) { 
    super(props) 
    const result = this.doExpensiveCalculation(props) 
} 

componentWillReceiveProps(nextProps) { 
    // if nextProps differ from props 
    const result = this.doExpensiveCalculation(nextProps) 
} 

doExpensiveCalculation(props) { 
    // Some expensive stuff 
} 

render(){ 
    // Use doExpensiveCalculation(this.props) here 
}

選項是this和state但兩個我看到而未能如願。有沒有現成的解決方案，使用memoisation？

另一方面，我應該擔心優化嗎？我讀過React可以重新渲染組件，即使道具沒有改變但是這經常發生嗎？

來源

2017-06-08 dev-null

您應該保存'狀態result'。如果可能的話'doExpensiveCalculation'應該以異步方式完成。如果你正在使用像redux和redux-saga這樣的東西，這應該很簡單。 – wesley6j

您可以在生命週期方法shouldComponentUpdate中處理重新渲染。默認值始終爲return true。通過返回false，React將不會重新渲染組件。

查看docs for more。除此之外，由於道具是隻讀的，因此只有在狀態發生變化時纔會更新React。

你的選擇是按照你的建議存儲它，或者有一個靜態字段的類來保存它。

來源

2017-06-08 13:21:39

此解決方案不解決某些數據更改應更新組件但不應重新計算該值的情況。該值必須保存在某個地方。 – wesley6j

如果你想要做的就是執行每當你獲得新道具昂貴的計算，而不是在每一個渲染，你可能想componentWillReceiveProps：

componentWillReceiveProps()安裝的組件接收新道具之前被調用。

至於在哪裏存儲它們，您可以將它們存儲在狀態中，也可以直接作爲屬性存儲在組件實例中。兩者都可以工作。

儘管您想確保比較值，以避免不必要的重新計算。

例如：

componentWillReceiveProps(nextProps) { 
    if (nextProps.someValue !== this.props.someValue) { 
     this.someResult = this.performExpensiveCalculation(nextProps.someValue); 
    } 
}

來源

2017-06-08 16:06:08 rossipedia

在哪裏存儲從道具計算的值React

回答

相關問題