performance - 如何使用 redux + Normalizr 减少渲染

Question

我有一个使用 React + Redux + Normalizr 的应用程序，我想知道当实体发生变化时减少渲染次数的最佳实践。

如果我只更改实体中的一个实体，它将重新渲染所有组件，而不仅仅是需要该特定实体的组件

Answer 1

您可以采取多种措施来最大限度地减少应用中的渲染次数并加快更新速度。 让我们从 Redux 存储到 React 组件来看看它们。

• 在 Redux 存储中，您可以使用不可变的数据结构(例如 Immutable.js )。这将使所有后续优化更快，因为您将能够通过仅检查上一个/下一个状态切片相等性来比较更改，而不是递归地比较所有 Prop 。

• 在容器中，即在顶级组件中注入(inject) redux 状态作为 props，仅请求所需的状态切片，并使用 pure option (我假设您正在使用react-redux)以确保仅当 mapStateToProps 函数返回的状态切片发生更改时才会重新渲染您的容器。

• 如果您需要计算派生数据，也就是说，如果您将根据各种状态切片计算的数据注入(inject)到容器中，请使用内存函数来确保在以下情况下不会再次触发计算:输入不会改变，并保持对象与前一个调用返回的值相等。 Reselect是一个非常好的库来做到这一点。

• 在dumb组件中使用 shouldComponentUpdate 生命周期来避免传入 props 未更改时重新渲染。如果你不想手动实现这个，你可以使用React的PureRenderMixin为您检查所有 props，或者例如 Recompose 中的 pure 函数如果您需要更多控制，请使用库。此级别的一个很好的用例是呈现项目列表。如果您的项目组件实现了shouldComponentUpdate，则只有修改过的项目才会被重新渲染。但这不应该是解决所有问题的习惯:良好的组件分离通常更可取，因为它只为那些需要它们的组件提供流 Prop 。

就 Normalizr 而言，没有什么更具体的事情要做。