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
    将数据路径到内部组件

  • 提前谢谢

  • 是的,React将在
    部分和
    页面中调用
    呈现
    方法
    ,但是不要担心性能,因为这些操作非常便宜。虚拟DOM将抽象所有繁重的操作(即操作DOM),从而最小化对性能的影响。您可以自己运行一些快速测试,以查看UX如何完全不受此大小更改的影响
  • 我不建议阻止重新渲染(正如我在#1中所说的,这是一个无用的操作),但如果您真的想要,可以使用
    部分的
    shouldComponentUpdate
    。只要感觉到
    部分
    或其子组件不需要渲染,就需要返回
    false

  • 谢谢你的快速回复。这很有帮助。实际上,我认为
    应该更新组件
    ,但如果react聪明到不更新未更改的DOM元素,那么它就没有那么多用例了。