¿Cuál es la diferencia entre usar constructor y getInitialState en React?

Tanto el constructor como getInitialState en React se usan para inicializar el estado, pero no se pueden usar indistintamente. La diferencia entre estos dos es que debemos inicializar el estado en el constructor cuando usamos clases ES6 y definir el método getInitialState cuando usamos React.createClass (sintaxis ES5). Entonces, la diferencia entre constructor y getInitialState es la diferencia entre ES6 y ES5.

Usamos getInitialState con React.createClass y el constructor se usa con React.Component.

Sintaxis:

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

Sintaxis:

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

Tanto la sintaxis anterior para inicializar el estado es equivalente.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Inicializando el estado usando el constructor:

import {React ,Component} from 'react'
class App extends Component{
     
  constructor(props) {
    super(props);
    this.state = {
      username: "kapilchhipa4",
      password: "12345678"
    }
  }
    
  render() {  
    return (
      <div>
      <h3>Username: {this.state.username}</h3>
      <h3>Password: {this.state.password}</h3>
      </div>
      ) 
  }
}
    
    
export default App

Inicialice el estado usando el método getInitialState:

Nota: Necesitamos instalar una biblioteca para usar el método createReactClass usando el siguiente comando:

npm install create-react-class --save

import { React } from 'react'
  
var App = React.createClass({
  
  getInitialState() {
    return { 
      username: 'kapilchhipa4',
      password:'12345678'
    };
  },
  
  render() {
    return (  
      <div>
        <h3>Username: {this.state.username} </h3>
      </div>
    )
  }
});
  
    
    
export default App

Producción: