React 中的 super() 和 super(props) 有什么区别？

在深入了解主要区别之前，让我们了解Super()和Props是什么，如下所示：

• Super()：用于调用其父类的构造函数。当我们需要访问其父类的一些变量时，这是必需的。
• Props：这是一个特殊的关键字，用于 react 代表属性。用于将数据从一个组件传递到另一个组件。 props 数据是只读的，这意味着来自父组件的数据不应该被子组件更改。

关键字“this”： JavaScript this关键字指的是它所属的对象。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

项目结构

Super() 示例：演示Super()函数使用的简单组件。

文件名-App.js：

Javascript

import React from 'react'
  
class MyComponent extends React.Component {
  constructor(props) {
    super()
    console.log(this.props) // Undefined 
    console.log(props)     // Defined Props Will Be Logged 
  }
   
render() {
    return 
Hello {this.props.message}
; // Defined
  }
}
  
export default MyComponent;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

解释：这里当我们没有在 super() 中使用 props 时，当在控制台中执行 c onsole.log(this.props)时，我们将收到一条未定义的消息，因为我们在构造函数中使用了this.props 。但是如果我们只是console.log(props)这将在网页的控制台中给我们一个正确的消息。

Super(props) 示例：演示Super(props)函数使用的简单组件。

文件名-App.js：

Javascript

import React from 'react'
  
class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(this.props) // {name:'Bob' , .....} Props Will Be Logged 
  }
  
  render() {
    return 
Hello {this.props.message}
; // defined
  }
}
  
export default MyComponent;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

解释：如果我们想在构造函数中使用this ，我们需要将它传递给super。如果我们想在构造函数中使用this.props ，我们需要通过 super()函数来传递它。否则，我们不想将 props 传递给 super()，因为我们看到this.Props在 render函数中可用。

Note: Outside Constructor() Both will display same value for 'this.props'