习惯上根据React中的状态缓存计算值的方法？

Question

React文档说

不要担心基于状态预先计算值 - 如果在render()中进行所有计算,则更容易确保UI是一致的.

http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

当计算量很小时,这非常有意义.

但我正在将大量数组存储在this.state我正在SVG上呈现的数据可视化中.我必须根据这些计算几个值.问题是那些计算相当繁重,并且不可能总是在渲染中计算那些计算.

那么,我应该如何缓存这些计算,同时确保我不会this.state与那些计算变量的状态不一致？

Answer 1

我想我已经明白了.

我将大数组移动到父组件的状态,我将它们作为道具传递给可视化组件.然后,我只是计算值componentDidMount和componentWillReceiveProps,并将它们保存到可视化组件的状态.

在我的情况下,这避免了大多数无用的计算.但是如果它还不够,我可以进一步扩展当前道具与下一个道具,componentWillReceiveProps以确定是否实际需要计算.

更新:现在我已经使用React工作了更多我认为应该使用memoizing来完成.重新选择是很好的基础.