reactjs - 如何避免在使用 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"}
                        ]
                }
              ]
}

Book 对象存储在 Redux 存储中 (state.Book)。

我有一个组件可以可视化这个Book对象。

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

Book通过react-redux的connect函数订阅了Redux，并监听store.Book，hole对象。

很明显，当Book的titel发生变化时，孔Book对象将重新渲染，包括所有Sections 和页面。

有两个问题:

1. 如果只有 Book.titel 发生变化，React 引擎真的会重新渲染 Sections 和 Pages 吗？或者它会识别组件的其他部分没有改变，并且不会重新渲染它们。

2. 如果它会重新渲染，那么避免它的最佳方法是什么？我是否也应该将 Section 和 Page 组件订阅到 Store ？但这并不能解决问题，因为 Book 监听着洞 state.Book 对象。或者我应该仅将 Book 组件订阅到 state.Book.id 和 state.Book.titel，然后使用 this.context。存储内部以将数据路径到内部组件？

提前致谢。

Answer 1

1. 是的，React 将调用 render Sections中的方法和Pages但不要担心性能，因为这些操作确实很便宜。虚拟 DOM 将抽象所有繁重的操作(即操作 DOM)，最大限度地减少对性能的影响。您可以自己运行一些快速测试，看看用户体验如何完全不受此大小的更改的影响。
2. 我不建议阻止重新渲染(正如我在 #1 中所说，这是一个不昂贵的操作)，但如果你真的想要，你可以使用 shouldComponentUpdate在 Section成分。您只需返回 false每当您感觉到 Section或者它们的子组件不需要渲染