如何使用redux + normalizr减少呈现

Question

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

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

Answer 1

有几件事你可以做，以尽量减少在你的应用程序的渲染次数，并使更新更快。让我们从Redux存储到React组件来看看它们。

• 在Redux存储中，可以使用不可变的数据结构(例如，Immutable.js)。这将使所有后续优化更快，因为您只需要检查前一个/下一个状态片是否相等，而不是递归地比较所有道具，就可以比较更改。
• 容器中的，即在顶级组件中将redux状态作为支持注入，只询问所需的状态片，并使用pure 选项 (我假设您使用的是react redux)，以确保只有当由mapStateToProps函数返回的状态片发生更改时，才会重新呈现容器。
• --如果您需要计算派生数据，即如果您在容器中注入从各种状态片计算出来的数据，则使用一个回传函数来确保在输入不变时不会再次触发计算，并保持对象与上一次调用返回的值相等。重选是这样做的一个很好的库。
• 在您的哑组件中，使用shouldComponentUpdate生命周期来避免当传入的道具不改变时重新呈现。如果您不想手动实现这个功能，可以使用React的PureRenderMixin为您检查所有的道具，或者，例如，如果需要更多的控制，可以使用重组库中的pure函数。在这个级别上，一个很好的用例是提供一个项目列表。如果您的item组件实现了shouldComponentUpdate，那么只会重新呈现修改过的项。但是这不应该是一个解决所有问题的习惯:一个好的组件分离通常是可取的，因为它只为那些需要它们的组件制造流支持。

就Normalizr而言，没有什么比这更具体的了。

Answer 2

如果在某些情况下(应该是罕见的)您检测到与React的组件的呈现周期直接相关的性能问题，那么您应该在涉及的组件中实现shouldComponentUpdate()方法(详细信息可以在React的docs 这里中找到)。

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
}