优化条件渲染

频繁的挂载和卸载组件是一项耗性能的操作，为了确保应用程序的性能，应该减少组件挂戰和卸戰的次数。

在 React 中我们经常会根据条件渲染不同的组件． 条件渲染是一项必做的优化操作，

错误代码：

function App() {
  if (条件真) {
    return (
      <>
        <AdminHeader />
        <Header />
        <Content />
      </>
    )
  } else {
    return (
      <>
        <Header />  // 当diff每一层对比时候，这一层和 AdminHeader 不一样，则 AdminHeader 卸载
        <Content /> // 当diff每一层对比时候，这一层和 Header 不一样，则 Header 卸载
      </>
    )
  }
}

在上面的代码中，当渲染条件发生变化时，React 内部在做 virtual DOM 比对时发现，刚刚第一个组件是 AdminHeader，现在第一个组件是Header，刚

刚第二个组件是Header， 现在第二个组件是 Content， 组件发生了变化，React 就会卸载 AdminHeader、Header、Content， 重新挂载 Header 和

Ccontent. 这种挂裁和卸裁就是没有必要的

优化后代码：

function App() {
    return (
      <>
        { 条件真? <AdminHeader />: null }
        或者
        { 条件真 && <AdminHeader /> }
        <Header />
        <Content />
      </>
    )
}