React条件渲染最佳实践：子组件还是父组件内实现？

这两种方案没有绝对的优劣，核心得看组件的职责边界和复用需求，结合Atomic设计的原则来选择：

适合在子组件内部处理条件渲染的场景 #

• 当「显示/隐藏」是该原子组件的固有职责时：比如组件本身就是带开关属性的UI单元（如可折叠提示条、状态徽章），把show作为prop内部处理，能让组件的API更贴合自身功能，父组件无需关注隐藏的实现细节。
• 当组件需要多处复用相同显示逻辑时：如果多个父组件都需要控制这个子组件的显示，把逻辑封装在子组件内部，避免重复写{show && <Child />}这类冗余代码。

示例代码：

const Badge = ({ show, text }: { show: boolean; text: string }) => {
  return show ? <span className="badge">{text}</span> : null;
};

父组件调用只需传参：<Badge show={hasUnread} text="未读" />

适合在父组件内部处理条件渲染的场景 #

• 当「显示/隐藏」是父组件的业务逻辑决定，子组件仅负责纯展示时：比如子组件是纯文本标签、基础图标这类无状态的原子组件，它本身没有「是否显示」的固有属性，显示时机由父组件的业务场景（如用户权限、页面状态）控制，此时父组件处理条件更符合单一职责原则。
• 当子组件需要被完全卸载而非仅隐藏时：如果隐藏时希望彻底释放组件资源、清除内部状态，父组件通过{show && <Child />}的方式，能直接控制组件的挂载/卸载，比子组件内部返回null更彻底（子组件返回null时组件实例仍存在，只是不渲染DOM）。

示例代码：

// 父组件
const Parent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <div>
      {isLoggedIn && <UserAvatar />}
    </div>
  );
};

总结 #

结合Atomic设计「原子组件专注单一基础职责」的核心，判断逻辑归属：如果显示控制是原子组件的基础功能，就内聚到子组件；如果是业务场景的控制逻辑，就交给父组件，保持原子组件的纯粹性。

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