Redux 中的 React ReRender

Posted 2023-02-22

【中文标题】Redux 中的 React ReRender

【英文标题】：React ReRender in Redux

【发布时间】：2016-08-17 08:19:39

【问题描述】：

我在我的 React 应用程序中使用 Redux，为了确保我不会改变状态而是返回新状态，我在开发中添加了中间件 https://github.com/leoasis/redux-immutable-state-invariant。

我的问题是，当商店发生变化时，我的所有组件都会重新渲染吗？

我正在看这个关于 ImmutableJs 的视频https://youtu.be/YFP8lbdZ0cs?t=33m59s 现在我不知道我是否应该在每个具有 shallowEqual 函数的组件中实现 shouldComponentUpdate 或者这件事是通过自动反应来完成的？ （可能是新版本改了）

它应该打扰我吗？当我不使用 ImutableJs 并使用最新的 React 和 Redux 版本时，最好的方法是什么？

【参考方案1】：

React Redux 包做了很多工作来确保您的包装组件仅在需要时呈现。请参阅http://redux.js.org/docs/FAQ.html#react-rendering-too-often 上的相关 Redux 常见问题解答。我的Redux-related libraries catalog 中还列出了许多React rendering debugging tools，它们可以显示组件实际重新渲染的时间以及原因。

也就是说，在您有证据表明您遇到了实际的性能问题之前，您通常不应该担心它。

【讨论】：

由于我使用的是 ES2016，我无法使用库目录中的任何库，因为它们都使用了 mixins 或旧版本的 babel 转换。我不得不使用正在工作的github.com/marcin-mazurek/react-render-visualizer-decorator。我发现我所有的应用程序都在重新加载路由器更改。即使它不应该。我现在没有看到性能问题，但我希望将来在我的应用程序中实现 ImutableJs。

NPM 上有可用的包，它们是 React.Component 的子类，允许您使用 mixins，如果需要，您还可以从可视化中借用实际代码。也不确定您所说的“旧版本的 babel 转换”是什么意思 - 我正在使用 Babel 6，现在带有 react-render-visualizer-transform 包（并使用它导出的每个特定类的转换）。跨度>

【参考方案2】：

在我回答你的问题之前，我想澄清几件事以供你理解，

不变性如何影响 react-redux

假设您有一个处于 redux 状态的对象，并且您没有处理不变性并且您更改了一个属性。现在，当您更改属性时，您希望它重新渲染，但由于对象引用没有更新（因为状态已发生突变），redux 考虑其相同的状态并且不更新道具，因此无需重新渲染（我自己的经验)

什么时候应该考虑 shouldComponentUpdate

假设您有一个非常大且复杂的表单，其中考虑了 4 个子表单，现在每个表单都访问一个部分道具。但是随着用户填写表单，道具会不断变化，因此它会一次又一次地呈现。现在有两种解决方案

一次只渲染用户可见的表单或部分，仅渲染当前选项卡（如果是多选项卡表单） 对 shouldComponentUpdate 进行全面检查，仅当相关 props 或 props 中对象的属性发生更改时才返回 true

现在 ImmutableJs 所做的是防止对象发生变异，因此您不会遇到期望它重新渲染但它没有重新渲染的情况

所以这完全取决于您希望如何防止从上述两种解决方案重新渲染