为何React官方推荐使用组件组合作为Context的替代方案？

你觉得组件组合还是在做props drilling，其实是没get到它和数据透传的本质区别：

• 组件组合传递的是已经组装好的UI/渲染逻辑，不是原始数据。就像文档示例里的userLink，它已经把user和avatarSize这些数据处理成了可直接渲染的组件，深层组件根本不需要关心数据细节，只负责把这个组件渲染出来就行。
• 传统props drilling是为了让深层组件拿到数据，不得不一层一层透传；而组件组合是把数据的处理逻辑上移到上层组件，深层组件完全脱离对数据的依赖，职责更单一。

举个直观的对比：

传统props drilling写法 #

<App user={user} avatarSize={size}>
  <Layout user={user} avatarSize={size}>
    <Navigation user={user} avatarSize={size}>
      <UserAvatar user={user} size={avatarSize} />
    </Navigation>
  </Layout>
</App>

这里每一层组件都得接收并传递user和avatarSize，哪怕它们自己根本用不上这些数据。

组件组合写法 #

// 上层组件提前组装好UI
const userLink = <UserAvatar user={user} size={avatarSize} />;

// 往下传递的是组装好的组件
<App>
  <Layout>
    <Navigation>
      {userLink}
    </Navigation>
  </Layout>
</App>

这时Layout和Navigation完全不需要知道user或avatarSize的存在，只需要渲染传入的内容就行，彻底摆脱了无意义的数据透传。

文档推荐组件组合，是因为它比Context更轻量、更可控：Context是全局共享状态，一旦更新所有消费组件都会重渲染；而组件组合是显式传递，只有接收组件会感知变化，而且上层组件能直接控制最终渲染的UI，避免深层组件过度依赖全局状态。

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