React中条件渲染子组件的正确方式及性能疑问

核心结论 #

第二种写法（{show && <Child setShow={setShow} />}）才是React中标准的条件渲染实现方式，也是更合理的选择；第一种写法存在不必要的组件执行开销，仅适用于特定场景。

两种写法的本质差异 #

• 第一种写法：无论show是true还是false，Child组件都会被React完整实例化——组件内部的逻辑（比如你测试的console.log、props处理、甚至副作用函数）都会执行，只是最终根据show值决定是否输出DOM节点。
• 第二种写法：只有当show为true时，Child组件才会被实例化、执行内部逻辑并渲染；show为false时，这段JSX会被React完全跳过，Child不会有任何执行动作。

性能损耗的实际影响 #

在简单页面中，第一种写法的性能差异可以忽略，但在包含大量条件渲染组件的复杂页面中，确实会产生明显损耗：

• 每个Child组件的实例化、逻辑执行都会占用CPU资源，哪怕最终不渲染DOM；
• 大量这类组件同时执行时，会拖慢父组件的渲染周期，导致页面响应延迟。

关于第二种写法的“不常见”误解 #

你觉得第二种写法不常见其实是误区，它是React官方明确推荐的条件渲染方式之一。所谓的“不足”大多是使用不当导致的：

• 若show是0、''这类假值，&&逻辑会意外渲染这些假值本身，解决方法是改用{show ? <Child setShow={setShow} /> : null}；
• 如果Child需要保留内部状态（比如表单输入内容），频繁挂载/卸载会丢失状态，这种场景才适合用第一种写法（让组件保持挂载，仅控制DOM显示隐藏），但这属于特定需求，不是常规条件渲染的首选。

场景选择建议 #

• 常规条件渲染（不需要保留组件状态、仅在满足条件时加载组件）：优先使用第二种写法；
• 需要保留组件状态、仅切换显示隐藏：使用第一种写法，通过show props让组件内部控制DOM渲染。

内容的提问来源于stack exchange，提问作者JamesG