在 react 中，推荐通过父组件控制子组件的渲染（如 `condition &&
在 React 开发中，条件渲染是高频需求，但实现方式直接影响性能、可维护性与代码语义清晰度。最推荐的方式是在父组件中控制是否渲染子组件，即采用 condition && <MyComponent /> 的模式：
// ✅ 推荐：父组件决定是否挂载，子组件完全不执行
const Parent = () => {
const [isReady, setIsReady] = useState(false);
return (
<div>
{isReady && <MyComponent />} {/* MyComponent 不会初始化，无 hooks 执行 */}
<button onClick={() => setIsReady(true)}>Show</button>
</div>
);
};
const MyComponent = () => {
// ✅ 这些逻辑仅在 isReady === true 时才会执行
useEffect(() => {
console.log('Mounted!');
}, []);
const expensiveCalculation = useMemo(() => {
return heavyComputation();
}, []);
return <div>Content</div>;
};相比之下，将条件判断移入子组件内部（如 if (!props.isRender) return null）虽能“隐藏”内容，但存在明显缺陷：
- ❌ 钩子仍会被调用：React 要求所有 hooks 必须在组件函数顶部无条件执行。即使返回 null，useEffect、useState、useMemo 等仍会运行，造成冗余计算与潜在副作用；
- ❌ 状态与副作用提前创建：组件实例已进入 React 渲染流程，内部状态、上下文订阅、事件监听器等可能已初始化，违背“按需加载”原则；
- ❌ 阻碍代码分割与懒加载：无法与 React.lazy() 和 Suspense 配合实现真正的动态导入——因为组件始终被引用，打包器无法将其拆分为独立 chunk。
而父级条件渲染天然支持性能优化：
const LazyComponent = React.lazy(() => import('./LazyComponent'));
// ✅ 可与 Suspense 结合，首次满足条件时才下载并初始化
{show && (
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>
)}⚠️ 注意事项：
- 避免在条件渲染中使用 && 与 falsy 值（如 0、''）混用，可能导致意外隐藏（例如 count && <List items={items} /> 在 count === 0 时不渲染）。此时应改用三元运算符或显式布尔转换：{count > 0 && <List items={items} />}。
- 若条件逻辑复杂或复用频繁，可封装为自定义 Hook 或高阶组件，但核心原则不变：让组件只在真正需要时被挂载。
总结：条件渲染的本质不是“隐藏”，而是“按需创建”。优先选择父组件级控制，既符合 React 的声明式心智模型，又能保障性能、可预测性与可测试性。
