如何避免额外渲染与redux反应

Question

我有下一个对象：

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"}
                        ]
                }
              ]
}

存储在Redux存储（Book）中的

state.Book对象。

我有一个可视化此Book对象的组件。

组件Book呈现一个或多个Section组件，每个Section组件呈现Page组件。

Book通过react-redux在connect函数上订阅了Redux，并侦听了store.Book，空洞对象。

很明显，当titel的{​​{1}}发生变化时，将会重新呈现洞Book对象，包括所有Book和Sections。< / p>

有两个问题：

1. 如果只有Pages更改，反应引擎会真正重新呈现Sections和Pages吗？或者它会识别组件的其他部分没有改变，也不会重新渲染它们。

2. 如果它会重新渲染，那么避免它的最佳方法是什么？我应该同时将Book.titel和Section组件订阅到Page吗？但它无法解决问题，因为Store侦听了洞Book对象。或者我应该仅将state.Book组件订阅到Book和state.Book.id，然后使用内部state.Book.titel将数据路径到内部组件？

提前致谢。

Answer 1

1. 是的，React会调用render和Sections中的Pages方法，但不要担心性能，因为这些操作非常便宜。 Virtual DOM将抽象所有繁重的操作（即操作DOM），从而最大限度地减少对性能的影响。您可以自己运行一些快速测试，以查看此大小的变化对UX的影响。
2. 我不建议阻止重新渲染（正如我在＃1中说的那样，这是一项非常昂贵的操作），但如果你真的想这样做，你可以在shouldComponentUpdate组件中使用Section。只要您觉得false或他们的子组件不需要渲染，您只需要返回Section