1

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

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

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

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

4

2 回答 2

5

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

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

于 2016-04-23T19:16:15.597 回答
2

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

  • 不变性如何影响 react-redux

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

  • 什么时候应该考虑 shouldComponentUpdate

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

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

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

因此，这完全取决于您的喜好，您希望如何防止从上述两种解决方案重新渲染

于 2016-10-18T13:45:11.060 回答