React.js 构造函数() 方法

构造函数是当我们从该类创建对象时自动调用的方法。它可以管理初始初始化任务，例如默认某些对象属性或对传入的参数进行健全性测试。简单地说，构造函数是一种有助于创建对象的方法。

React 中的构造函数没有什么不同。这可以将事件处理程序连接到组件和/或初始化组件的本地状态。在组件被挂载之前，constructor()函数被触发，并且和 React 中的大多数东西一样，它有一些规则，你可以在使用它们时遵循它们。

第 1 步：在使用 this.props 之前调用 super(props)
由于构造函数的性质，无法直接访问this.props对象，这可能会导致错误。此构造函数将引发错误：
```
constructor() {
 console.log(this.props);
}
```
相反，我们将 prop 的值从 constructor() 传递给 super()函数：
```
constructor(props) {
 super(props);
 console.log(this.props);
}
```
当你调用 super()函数时，会调用父类的构造函数，在 React 的情况下是 React.Component。
第 2 步：永远不要在 constructor() 中调用 setState()
组件的构造函数是设置组件初始状态的理想场所。您必须直接设置初始状态，而不是像在类中的其他方法中那样使用 setState()：
```
constructor(props) {
 super(props);

 this.state = {
   name 'kapil',
   age: 22,
 };
}
```
唯一可以像这样直接分配本地状态的地方是构造函数。你应该依赖于我们组件内其他地方的 setState() 。
第 3 步：避免将值从 this.props 分配给 this.state
在构造函数中设置初始组件状态时，应尽量避免从属性中设置值。我们可以做到以下几点：
```
constructor(props) {
 super(props);

 this.state = {
   name: props.name,
 };
}
```
以后将不允许您使用 setState() 更改属性。您可以通过命名 this.props.name 轻松地在代码中直接引用该属性，而不是将属性直接分配给状态。

第 4 步：将事件全部绑定在一个地方

我们可以轻松地在构造函数中绑定您的事件处理程序：

constructor(props) {
 super(props);

 this.state = {
   // Sets that initial state
 };

 // Our event handlers
 this.onClick = this.onClick.bind(this);
 this.onKeyUp = this.onKeyUp.bind(this);
 // Rest Code
}

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序。
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。
```
cd foldername
```

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

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。以下示例涵盖构造函数演示。

App.js

import React, { Component } from 'react';
  
class App extends Component {
  
  constructor(props) {
  
    // Calling super class constructor
    super(props);
      
    // Creating state
    this.state = {
      data: 'My name is User'
    }
      
    // Binding event handler
    this.handleEvent = this.handleEvent.bind(this);
  }
  
  handleEvent() {
    console.log(this.props);
  }
  
  render() {
    return (
      
        
        

 


        
      
    );
  }
}
  
export default App;

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

npm start

输出：