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