在 React 中通过多个级别传递 props 的最佳方式（Prop drilling）

Question

假设我们在大型 React 应用程序中有以下层次结构。

Child1 是 Child2 的 parent，Child2 是 Child3 的 parent，等等，我们可以有 n 个 children。我们还有一个带有 props1、props2、props3 的 Redux 商店...

现在假设 Child7，它是一个相对较小的组件，需要从 Redux 访问 props2（这是一个 object，让它变得更复杂一点 )

在您看来，管理 Props Drilling 的最佳方法（根据 efficiency/readability 比率）是什么？

<Child2 {...props} />

then inside Child2

<Child3 {...props} />

...etc until <Child7 {...props} />

问题：使用这种方法很明显。

问题：如果 Child3、Child7、Child12 等需要商店的道具怎么办。我不认为将组件连接到商店是个好主意，即使我们有选择器来准确获得所需的东西

(1) 仅将特定 children 连接到商店并根据业务逻辑制作“本地容器”
获取Child1中的所有道具，在Child1级别创建一些Context Provider，然后只在需要它们的children中使用它们。基本上让我们说（在顶层，Child1）

<Props1ContextProvider>
{....}
</Props1ContextProvider>

像useProps1Context()一样把它包在一个漂亮的钩子里并仅在需要那些

的组件中像const { props1 } = useProps1Context()一样使用它

问题：那么，我们在中途使用它然后切换到上下文的 redux 有什么意义？

Answer 1

从商店中选择数据非常有效（假设您确保您的选择器始终 return 在数据未更改的情况下使用相同的引用），我认为没有任何理由向下钻取child 组件可以直接从商店获取的道具（即使它只是向下一级）。方法 #1 和 #3 的性能会更差，因为每次状态更改都需要重新渲染更多组件。

您仍然需要向 children 发送特定道具（如 ID），以便他们知道在商店中的何处寻找，并且您可能仍然希望在需要时使用 Context从 Child7 访问包含 Child2 的 id（你不能从 Redux 中获取它，并且 prop drilling 会很痛苦）。

Best way to pass props through multiple levels in React ( Prop drilling )