第八章：条件渲染

8.1 条件渲染基础

React 中，你可以使用 JavaScript 的条件语句来决定渲染什么内容。

if 语句：

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

元素变量：

function LoginControl() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
  let button;
  if (isLoggedIn) {
    button = <LogoutButton onClick={handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={handleLoginClick} />;
  }
 
  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  );
}

8.2 三元运算符

对于简单的条件渲染，可以使用三元运算符：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
    </div>
  );
}
 
// 内联条件
function Message({ unreadCount }) {
  return (
    <div>
      <h1>你好!</h1>
      {unreadCount > 0 ? <p>你有 {unreadCount} 条未读消息。</p> : null}
    </div>
  );
}

8.3 逻辑与运算符

当条件为 true 时渲染元素，否则不渲染任何内容：

function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>你好!</h1>
      {unreadMessages.length > 0 && (
        <h2>你有 {unreadMessages.length} 条未读消息。</h2>
      )}
    </div>
  );
}

注意 0 的问题：

// 如果 count 为 0，会显示 "0" 在页面上
<div>{count && <span>有消息</span>}</div>
 
// 正确做法
<div>{count > 0 && <span>有消息</span>}</div>
<div>{!!count && <span>有消息</span>}</div>
<div>{Boolean(count) && <span>有消息</span>}</div>

8.4 阻止组件渲染

让组件返回 null 可以阻止它渲染：

function WarningBanner({ warn }) {
  if (!warn) {
    return null;
  }
 
  return (
    <div className="warning">
      警告!
    </div>
  );
}

注意事项：

返回 null 不会影响组件的生命周期方法
componentDidUpdate 仍然会被调用

8.5 复杂条件渲染

switch 语句：

function StatusMessage({ status }) {
  switch (status) {
    case 'loading':
      return <LoadingSpinner />;
    case 'success':
      return <SuccessMessage />;
    case 'error':
      return <ErrorMessage />;
    default:
      return null;
  }
}

对象映射：

const statusComponents = {
  loading: LoadingSpinner,
  success: SuccessMessage,
  error: ErrorMessage
};
 
function StatusMessage({ status }) {
  const Component = statusComponents[status];
  return Component ? <Component /> : null;
}

策略模式：

function Page({ userType }) {
  const pages = {
    admin: AdminPage,
    user: UserPage,
    guest: GuestPage
  };
 
  const Component = pages[userType] || GuestPage;
  return <Component />;
}

8.6 权限控制组件

function Permission({ children, role, allowedRoles }) {
  if (!allowedRoles.includes(role)) {
    return <NoPermission />;
  }
  return children;
}
 
// 使用
function AdminPanel() {
  return (
    <Permission role={user.role} allowedRoles={['admin', 'superadmin']}>
      <AdminContent />
    </Permission>
  );
}

8.7 多条件渲染

嵌套条件：

function ComplexCondition({ isLoggedIn, isAdmin, hasPermission }) {
  if (!isLoggedIn) {
    return <LoginPrompt />;
  }
 
  if (isAdmin) {
    return <AdminDashboard />;
  }
 
  if (hasPermission) {
    return <UserDashboard />;
  }
 
  return <NoAccess />;
}

多分支三元运算符：

function Status({ code }) {
  return (
    <div>
      {code === 200 ? <Success /> :
       code === 404 ? <NotFound /> :
       code === 500 ? <ServerError /> :
       <Unknown />}
    </div>
  );
}

8.8 性能优化

避免不必要的渲染：

// 不推荐：每次都计算
function List({ items, filter }) {
  return (
    <div>
      {items.filter(item => item.type === filter).map(item => (
        <Item key={item.id} {...item} />
      ))}
    </div>
  );
}
 
// 推荐：使用 useMemo
function List({ items, filter }) {
  const filteredItems = useMemo(() =>
    items.filter(item => item.type === filter),
    [items, filter]
  );
 
  return (
    <div>
      {filteredItems.map(item => (
        <Item key={item.id} {...item} />
      ))}
    </div>
  );
}

8.9 总结

本章介绍了条件渲染的各种方法：

if 语句
三元运算符
逻辑与运算符
阻止组件渲染（return null）
复杂条件处理
权限控制模式

选择合适的条件渲染方式可以让代码更清晰、更易维护。

目录