javascript - React redux 连接渲染优化

Question

我正在尝试了解如何在 React 中管理复杂状态，限制内容未更改的组件的渲染调用次数。

例如:

我使用“items” Prop (数组)简单连接到 redux store 容器组件。

const Component = ({ items }) => (
    <>{items.map(item => <ItemComponent key={item.id} {...item} />}</>
);

const mapStateToProps = state => ({
    items: $$data.select.items(state),
});

const ConnectedComponent = connect(mapStateToProps)(MyComponent);

每当复杂存储的任何部分发生变化时——items prop 也会发生变化，即使 items 数据没有更新，即使它是空的:oldProp: [] => newProp: []。它会导致重新渲染。 (我在 React Dev Tools 中找到它，它突出显示更新的组件)

我应该担心这种不必要的重新渲染吗？处理它的最佳方法是什么？我已经发现新的 React.memo hoc 停止重新渲染，但这是好方法吗？

Answer 1

mapStateToProps的使用在你的connect() call 意味着你希望你的组件在商店发生变化时得到通知 - 无论你感兴趣的小片段是否发生变化，这都会发生。 此外，react-redux通过对 mapStateToProps 返回的对象执行浅比较来防止不必要的重新呈现自身和之前的 Prop 。

看看你的例子，这样的场景newProp: []每次都会创建一个新数组，因此浅比较会失败，因为数组是不同的实例。

Should I worry about this unnecessary rerenders?

React 会注意不要不必要地重新渲染组件，所以即使 render再次调用，只要props到所说的组件实际上并没有改变，那么 React 将不会做任何额外的工作。可以肯定地说，对于大多数应用程序而言，不必要的重新渲染并不是什么大问题。

如果您觉得它会影响您的应用程序，或者您只是想了解更多关于减少它的方法，那么有很多关于性能主题的 Material :

• React-Redux - mapStateToProps and Performance
• React - Optimizing Performance