常用！优化 React 条件渲染的 3 种方法

少用 三木运算符

isLogged ? <div>Hello {user.name}!</div> : null

改成

isLogged && <div>Hello {user.fullName}!</div>

会更加简洁高效，只关注登陆后的状态，并不关心未登陆的状态。

减少非必要渲染

availableCount && <div>{availableCount} available!</div>

改成

availableCount > 0 && <div>{availableCount} available!</div>

减少可能的无效数据导致的 非必要渲染

避免嵌套三木运算

为了方便写完内容，有时候会这样写数据

return isConnected ? (
    isWifi ? (
      <div>Connected via WiFi</div>
    ) : (
      <div>Connected via mobile data</div>
    )
  ) : (
    <div>Not connected</div>
  );

这样就比较迷惑，参考更优雅的表达，尽早返回数据

const displayContent = ({isConnected, isWifi}) => {
  if(!isConnected){
    return <div>Not connected!</div>;
  }
  
  if(isWiFi){
    return <div>Connected through WiFi!</div>;
  }
  
  return <div>Connected through mobile data!</div>
}

对照一下自己的项目，看看是否存在这些问题，优化优化吧！