React函数组件传参：传完整对象还是单个所需属性？

从编程范式和最佳实践角度，优先传递组件实际需要的单个string属性，原因如下：

1. 组件职责更清晰，可读性更强 #

组件只接收它真正依赖的属性，其他开发者一眼就能看懂这个组件的输入依赖是什么，不用翻组件内部代码去确认用到了大对象里的哪个键。比如：

// 推荐：明确传递需要的属性
<UserName name={user.profile.name} />

// 不推荐：传递整个对象，依赖不明确
<UserName user={user} />

如果传整个对象，后续维护者可能会误以为组件用到了对象的其他属性，不敢轻易修改或删除对象里的无关键。

2. 降低组件耦合度 #

传递单个属性时，组件只和这个string值耦合，而非整个大对象的结构。如果后续大对象的结构发生变化（比如name从user.profile.name移到user.basicInfo.name），只需要在父组件传参的地方修改路径，子组件完全不用改动。但如果传整个对象，子组件内部的取值逻辑也得跟着调整，耦合度更高。

3. 贴合单一职责原则 #

React组件设计的核心原则之一是单一职责，组件只专注于自身功能，接收最精简的输入能让它的职责更纯粹。传递大对象容易让组件不知不觉依赖更多属性，慢慢变得臃肿。

例外场景：组件需要对象多个属性时 #

如果后续这个组件会逐渐用到大对象里的多个属性，或者这个对象是某个业务领域的实体（比如User类型，组件是展示用户信息的卡片），这时传递整个对象会更方便，避免每次新增属性都要修改父组件的传参。但就你当前的场景——组件只需要一个string键，显然不适用这个例外。

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