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>);
}
优势：
- 逻辑高度复用
- 可组合性强
性能优化技巧
-
避免不必要的重新渲染：
// 使用React.memo优化条件组件 const MemoizedComponent = React.memo(ConditionalComponent); -
条件分支提取为独立组件：
// 将条件分支拆分为小组件 function UserStatus({ isOnline }) {return isOnline ? <OnlineBadge /> : <OfflineBadge />; } -
使用key强制重置组件：
<div key={condition ? 'a' : 'b'}>{condition ? <ComponentA /> : <ComponentB />} </div>
条件渲染模式对比
| 方式 | 可读性 | 适用场景 | 性能影响 |
|---|---|---|---|
| if语句 | ★★★★ | 组件顶层 | 小 |
| 三元运算 | ★★★ | 简单条件 | 小 |
| &&运算 | ★★ | 单一条件 | 小 |
| IIFE | ★★ | 复杂逻辑 | 中 |
| 组件变量 | ★★★★ | 中等复杂度 | 小 |
| HOC | ★★★★★ | 逻辑复用 | 中 |
| 自定义Hook | ★★★★★ | 高级复用 | 小 |
常见错误及修复
-
在渲染中直接执行函数：
// 错误 ❌ function App() {return (<div>{renderContent()} // 每次渲染都会调用</div>); }// 正确 ✅ function App() {const content = renderContent();return <div>{content}</div>; } -
条件渲染导致Hooks顺序变化：
// 错误 ❌ function Example({ condition }) {if (condition) {const [value] = useState(); // 条件中的Hook}// ... }// 正确 ✅ function Example({ condition }) {const [value] = useState(); // 无条件Hookif (condition) {// ...} } -
不处理所有条件分支：
// 危险 ❌ 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 应用界面。根据具体场景选择最适合的方式，平衡代码可读性与性能表现。