在 React 中使用构造函数与 getInitialState 有什么区别？

React 中的构造函数和 getInitialState 都是用来初始化状态的，但不能互换使用。这两者的区别在于我们在使用 ES6 类时应该在构造函数中初始化状态，而在使用 React.createClass（ES5 语法）时定义 getInitialState 方法。所以constructor和getInitialState的区别就是ES6和ES5本身的区别。

我们将getInitialState与 React.createClass 一起使用，构造函数与 React.Component 一起使用。

句法：

class App extends React.Component {
constructor(props) {
  super(props);
  this.state = { /* initial state */ };
}
}

句法：

var App = React.createClass({
getInitialState() {
  return { /* initial state */ };
},
});

上述两种初始化状态的语法是等价的。

创建反应应用程序：

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

npx create-react-app foldername

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

cd foldername

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

使用构造函数初始化状态：

Javascript

import {React ,Component} from 'react'
class App extends Component{
     
  constructor(props) {
    super(props);
    this.state = {
      username: "kapilchhipa4",
      password: "12345678"
    }
  }
    
  render() {  
    return (
      

      
Username: {this.state.username}
      
Password: {this.state.password}
      
      ) 
  }
}
    
    
export default App

使用 getInitialState 方法初始化状态：

注意：我们需要使用以下命令安装一个库来使用 createReactClass 方法：

npm install create-react-class --save

Javascript

import { React } from 'react'
  
var App = React.createClass({
  
  getInitialState() {
    return { 
      username: 'kapilchhipa4',
      password:'12345678'
    };
  },
  
  render() {
    return (  
      

        
Username: {this.state.username} 
      
    )
  }
});
  
    
    
export default App

输出：