Reactjs 如何在react with redux中避免额外渲染
我有下一个目标:Reactjs 如何在react with redux中避免额外渲染,reactjs,redux,react-redux,Reactjs,Redux,React Redux,我有下一个目标: Book = { id: 1, titel: "Some Book", sections: [ {id: 1, titel: "Section Titel", pages: [ {id: 1, content: "Some text"}, {id: 2,
Book = {
id: 1,
titel: "Some Book",
sections: [
{id: 1,
titel: "Section Titel",
pages: [
{id: 1, content: "Some text"},
{id: 2, content: "Some text"},
{id: 3, content: "Some text"}
]
},
{id: 2,
titel: "Section Titel",
pages: [
{id: 1, content: "Some text"},
{id: 2, content: "Some text"}
]
}
]
}
Book
存储在Redux存储中的对象(state.Book
)
我有一个组件可以可视化这个书
对象
组件Book
呈现一个或多个部分
组件,每个部分
组件呈现页面
组件
Book
通过react-Redux的connect
功能订阅Redux,并收听store.Book
,hole对象
很明显,当书籍
的滴度
发生变化时,将重新呈现书籍
对象的孔,包括所有部分
和页面
有两个问题:
Book.titel
,react引擎真的会重新呈现部分和页面吗?或者,它将标识组件的其他部分没有更改,也不会重新渲染它们
部分
和页面
组件订阅到存储
?但它不会解决问题,因为Book
侦听洞state.Book
对象。或者我应该只订阅Book
组件到state.Book.id
和state.Book.titel
,然后使用this.context.store
将数据路径到内部组件部分和页面中调用呈现
方法
,但是不要担心性能,因为这些操作非常便宜。虚拟DOM将抽象所有繁重的操作(即操作DOM),从而最小化对性能的影响。您可以自己运行一些快速测试,以查看UX如何完全不受此大小更改的影响
部分的shouldComponentUpdate
。只要感觉到部分
或其子组件不需要渲染,就需要返回false
谢谢你的快速回复。这很有帮助。实际上,我认为
应该更新组件,但如果react聪明到不更新未更改的DOM元素,那么它就没有那么多用例了。