在 React 中，条件渲染是根据组件的状态或 props 来决定哪些元素应该渲染或显示。React 允许我们使用 JavaScript 表达式来控制渲染内容，从而在不同的条件下展示不同的 UI。

目录

  1. 什么是条件渲染
  2. 使用 if 语句进行条件渲染
  3. 使用三元运算符进行条件渲染
  4. 使用逻辑与（&&）运算符进行条件渲染
  5. 条件渲染的最佳实践
  6. 参考资料

1. 什么是条件渲染

条件渲染 是根据某个条件来决定哪些内容需要在页面中显示或隐藏。React 的渲染是动态的，可以通过控制组件的状态来决定渲染的 UI。

示例

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

function App() {
  return <Greeting isLoggedIn={false} />;
}

在这个例子中，Greeting 组件根据 isLoggedIn 的值来显示不同的内容。如果 isLoggedIn 为 true，显示 “Welcome back!”，否则显示 “Please sign in.”。

2. 使用 if 语句进行条件渲染

在 React 中，可以在函数组件的内部使用 if 语句来实现条件渲染。通常，if 语句用于在函数体内的不同地方提前返回组件。

2.1 使用 if 语句进行渲染

function Greeting({ isLoggedIn }) {
  let message;
  if (isLoggedIn) {
    message = <h1>Welcome back!</h1>;
  } else {
    message = <h1>Please sign in.</h1>;
  }

  return message;
}

function App() {
  return <Greeting isLoggedIn={false} />;
}

在上面的代码中，message 根据条件被赋值，然后直接返回不同的 JSX 元素。

2.2 提前返回（Early Return）

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

提前返回的方法让代码更加简洁，有时更具可读性，尤其是在简单的条件渲染中。

3. 使用三元运算符进行条件渲染

三元运算符是一种常见的简洁方式，它允许你在一行中实现条件渲染。

3.1 基本用法

function Greeting({ isLoggedIn }) {
  return (
    <h1>
      {isLoggedIn ? "Welcome back!" : "Please sign in."}
    </h1>
  );
}

function App() {
  return <Greeting isLoggedIn={true} />;
}

在上面的代码中，isLoggedIn 的值决定了显示的文本。三元运算符 condition ? expr1 : expr2 会根据 condition 的值选择表达式 1 或 2。

4. 使用逻辑与（&&）运算符进行条件渲染

在 React 中，可以使用 && 运算符来简化条件渲染。当条件为 true 时，渲染第二个表达式，否则什么都不渲染。

4.1 基本用法

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
    </div>
  );
}

function App() {
  return <Greeting isLoggedIn={true} />;
}

在上面的代码中，只有当 isLoggedIn 为 true 时，<h1>Welcome back!</h1> 才会被渲染。如果 isLoggedIn 为 false，则 && 运算符的右侧表达式不会被渲染。

4.2 使用 && 处理多个条件

function Message({ isLoggedIn, hasNotifications }) {
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {hasNotifications && <p>You have new notifications.</p>}
    </div>
  );
}

function App() {
  return <Message isLoggedIn={true} hasNotifications={false} />;
}

这种写法适用于多个条件渲染的情况。如果多个条件同时为 true，多个元素将会被渲染。

5. 条件渲染的最佳实践

  • 简洁优先：当条件逻辑简单时，使用三元运算符或 && 运算符来减少代码量。
  • 提前返回：对于较为复杂的条件，可以使用提前返回（early return）来提高代码的可读性和清晰度。
  • 避免过多嵌套：避免在 JSX 中进行过多的嵌套条件判断，这样代码会变得难以维护。可以考虑将条件逻辑提取到变量中。
  • 控制渲染频率：如果条件渲染涉及昂贵的计算，考虑将条件判断移到 useMemo 或 useCallback 中，避免不必要的重新渲染。

6. 参考资料

出站链接

站内链接

React 的条件渲染提供了多种方法来根据不同的条件动态显示或隐藏内容。通过合理地使用条件渲染，你可以创建更加灵活和响应迅速的 React 组件。