长春市做网站摄影网站知乎

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(); // 无条件Hookif (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?.();
}// 使用
<ConditionalRendercondition={isLoggedIn}renderTrue={() => <Dashboard />}renderFalse={() => <LoginForm />}
/>

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