React props 钻取

props drilling (props 钻取)

文章首发于个人博客

是什么

props drilling 是数据以 props 的形式从 React 组件树中的一部分传递到另一部分, 只是传递的组件层级过深, 而中间层组件并不需要这些 props, 只是做一个向下转发, 这种情况就叫做 props drilling。

类比一下, 我们买东西的时候, 经历了卖家发货、跨省、市、区一系列的流程最后到我们手上, 中间的这些都只是负责转发, 它们并不关心这个东西是什么, 最终目的就是负责将快递派发到买家手上。

再来举一个详细的例子: 有一个组件App, 它有user属性表示当前登陆的用户, 然后还有一个组件WelcomeMessage 需要拿到这个user进行渲染, 这是一个很常见的需求:用户登陆之后显示一个欢迎 xxx, 那我们来看看他的流程.

1. App 首先把prop传递给Dashboard
2. Dashboard 传递给 DashboardContent(并不需要 props, 只是做一层转发)
3. DashboardContent 传递给 WelcomeMessage(并不需要 props, 只是做一层转发)
4. WelcomeMessage 接收user props 进行渲染(终于到达需要 props 的地方了)

看一下代码: