切换视图时如何避免子组件的多余或不必要的渲染？

Question

如果我有两个基于标志有条件地渲染的父级组件，并且如果两个父级组件都共享一个子级组件，而该子组件实际上从未更改，那么如何避免重新渲染该子级组件？

Codesandbox。

如您所见，我什至尝试使用React.memo，但是无论如何rendered side都会打印。

Answer 1

子组件<Side />每次都在渲染，因为：您正在将该子组件渲染为<SecondaryTemplate />或<PrimaryTemplate />的子组件。当您以编程方式（切换视图）渲染其中的任何一个时，其他对象立即从DOM完全卸载，因为<Side />是刚刚卸载的组件的子代，它不再存在于DOM中，而当另一个组件被渲染时，它之所以会渲染其子组件，是因为在虚拟DOM上运行的React算法完全不知道以前存在的，因此没有任何希望指望它是否会更改一次就变红的任何意义。

要了解这一点，可以查看以下内容： https://codesandbox.io/s/vigorous-khayyam-14ls0?file=/src/MainComponent.js

在我为您的代码添加代码的地方，请看一下控制台，您会看到，当您切换视图时，一个组件将被卸载（因此它的子组件<Side />也将被卸载）。