react如何根据条件

条件渲染的实现方式

在React中，根据条件渲染不同内容可以通过多种方式实现。以下是常见的几种方法：

使用if语句 通过JavaScript的if语句控制组件的返回内容：

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

三元运算符 适用于简单的条件判断：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back</h1> : <h1>Please sign up</h1>}
    </div>
  );
}

逻辑与(&&)运算符 当只需要条件为true时渲染内容：

function Mailbox({ unreadMessages }) {
  return (
    <div>
      {unreadMessages.length > 0 &&
        <h2>You have {unreadMessages.length} unread messages.</h2>
      }
    </div>
  );
}

条件渲染的进阶用法

立即执行函数 适合复杂的条件逻辑：

function NumberDisplay({ number }) {
  return (
    <div>
      {(() => {
        if (number % 2 === 0) {
          return <span>Even</span>;
        } else {
          return <span>Odd</span>;
        }
      })()}
    </div>
  );
}

枚举对象 通过对象映射实现条件渲染：

const componentMap = {
  loading: <LoadingComponent />,
  error: <ErrorComponent />,
  success: <SuccessComponent />
};

function StatusComponent({ status }) {
  return componentMap[status] || <DefaultComponent />;
}

条件渲染的性能优化

使用React.memo 避免不必要的重新渲染：

const UserInfo = React.memo(({ user }) => {
  if (!user) return null;
  return (
    <div>
      <p>{user.name}</p>
      <p>{user.email}</p>
    </div>
  );
});

条件性挂载组件 通过状态控制组件挂载：

function ToggleComponent() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        Toggle
      </button>
      {show && <ExpensiveComponent />}
    </div>
  );
}

条件渲染的最佳实践

保持条件渲染逻辑简洁明了，避免过度嵌套。对于复杂的条件逻辑，考虑将其提取为单独的函数或自定义Hook。在需要根据多个条件渲染不同内容时，使用策略模式或工厂模式可以使代码更易于维护。

条件渲染时应考虑可访问性，确保屏幕阅读器能够正确识别动态变化的内容。对于频繁切换的组件，使用CSS的display属性可能比条件渲染更高效。