什么是 react 中的父子耦合以及它与上下文的关系

What is parent-child coupling in react and how does it relate to context?

本文关键字：关系 上下文 耦合 react 父子 什么      更新时间：2023-09-26

我正在阅读 React 的上下文>父子耦合文档。我无法从文档中获取什么父子耦合。通常这一行：

通过在菜单组件

中传递相关信息，每个菜单项都可以与包含的菜单组件进行通信。

代码为：

<Menu>
  <MenuItem>aubergine</MenuItem>
  <MenuItem>butternut squash</MenuItem>
  <MenuItem>clementine</MenuItem>
</Menu>

正如文章所提到的，React 中的数据流通常是通过将props从父组件传递到子组件来完成的。但是，在某些情况下，这种prop共享可能会变得乏味，在这些情况下，我们会使用 context .

文档中的示例描述了连续串接颜色prop最终会变得烦恼，但是在大多数情况下，当prop链比两三层深得多时，您会使用context。一个更好的例子可能是 Redux 中的store。

例如，那些使用 Redux 但没有实现 react-redux 的人必须从 context 访问store。现在，假设您有一个嵌套非常深的组件（孙子的孙子），并且它需要访问store - 好吧，您可以：

  1. 通过props传递store。但是，这意味着任何不需要访问store的中间组件都必须将其作为prop，以便将其传递给它下面的某个地方需要它的child。添加批量和样板。
  2. 将store附加到高级组件context。因此，任何在其自身中指定contextTypes的子组件都可以访问context，从而访问store。通过这样做，我们不必担心 注入任何中间组件 不必要的props ，因为我们可以直接访问context 。

请记住，context是选择加入的，因此只有明确指定contextTypes的组件才能访问context，如果在其上方定义了

该组件。

使用props 

Parent (Passes props with a store property)
|
+-> props -> Child
           |
           +-> props -> Grandchild
                        |
                        +-> props -> Great-Grandchild 
                                     |
                                     +-> render() -> this.props.store.getState().message

使用context 

Parent (Defines childContextTypes with store property)
|
+ -> Child
     |
     + -> Grandchild
          |
          + ->  Great-Grandchild (Opts-in by defining contextTypes with a store property)
                |
                +-> render() -> this.context.store.getState().message

更新（参考JMM发布的此问题）：

它指的是什么 API？

我的理解是，这是指父组件在上下文中存储函数的能力，子组件可以访问和调用这些函数，从而创建一个作用域 API。

这是什么意思：each MenuItem can communicate back to the containing Menu component.

根据上述规定，如果在上下文中声明了一个函数，并且MenuItem通过contextTypes选择加入以获取该函数，则MenuItem可以调用它，从而与另一个组件进行通信。

考虑以下示例：

ReactDOM.render(
  <Menu>
    <MenuItem>aubergine</MenuItem>
    <MenuItem>butternut squash</MenuItem>
    <MenuItem>clementine</MenuItem>
  </Menu>, mountNode
);

当 Menu 在库代码中实现并且无权访问 MenuItem 时，或者 MenuItems 与 Menu 中的其他任意组件一起洗牌时，可能会发生这种情况。

Menu 是 MenuItem 的父项，但不是 MenuItem 的所有者，因此，它不能直接在 MenuItems 上设置props。解决这个问题的一种方法是用新的道具克隆每个孩子。但如果嵌套组件种类繁多，有的可以接收冗余道具。

另一种方法是从context中的 Menu 传递数据，并让任意子组件访问它。

相关文章：