在React和React Native中，父组件和子组件是什么意思？

Question

我是一名对于 React & React Native 还不熟悉的新手，并且尽我最大努力去学习它。在学习过程中，我遇到了一个名为props和state的课程，但其中有一个问题让我感到困惑，那就是父组件和子组件。

当我们在React或React Native中创建一个组件时，它是这样创建的：

export default class myApp extends React.Component{
    render(){
        return(
            // Do something ...
        );
    }
}

就是这样。那么，为什么人们会说父组件和子组件等等呢？

React.Component 是父组件还是 myApp 是子组件？父子组件如何通过 props 和 state 进行通信呢？能否有人用简单的话和几个例子来解释一下呢？

谢谢！！！

- user9066923

---

在基于组件的架构中，你将拥有一个高阶组件（HOC），它将调用你的自定义组件，并在内部调用某些通用组件。因此，对于你的自定义组件而言，HOC 是一个父组件，将提供 props。你的组件将维护其状态，并根据提供的 props 和计算出的状态，向这个通用组件传递 props，它就是一个子组件。 - Rajesh

React应用程序是由一组React组件构建的，这些组件可以相互封装。因此，在组件A中的组件B是父组件A的子组件。如果我有错误，请任何人纠正我，因为我自己不使用React。 - Getter Jetter

Answer 1

在React.js和React Native中，您使用组件渲染UI。假设您想构建一个名为House的组件。但是首先，您需要构建一组不同的组件，用作构建块，例如Door、Wall和Window组件。然后，您将在House的render函数中使用这些组件来呈现它。在此示例中，这些构建块组件是子组件，而House组件是它们的父组件。

顺便提一下，这个概念最初来自DOM，尽管那里谈论的是节点（父节点等），而不是组件。

- Carlos C

---

那么，子类和父类的概念只存在于类内部，类外面是没有的，对吗？ - user9066923

这与类的任何概念都无关。这个概念不是与JS或语言语法相关联的。它更多地体现了React的思维方式和行话。我建议你阅读：https://reactjs.org/docs/thinking-in-react.html - Carlos C

好的，现在清楚了，但是最后，假设我们有两个组件 class abc extends React.Component{} 和 **export default class xyz extends React.Component{}**，那么，我们能从 abc 传递一些东西到 xyz 或者从 xyz 传递一些东西到 abc 吗？ - user9066923

组件通过props将值传递给彼此。通常情况下不会从另一个组件扩展。重要的是要理解React支持组合优于继承的原则。 - Carlos C

有没有办法给你1000000分？因为我之前对这个概念非常困惑，而你帮我澄清了我的疑惑。 - user9066923

Answer 2

React.Component 是 myApp 组件类的父类。

'parent' 和 'child' 通常用来表示 React 组件之间的层级关系。myApp 组件是 Foo 组件的父组件，而 Foo 组件则是 myApp 组件的子组件：

export default class myApp extends React.Component{
    state = { foo: true };

    render(){
        return(
            <Foo foo={this.state.foo} />
        );
    }
}

父组件和子组件可以通过 props 实现单向通信。父组件可以通过 props 将一些东西（例如自身状态）传递给子组件。

- Estus Flask

---

好的，我在想假设有这样一个代码：class abc extends React.Component{} 和 export default class xyz extends React.Component{}，我认为abc是xyz的父组件，而xyz是abc组件的子组件。 - user9066923

不，这是关于组件本身而不是它们的类。由于React组件通常除了React.Component/PureComponent几乎不使用继承，因此没有歧义。 - Estus Flask

所以，子类和父类的概念只存在于类内部，类外面没有吗？对吗？ - user9066923

更具体地说，在render函数的组件层次结构内，myApp和Foo可能是功能组件，不继承自React.Component但仍保持相同的关系。 - Estus Flask

Answer 3

如评论所述，

在基于组件的架构中，您将拥有一个高阶组件（HOC），它将调用您的自定义组件，该组件将内部调用某些通用组件。因此，对于您的自定义组件，HOC是一个父组件，它将提供props。您的组件将维护其状态，并根据提供的props和计算后的状态将props传递给此通用组件，即子组件。

---

TL;DR

例子:

需求:

您正在尝试创建一个表单，该表单将接受2个数字并显示它们的总和。

您需要什么:

• 一个表单组件，用于创建2个输入字段。
• 一个输入组件，用于接受值并将其返回给调用者。
• 一个验证器，用于检查输入的值是否为数字。
• 一个标签来显示总数。
• 一个事件来处理输入。

实现:

您从底层开始使用输入组件。您不能使用<input type='text'，因为它没有您的自定义验证器。您不能使用<input type='number'，因为它会添加微调器。因此，您创建一个使用type="text"的自定义组件，并编写自己的验证器

现在对于此组件，其值不能是用户输入的值，因为它可能是NaN。因此，您需要一个变量来存储处理后的值。您还需要此值只创建一次而不是每次都创建以保持其值。这个地方被称为状态。

现在您已经有了一个输入组件，需要将其拼接在一起。因此，您创建了一个带有自定义组件的表单，并使用处理程序/函数进行通信。传递给组件的这些函数称为props。

因此，总结一下，状态是您作为组件所持有的内容，而来自外部环境（例如某个组件）的属性则是您获得的内容。

现在，在这个组件树中，谁被称为父/子组件？它总是基于上下文而引用。因此，在上面的示例中，对于CustomInput组件，由于FormComponent正在调用它，那么它就是其父级。同样，任何它正在调用的组件都将成为其子组件。

- Rajesh

Answer 4

父子组件不仅适用于React/React Native，而是所有标记语言的直觉。

我假设您熟悉HTML标签。

<div class='parent'>
    <div class='child'></div
</div>

从上面的脚本中，div.parent是div.child的父标签，反之亦然。

同样地，在React中。

export default class myApp extends React.Component{ 
    state = { foo: true }; 
    render(){ 
        return( 
            <Foo foo={this.state.foo} /> 
        );
    }
}

Foo是myApp的子级，而myApp是Foo的父级。

这种直觉在任何标记语言中都是相同的。

- Toye Brainz

---

哦我的天，这就是问题所在。我之前一直很困惑，因为我来自HTML的世界。这个例子真是太棒了，谢谢你无数次，祝福你。 - user9066923

非常感谢 @Daddy Boy(有趣的名字，我必须承认) 的点赞。作为一个相对来说比较新的成员，这实际上是我在这个社区里的第一个赞。我总是尽可能简单地解释事情。再次感谢。干杯 - Toye Brainz