React文档中说
http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html不要担心基于状态的预计算值-如果在render()中进行所有计算，则更容易确保UI的一致性。
当计算量很小时，这是完全有意义的。
但是我在this.state中存储了一堆大数组，用于我在SVG上渲染的数据可视化。我需要根据这些计算几个值。问题是，这些计算相当繁重，并且不可能总是在渲染中计算这些。
那么，我应该如何缓存这些计算，同时确保我不会得到与this.state和那些计算变量不一致的状态?
我想我已经弄明白了。
我将大数组移动到父组件的状态，并将它们作为道具传递给可视化组件。然后我只计算componentDidMount和componentWillReceiveProps中的值，并将它们保存到可视化组件的状态中。
在我的例子中，这避免了大多数无用的计算。但是，如果这还不够，我可以进一步将当前道具与componentWillReceiveProps中的下一个道具进行区分，以确定是否实际需要计算。
更新:现在我已经更多地使用React，我认为这应该使用记忆来完成。
我也尝试了一些使用React和SVG的数据可视化，并且还没有出现任何性能问题。React只在状态变化或父组件的状态变化时进行渲染，因此这些计算不会经常运行。
如果在您的情况下组件更新频繁，您可以尝试使用lodash来记忆计算函数。