习惯上根据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来完成。 Reselect对此很好。

Answer 2

我也尝试使用React和SVG进行数据可视化，并且还没有任何性能问题。仅对状态更改或父组件的状态更改进行React，以便不会经常运行这些计算。

如果在您的情况下组件经常更新，您可以尝试使用lodash来记忆计算功能。