在React中解决道具钻取有2种常见的方法：使用ContextAPI/Redux和使用React Composition。
Context 在解决React中道具钻取的缺点：可重用性
例如，你有User 组件深度嵌套，而你想在其他Provider：
App
|-- Homepage
|-- User.Provider
|-- ... WhateverComponents
|---- ProfileComponent => use userData from provider here
如果我们想在其他容器中使用userData 呢？
App
|-- Homepage
| |-- User.Provider
| |-- ... WhateverComponents
| | ...
|
|-- Cart (what if we want to use userData in here?) userData will be empty here!
Context适合于在1个嵌套的Provider下向许多不同的组件传递props：
App
|
|
Homepage
|
|
User.Provider
|
|
_____________
| |
| |
Component1 Component2
| |
| |------------------------|
Component3 | Component5
(use userData) | |
| |
Component4 Component6
(use userData)
有一种方法可以解决道具钻取的问题，那就是Component compose
我们可以用这样的代码重新编写上述结构：
// app.tsx
const App = () => {
const userData = {...}
return (
<Homepage>
<Component1>
<Component3 data={userData} />
</Component1>
<Component2>
<Component4 />
<Component5>
<Component6 data={userData} />
</Component5>
</Component2>
</Homepage>
)
}
userData ，直接从容器中传出，而不需要通过父级组件。这也可以提高性能，因此当userData 改变时，只有使用它的组件会重新渲染。
React Composition的缺点：当你的容器越来越大时，可能会导致大量的深度嵌套组件层。对于这个问题，我们应该考虑把它们分割成更小的组件，并明智地决定每个容器应该需要和持有哪些道具。
