首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React redux连接渲染优化

React redux连接渲染优化
EN

Stack Overflow用户
提问于 2019-06-18 18:34:02
回答 2查看 1.5K关注 0票数 4

我想知道如何在React中管理复杂的状态,限制那些内容没有改变的组件的渲染调用的数量。

举个例子:

我有简单的连接到redux存储容器组件与“项目”道具(这是数组)。

代码语言:javascript
复制
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停止重新渲染,但这是一个好方法吗?

EN

回答 2

Stack Overflow用户

发布于 2019-06-26 13:20:53

很可能是你的减速机出了问题。否则,您可以使用reselect库来定义选择器,这些选择器记录这些值,这样,除非值确实发生了变化,否则不会重新呈现。

票数 4
EN

Stack Overflow用户

发布于 2019-06-20 19:15:17

您可以使用组件生命周期方法shouldComponentUpdate,此方法将传递nextStatenextProps。这样,您就可以通过返回true (更新)或false (不更新)来决定组件是否需要更新。

文档:here

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56647164

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档