Question

我在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，但我认为两者都不满意。是否有使用备忘录的现成解决方案？

另一方面，我应该担心优化吗？我读过React可以重新渲染组件，即使道具没有改变但这种情况经常发生吗？

Answer 1

您可以在shouldComponentUpdate的生命周期方法中处理重新呈现。默认值始终为return true。通过返回false，React将不会重新呈现组件。

请参阅docs for more。除此之外，React仅在发生状态更改时才更新，因为props是只读的。

您的选择是按照您的建议存储它，或者让一个带有静态字段的类来保存它。

Answer 2

如果您想要做的只是在获得新道具时执行昂贵的计算，而不是每次渲染，您可能需要componentWillReceiveProps：

在挂载的组件接收新道具之前调用
componentWillReceiveProps(nextProps) { if (nextProps.someValue !== this.props.someValue) { this.someResult = this.performExpensiveCalculation(nextProps.someValue); } }。

就存储它们的位置而言，您可以将它们存储在状态中，也可以直接存储在组件实例上。两者都可以正常工作。

您希望确保比较值，以避免不必要的重新计算。

例如：

{{1}}

在React中存储从道具计算的值的位置

2 个答案: