Question

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

在组件层次结构中更进一步（例如，位于触发弹出窗口的按钮附近）？ - 例如在以下箭头位置

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

用这样的伪代码：

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

或者代替

...更上一层楼（例如在主导航旁边的根目录中）？ - 例如在以下箭头位置

-->                      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 的协调算法的更多信息后in the React docs我仍然无法说出原因..

问题：

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

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

0 个答案: