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

Question

我有一个使用 React + Redux + Normalizr 的应用程序，我想知道在entities.

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

Answer 1

您可以做几件事来最大限度地减少应用程序中的渲染次数，并加快更新速度。让我们从你的 Redux 商店到你的 React 组件来看看它们。

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

• 在您的容器中，即在您将 redux 状态作为道具注入的顶级组件中，仅询问您需要的状态切片，并使用pure 选项（我假设您正在使用 react-redux）来确保您的容器将仅当您的mapStateToProps函数返回的状态切片已更改时才重新渲染。

• 如果您需要计算派生数据，也就是说，如果您在容器中注入从各种状态切片计算的数据，请使用记忆函数确保在输入不变的情况下不会再次触发计算，并保持对象相等上一次调用返回的值。Reselect是一个非常好的库。

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

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

Answer 2

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

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
}