React向子组件传递Props的最佳实践：全量传递还是显式传递？

其实这两种传递Props的方式没有绝对的「最佳实践」，得看你当下的场景来选——下面我拆解下各自的利弊，再给你些实用的判断依据：

方式1：使用{...props}批量传递 #

• 优点：超级省事！尤其是给复用组件统一传递一堆通用属性（比如CSS类名、通用事件处理）的时候，不用一个个手写，能大幅减少重复代码
• 缺点：最大的坑就是容易不小心传递子组件不接受的非法Props，React会直接抛出警告；而且时间久了，你可能搞不清子组件到底依赖哪些Props，维护起来容易懵

方式2：仅显式传递所需Props #

• 优点：清晰度拉满！看代码就能一眼知道子组件依赖哪些核心Props，完全避免非法Props的警告，后期维护、排查问题都省心
• 缺点：如果要给复用组件统一加样式或者通用属性，就得一个个手动添加，确实有点繁琐

实用选择建议 #

• 如果你在做高阶组件（HOC）、布局组件这类需要透传大量通用Props的场景，优先用{...props}，比如给所有子组件统一加className或者onClick这类通用属性的时候，效率很高
• 如果你在处理业务逻辑组件、独立功能组件，优先选显式传递——这类组件的Props通常是明确的业务参数，显式传递能让组件的依赖更清晰，团队协作或者自己后期维护都不容易踩坑
• 折中方案：要是想兼顾效率和安全性，可以用解构+剩余参数的方式，比如：

const ParentComponent = ({ prop1, prop2, ...restProps }) => {
  return <ChildComponent prop1={prop1} prop2={prop2} {...restProps} />;
};

这样既显式传递了子组件明确需要的核心Props，又能批量传递那些通用的、不会触发警告的属性（比如className、style这些React原生支持的DOM属性）

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