我想知道如何在React中管理复杂的状态,限制那些内容没有改变的组件的渲染调用的数量。
举个例子:
我有简单的连接到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停止重新渲染,但这是一个好方法吗?
发布于 2019-06-26 13:20:53
很可能是你的减速机出了问题。否则,您可以使用reselect
库来定义选择器,这些选择器记录这些值,这样,除非值确实发生了变化,否则不会重新呈现。
发布于 2019-06-20 19:15:17
您可以使用组件生命周期方法shouldComponentUpdate
,此方法将传递nextState
和nextProps
。这样,您就可以通过返回true
(更新)或false
(不更新)来决定组件是否需要更新。
文档:here。
https://stackoverflow.com/questions/56647164
复制相似问题