super(props) 有什么用？

大多数开发人员只是编写super(props) ，因为它对代码没有害处，但没有人渴望知道这个东西实际工作的原因以及它的用途。让我们更深入地研究类组件并找出 super(props) 在构造函数中的用法。

这里出现了一个问题，为什么我们需要 super(props)？

所以，这个问题的简单答案是这个东西基本上允许在构造函数中访问 this.props 。其实 super()函数所做的就是，调用父类的构造函数。

语法：使用 super(props) 没有什么复杂的，我们只需要在子类组件的构造方法中调用 super(props)，如下所示：

class Checkbox extends React.Component {
  constructor(props) {
    super(props); 
    this.state = { isOn: true };
  }
  // ...
}

让我们在实际实现的帮助下谈论它。

第 1 步：创建一个 React 应用程序
```
npx create-react-app super_props
```
第 2 步：完成项目文件夹创建（super_props）后，使用以下命令进入其中。
```
cd super_props
```

项目结构：一旦我们在任何代码编辑器（如 Visual Studio Code）中打开项目文件夹，我们的项目结构将如下所示：

现在我们将在src文件夹中创建一个单独的组件Person.js ，它将是一个基于类的组件，它将从其父 React.Component 继承一个 Person 类组件。

注意：确保将其导出并在默认组件App.js中导入。

示例：现在让我们看看 super(props) 的实现，但在这个示例中我们不会使用 super。

Person.js

import React from "react";
  
class Person extends React.Component {
  constructor(props) {
    console.log(this.props);
  }
  render() {
      console.log(this.props);
    return null;
  }
}
  
export default Person;

Person.js

import React from "react";
  
class Person extends React.Component {
  constructor(props) {
      super(props);
    console.log(this.props);
  }
  render() {
      console.log(this.props);
    return null;
  }
}
  
export default Person;

输出：当我们运行上面的代码时，它会在控制台上记录一个错误：

解释：这是因为子类构造器，即这里的 Person 类，在调用 super()函数之前不会识别这个关键字。但是构造函数之外的代码不会受到任何影响。它不会影响 render()函数中 this.props 的渲染或可用性。

示例 2：现在让我们看看在使用this关键字之前，在构造方法中使用 super(props) 会发生什么。

人.js

import React from "react";
  
class Person extends React.Component {
  constructor(props) {
      super(props);
    console.log(this.props);
  }
  render() {
      console.log(this.props);
    return null;
  }
}
  
export default Person;

输出：

解释：现在我们得到一个输出（这里的 props 没有任何东西，这就是为什么它是一个空对象），这意味着 props 正在登录到控制台。当我们调用这个 super(props) 时，我们基本上是在调用 React.Component 的构造函数。所以我们可以说super()是对父类构造函数的引用，即上面例子中的React.Component，它也是Person组件的基类。因此，当我们将 props 传递给 super 时，props 也会分配给this 。

因此，总而言之，如果我们想在构造函数中使用this.props或只是this关键字，我们需要在 super 中传递来自父类（本例中为 React.Component）的 props。