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 进行通信。请有人用简单的语言和几个例子解释一下，我会很高兴。

谢谢！！！

Answer 1

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

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

Answer 2

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

虽然 'parent' 和 'child' 单独指的是 React 组件层次结构。 myApp component 是 Foo component 的父级，Foo component 是 myApp component 的子级：

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

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

父子组件可以通过 props 进行单向通信。父母可以通过道具将某些东西（例如自己的状态）传递给孩子。

Answer 3

如评论，

在基于组件的架构中，您将拥有一个 HOC，它将调用您的自定义组件，并在内部调用一些通用组件。因此，对于您的自定义组件，HOC 是一个提供道具的父组件。您的组件将保持其状态，并根据提供的 props 和计算状态，将 props 传递给这个通用组件，它是一个子组件。

---

TL;DR

示例：

要求：

您正在尝试创建一个接受 2 个数字并显示其总数的表单。

您需要什么：

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

实施：

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

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

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

所以，总而言之，state 是你作为一个组件将持有的东西，prop 是你从外部环境中获得的东西（比如说一些组件）。

现在，在这个组件树中，你称谁为父/子组件？它总是基于上下文被引用。所以在上面的例子中，w.r.t CustomInput 组件，因为FormComponent 正在调用它，所以它是它的父组件。同样，它调用的任何组件都将是它的子组件。

Answer 4

父/子组件不仅是 react/react native 的直觉，而且是所有标记的直觉。

我假设你熟悉 html 标签。

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

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

类似的反应

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

Foo 是 myApp 的子项，myApp 是 Foo 的父项。

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