React 条件渲染完全指南

发布于:2025-07-17 ⋅ 阅读:(20) ⋅ 点赞:(0)

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>
    

条件渲染模式对比

方式 可读性 适用场景 性能影响
if语句 ★★★★ 组件顶层
三元运算 ★★★ 简单条件
&&运算 ★★ 单一条件
IIFE ★★ 复杂逻辑
组件变量 ★★★★ 中等复杂度
HOC ★★★★★ 逻辑复用
自定义Hook ★★★★★ 高级复用

常见错误及修复

  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 应用界面。根据具体场景选择最适合的方式,平衡代码可读性与性能表现。


网站公告

今日签到

点亮在社区的每一天
去签到