如何使用 redux + normalizr 减少渲染

Question

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

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

Answer 1

如果在某些情况下（应该很少见）您检测到与 React 的组件渲染周期直接相关的性能问题，那么您应该在中实现 shouldComponentUpdate() 方法涉及的组件（详细信息可以在 React 的文档中找到 here）。

shouldComponentUpdate() 中的更改检测将特别容易，因为 Redux 强制您实现不可变状态：

shouldComponentUpdate(nextProps, nextState) {

    return nextProps.dataObject !== this.props.dataObject;

    // true when dataObject has become a new object,
    // which happens if (and only if) its data has changed,
    // thanks to immutability
}

Answer 2

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

在你的 Redux store 中，你可以使用不可变数据结构（例如，Immutable.js）。这将使所有后续优化更快，因为您将能够通过仅检查 previous/next 状态切片相等性而不是递归比较所有道具来比较更改。
在您的容器中，也就是在您将 redux 状态作为 props 注入的顶级组件中，仅询问您需要的状态切片，并且使用 pure option（我假设您使用的是 react-redux）确保仅当 mapStateToProps 函数返回的状态切片发生变化时才会重新渲染您的容器。
如果您需要计算派生数据，也就是说，如果您在容器中注入从各种状态切片计算的数据，请使用记忆函数来确保如果输入没有改变，则不会再次触发计算，并保持对象与上一次调用返回的值相等。 Reselect 是一个非常好的图书馆。
在你的哑组件中使用shouldComponentUpdate生命周期来避免在传入的道具没有改变时重新渲染。如果你不想手动实现它，如果你需要更多控制，你可以使用 React 的 PureRenderMixin to check all props for you, or, for example, the pure function from the Recompose 库。此级别的一个很好的用例是呈现项目列表。如果您的项目组件实现了 shouldComponentUpdate，则只会重新呈现修改后的项目。但这不应该是解决所有问题的习惯：良好的组件分离通常是更可取的，因为它只为那些需要它们的组件制作流道具。

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

如何使用 redux + normalizr 减少渲染

How to reduce renders using redux + normalizr

performance

reactjs

redux

react-redux

normalizr