React.js中传递多个Props的最佳及更简洁实现方式是什么

你图里这种把同个对象的属性逐个拆成独立props传递的写法，完全可以通过React官方推荐的语法大幅简化，不需要逐行重复写属性取值逻辑。

核心实现：ES6 对象展开语法 #

这是目前业界最通用的规范写法，也是React官方文档明确推荐的简化方式，无额外依赖、原生支持：

• 你当前图中的冗长写法逻辑示例：

// 逐属性传递的冗余写法
<ProfileCard
  name={userInfo.name}
  age={userInfo.age}
  email={userInfo.email}
  avatarUrl={userInfo.avatarUrl}
  bio={userInfo.bio}
/>

• 等价的简洁写法：

// 直接展开整个对象，自动把所有属性拆成props传递
<ProfileCard {...userInfo} />

关键注意细节 #

• 展开语法的传递效果和逐属性编写完全等价，React 会自动把展开对象内的所有可枚举属性，映射为子组件可读取的props
• 如需单独覆盖某一个属性，把自定义值写在展开语法的后方即可，后方的属性优先级更高：

// 展开userInfo全量属性，单独覆盖isEditable这个prop
<ProfileCard {...userInfo} isEditable={false} />

• 不要盲目把整个组件state、无关的遍历标识全展开传递，会导致子组件接收到大量用不到的无效props，增加不必要的浅比较、渲染判断开销
• React 内置的特殊属性key、ref不会作为普通props传递，这类属性即使写在展开对象里，也不会被子组件通过props读取到，需要通过对应API单独处理
• 这个方案仅适合同层级父子组件的多props传递场景，如果是跨3层以上的深层级属性透传，再考虑搭配Context做全局状态传递，避免 props 逐层嵌套传递的问题。

配套优化：子组件Props 批量解构 #

传递逻辑简化后，可以在子组件接收端配合解构语法进一步减少样板代码：

// 子组件接收时，直接在参数位置批量解构需要的props
function ProfileCard({ name, age, email, avatarUrl, bio, ...restProps }) {
  // 直接使用解构出的变量，不需要每次写props.xxx
  // 剩余未单独解构的props都会存在restProps对象里，方便后续向更深层级透传
}

可读性提示：如果觉得全量展开的写法语义模糊，可以把要传递的props先封装成明确命名的对象，比如const profileProps = { name, age, email }，再执行展开，代码的可维护性比逐行写props更好。

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