React Redux Connect渲染优化

Question

我试图通过限制内容未更改的组件的渲染调用次数来获取如何在React中管理复杂状态的方法。

例如：

我已经使用“ items”道具（即数组）简单地连接到redux存储容器组件。

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

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

const ConnectedComponent = connect(mapStateToProps)(MyComponent);

每当复杂存储区的任何部分发生更改时，即使道具数据没有更新，即使道具数据为空，道具属性也会更改：oldProp：[] => newProp：[]。并导致重新渲染。（我在React Dev Tools中找到了它，它突出显示了更新的组件）

我是否应该担心这种不必要的重新渲染？最好的解决方法是什么？我已经发现新的React.memo hoc可以停止重新渲染，但这是个好方法吗？

Answer 1

使用mapStateToProps您的connect()通话方式您希望您的组件时，保存修改通知- 不管你是否有兴趣发生了变化或者不小的片段会出现这种情况。此外，react-redux通过对由返回的对象mapStateToProps和先前的道具进行浅浅的比较，可以防止不必要的重新渲染。

以您的示例为例，newProp: []每次这样的场景都会创建一个新数组，因此，由于数组是不同的实例，因此无法进行较浅的比较。

我是否应该担心这种不必要的重新渲染？

React小心不要不必要地重新渲染组件，因此，即使render再次调用了组件，只要props对所述组件的更改实际上没有发生，React就不会做任何其他工作。可以肯定地说，对于大多数应用程序而言，不必要的重新渲染并不是所有问题。

如果您认为它会影响您的应用程序，或者您只是想了解更多有关减少它的方法，那么关于性能的材料很多：

• React-Redux- mapStateToProps和性能
• 反应-优化性能