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

Posted 2023-02-21

【中文标题】根据 React 中的状态缓存计算值的惯用方法？

【英文标题】：Idiomatic way to cache computed values based on the state in React?

【发布时间】：2014-04-21 05:46:28

【问题描述】：

React 文档说

不必担心根据状态预先计算值 - 如果您在 render() 中进行所有计算，则更容易确保您的 UI 一致。

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

当计算量很小时，这非常有意义。

但我将一堆大型数组存储在this.state 中，以便在 SVG 上呈现数据可视化。我必须根据这些计算几个值。问题是这些计算相当繁重，不可能总是在渲染中计算。

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

【参考方案1】：

我想我已经明白了。

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

在我的例子中，这避免了大部分无用的计算。但如果这还不够，我可以更进一步，将当前的 props 与 componentWillReceiveProps 中的下一个 props 进行比较，以确定是否确实需要计算。

更新：现在我已经更多地使用 React，我认为这应该使用 memoizing 来完成。 Reselect 是很好的库。

【讨论】：

React 如何强迫您进入这种软件设计的思维模式，真是太棒了。尽可能避免维护状态，将“控制”职责在组件层次结构中推到尽可能高的位置。这允许更轻松的缓存、更少的逻辑繁重的子组件和更轻松的测试。我猜危险在于拥有一个充当上帝控制器的 ueber 父组件，但可以通过其他注入模式进一步减少。

在componentWillMount 中计算而不是在componentDidMount 中计算是否更有意义？似乎后者可能会强制进行第二次渲染。

@Bernardo 您能否为这些注入模式提供一个示例？自动取款机。我还在开发一个生成 svg 图形的应用程序，必须在最高组件级别计算许多值才能正确呈现图形。重新选择无法提供您在 Ember.js 中使用计算值时所拥有的舒适度

【参考方案2】：

我也尝试了一些使用 React 和 SVG 的数据可视化，但还没有任何性能问题。 React 仅在状态更改或父组件的状态更改时重新渲染，因此这些计算不会经常运行。

如果你的组件更新频繁，你可以尝试用lodashmemoize计算功能。