如何避免在与 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，孔对象。

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

有两个问题：

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

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

提前致谢。

Answer 1

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