为什么我们在 React 中创建类组件时扩展 React.Component？

Question

我是React的新手，我很困惑，日夜不停地思考它，几乎所有的头发都掉了，而且还在掉，这就是为什么我们总是在创建时扩展React.Component类类的组件。

但是在功能组件和其他方法中，我们不会做任何这样的事情来将创建的组件推送到React.Component类。所以主要的问题是什么是React.Component类为什么我们总是使用extends向它添加新组件以及为什么我们不能在不使用extends的情况下在React Native中创建组件 在类组件中或不扩展 React.Component 类。那么，什么是React.Component类里面发生了什么React在引擎盖下，场景是什么？

我将非常感谢能够通过示例和简单方法回答我的问题的人。

Answer 1

React 组件只是函数。

例如，只要不使用 JSX，就可以在不导入

react

的情况下渲染功能性

react

组件。

如果你想使用JSX并在你的

HTML

文件中写你的

js

，那么你需要导入

react

.

如果你想编写一个利用生命周期方法的组件，你需要 extend 默认的

Component

类。

Component

类包含生命周期方法，不应与其他通用

react

组件混淆，例如功能组件或您可能编写的任何组件。这个

Component

指的是

react

维护的具体类实现。

扩展

Component

将使您可以访问

componentDidMount

、

componentDidUpdate

、

componentWillUnmount

和

render

等功能。

Answer 2

如果你扩展 React.Component 类，你可以使用组件的生命周期，它可以用于挂载和卸载。

参考这个https://reactjs.org/docs/react-component.html

Answer 3

通常，您将使用无状态组件作为表示层。您将为行为层（容器组件）使用有状态组件（基于类的组件）。容器组件可以包含许多操作并接受您想要使用的许多挂钩。例如。

render()

、

componentDidMount()

等

您可以阅读由 React 的创建者 Dan Abramov 撰写的博客

您还可以阅读 scotch 博客。

---

但是在你进一步使用 React 之前，我强烈建议你学习 JavaScript 和 ES6+ 特性。有很多资料可以学习。但是从 MDN 开始将是一个很好的开始。

Answer 4

扩展 React.Component 将您的组件“扩展”到 React 库，并允许您的组件使用 React 库中包含的所有函数（如 JavaScript 函数）。换句话说，React.Component 是引用整个 React 库的“组件名称”。

React 库是 Facebook 的乔纳森·沃克 (Jonathan Walke) 于 2011 年最初创建的函数集合，用于简化代码开发过程以满足他们的特定需求。这些函数通常被证明是有用的，因此被更广泛的 JavaScript 社区采用。

在你最初的几节 React 课程之后，你通常会开始创建多个相互“扩展”的类组件。例如，class ChildComponent extends ParentComponent {} 您希望 ChildComponent 能够访问（继承）ParentComponent 的属性。好吧，React.Component 是所有类组件的“父组件”。没有React.Component，就不会有类组件，也不会有React。