React：条件渲染对性能的影响

Question

在组件树中进一步向下或向上有条件地呈现弹出窗口（例如，通过{shouldShowLoading && <LoadingSpinner />}加载微调器弹出窗口）是否更有意义？ 那么以下两种选择中哪一种是有利的——或者说性能上没有区别？

1. 在组件层次结构的更下方（例如，位于触发弹出窗口的按钮附近的离开位置）？ - 例如在以下箭头 position

    App.tsx / \ Header.tsx Counter.tsx / \ --> HeaderElement.tsx HeaderElement.tsx / Badge.tsx

   使用这样的伪代码：

    const HeaderElement = () => { //... shouldShowLoading is defined here return ( <div> <Title /> {shouldShowLoading && <LoadingSpinner />} </div> ); }

或者相反

2. ...进一步向上（例如，在主导航旁边的根目录中）？ - 例如在以下箭头 position

    --> App.tsx / \ Header.tsx Counter.tsx / \ HeaderElement.tsx HeaderElement.tsx / Badge.tsx

   使用这样的伪代码：

    const App = () => { //... shouldShowLoading is defined here or in global state return ( <div> < RootNavigation /> {shouldShowLoading && <LoadingSpinner />} </div> ); }

到目前为止我的想法和调查：

React 的协调算法总是为你的 DOM 创建第二个虚拟树（计算成本低），但最终只渲染与现有虚拟 DOM 树相比实际发生变化的子树，因为重新渲染的计算成本很高。

那么App.tsx中的条件渲染（如上所示）是否会导致它下面的所有内容（即整个应用程序）重新渲染？ - 我相信情况并非如此，但是在阅读了 React 文档中有关 React协调算法的更多信息后，我仍然无法说出原因。

问题：

谁能向我解释为什么在条件渲染的情况下并非所有子组件都必须重新渲染？ 协调算法使用哪种特殊启发式？ 还是我错了？

Answer 1

App.tsx是否选择有条件地渲染其后代并不等同于子树是否发生了变化。

孩子们可能没有导致他们改变的依赖关系。