React 条件渲染完全指南

React 条件渲染完全指南

条件渲染是 React 中根据特定条件显示不同 UI 的核心技术。以下是 React 条件渲染的 7 种主要方式及其最佳实践：

1. if 语句条件渲染

function UserGreeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>欢迎回来!</h1>;
  }
  return <h1>请先登录</h1>;
}

适用场景：

• 组件级别条件渲染
• 条件逻辑较复杂时

2. 三元运算符

function Notification({ messages }) {
  return (
    <div>
      {messages.length > 0 ? (
        <span>您有 {messages.length} 条未读消息</span>
      ) : (
        <span>没有未读消息</span>
      )}
    </div>
  );
}

最佳实践：

• 简单 true/false 条件
• JSX 内联条件判断

3. 逻辑与 (&&) 运算符

function ShoppingCart({ items }) {
  return (
    <div>
      <h2>购物车</h2>
      {items.length > 0 && (
        <ul>
          {items.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

注意事项：

• 确保左侧表达式不会返回 0 等 falsy 值
• 适合单一条件渲染

4. 立即执行函数 (IIFE)

function ComplexCondition({ status }) {
  return (
    <div>
      {(() => {
        switch (status) {
          case 'loading':
            return <Spinner />;
          case 'error':
            return <ErrorMsg />;
          case 'success':
            return <SuccessMsg />;
          default:
            return null;
        }
      })()}
    </div>
  );
}

适用场景：

• 多条件分支
• 复杂逻辑判断

5. 组件变量存储

function AuthButton({ isLoggedIn }) {
  let button;
  
  if (isLoggedIn) {
    button = <LogoutButton />;
  } else {
    button = <LoginButton />;
  }

  return <div>{button}</div>;
}

优点：

• 逻辑与 UI 分离
• 便于调试

6. 高阶组件 (HOC)

function withAdminAccess(WrappedComponent) {
  return function({ isAdmin, ...props }) {
    return isAdmin ? <WrappedComponent {...props} /> : <div>无权限访问</div>;
  }
}

const AdminPanel = withAdminAccess(UserManagementPanel);

适用场景：

• 权限控制
• 复用条件逻辑

7. 自定义 Hook

function useConditionalRender(condition, trueComponent, falseComponent = null) {
  return condition ? trueComponent : falseComponent;
}

function App() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  
  return (
    <div>
      {useConditionalRender(
        isMobile,
        <MobileLayout />,
        <DesktopLayout />
      )}
    </div>
  );
}

优势：

• 逻辑高度复用
• 可组合性强

性能优化技巧

1. 避免不必要的重新渲染：

   // 使用React.memo优化条件组件
   const MemoizedComponent = React.memo(ConditionalComponent);
   

2. 条件分支提取为独立组件：

   // 将条件分支拆分为小组件
   function UserStatus({ isOnline }) {
     return isOnline ? <OnlineBadge /> : <OfflineBadge />;
   }
   

3. 使用key强制重置组件：

   <div key={condition ? 'a' : 'b'}>
     {condition ? <ComponentA /> : <ComponentB />}
   </div>
   

条件渲染模式对比

常见错误及修复

1. 在渲染中直接执行函数：

   // 错误 ❌
   function App() {
     return (
       <div>
         {renderContent()} // 每次渲染都会调用
       </div>
     );
   }
   
   // 正确 ✅
   function App() {
     const content = renderContent();
     return <div>{content}</div>;
   }
   

2. 条件渲染导致Hooks顺序变化：

   // 错误 ❌
   function Example({ condition }) {
     if (condition) {
       const [value] = useState(); // 条件中的Hook
     }
     // ...
   }
   
   // 正确 ✅
   function Example({ condition }) {
     const [value] = useState(); // 无条件Hook
     if (condition) {
       // ...
     }
   }
   

3. 不处理所有条件分支：

   // 危险 ❌
   function Component({ data }) {
     return data && <div>{data.title}</div>;
     // 当data为undefined时返回undefined
   }
   
   // 安全 ✅
   function Component({ data }) {
     return data ? <div>{data.title}</div> : null;
   }
   

高级模式：渲染属性(Render Props)

function ConditionalRender({ condition, renderTrue, renderFalse }) {
  return condition ? renderTrue() : renderFalse?.();
}

// 使用
<ConditionalRender
  condition={isLoggedIn}
  renderTrue={() => <Dashboard />}
  renderFalse={() => <LoginForm />}
/>

掌握这些条件渲染技术，可以构建出更加灵活、可维护的 React 应用界面。根据具体场景选择最适合的方式，平衡代码可读性与性能表现。