¿Cuál es la diferencia entre usar constructor vs getInitialState en React / React Native?

He visto ambos usados ​​indistintamente.

¿Cuáles son los principales casos de uso para ambos? ¿Existen ventajas / desventajas? ¿Es una mejor práctica?

Los dos enfoques no son intercambiables. Debe inicializar el estado en el constructor cuando use clases de ES6 y definir el getInitialStatemétodo cuando use React.createClass.

Consulte el documento oficial de React sobre el tema de las clases de ES6 .

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

es equivalente a

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

La diferencia entre constructory getInitialStatees la diferencia entre ES6 y ES5 en sí.
getInitialStatese usa con React.createClass y
constructorse usa con React.Component.

Por lo tanto, la pregunta se reduce a las ventajas / desventajas de usar ES6 o ES5 .

Veamos la diferencia en el código.

ES5

var TodoApp = React.createClass({ 
  propTypes: {
    title: PropTypes.string.isRequired
  },
  getInitialState () { 
    return {
      items: []
    }; 
  }
});

ES6

class TodoApp extends React.Component {
  constructor () {
    super()
    this.state = {
      items: []
    }
  }
};

Hay un interesante hilo de Reddit al respecto.

La comunidad de React se está acercando a ES6 . También se considera la mejor práctica.

Hay algunas diferencias entre React.createClassy React.Component. Por ejemplo, cómo thisse maneja en estos casos. Lea más sobre estas diferencias en esta publicación de blog y el contenido de Facebook sobre la vinculación automática.

constructortambién se puede utilizar para manejar tales situaciones. Para vincular métodos a una instancia de componente, se puede vincular previamente en constructor. Este es un buen material para hacer cosas tan interesantes.

Más material bueno sobre las mejores prácticas
Mejores prácticas para el estado del componente en React.js
Conversión del proyecto React de ES5 a ES6

Actualizar: 9 de abril de 2019 :

Con los nuevos cambios en la API de clase Javascript, no necesita un constructor.

Podrías hacerlo

class TodoApp extends React.Component {

    this.state = {items: []}
};

Esto aún se transpilará al formato de constructor, pero no tendrá que preocuparse por ello. puede utilizar este formato que es más legible.

Con React Hooks

Desde React versión 16.8, hay una nueva API llamada hooks.

Ahora, ni siquiera necesita un componente de clase para tener un estado. Incluso se puede realizar en un componente funcional.

import React, { useState } from 'react';

function TodoApp () {
  const items = useState([]);

Tenga en cuenta que el estado inicial se pasa como argumento a useState;useState([])

Leer más sobre react hooks en los documentos oficiales.

OK, la gran diferencia es comenzar desde donde vienen, por constructorlo que el constructor de su clase en JavaScript, por otro lado, getInitialStatees parte lifecyclede React.

constructor es donde se inicializa tu clase ...

Constructor

El método constructor es un método especial para crear e inicializar un objeto creado con una clase. Solo puede haber un método especial con el nombre "constructor" en una clase. Se lanzará un SyntaxError si la clase contiene más de una ocurrencia de un método constructor.

Un constructor puede usar la palabra clave super para llamar al constructor de una clase padre.

En el documento React v16, no mencionaron ninguna preferencia, pero debe hacerlo getInitialStatesi usa createReactClass()...

Configuración del estado inicial

En las clases de ES6, puede definir el estado inicial asignando this.state en el constructor:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  // ...
}

Con createReactClass (), debe proporcionar un método getInitialState separado que devuelva el estado inicial:

var Counter = createReactClass({
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  // ...
});

Visite aquí para obtener más información.

También creó la imagen a continuación para mostrar algunos ciclos de vida de React Compoenents:

Si está escribiendo la clase React-Native con ES6, se seguirá el siguiente formato. Incluye métodos de ciclo de vida de RN para la clase que realiza llamadas de red.

import React, {Component} from 'react';
import {
     AppRegistry, StyleSheet, View, Text, Image
     ToastAndroid
} from 'react-native';
import * as Progress from 'react-native-progress';

export default class RNClass extends Component{
     constructor(props){
          super(props);

          this.state= {
               uri: this.props.uri,
               loading:false
          }
     }

     renderLoadingView(){
          return(
               <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
                    <Progress.Circle size={30} indeterminate={true} />
                    <Text>
                        Loading Data...
                    </Text>
               </View>
          );
     }

     renderLoadedView(){
          return(
               <View>

               </View>
          );
     }

     fetchData(){
          fetch(this.state.uri)
               .then((response) => response.json())
               .then((result)=>{

               })
               .done();

               this.setState({
                         loading:true
               });
               this.renderLoadedView();
     }

     componentDidMount(){
          this.fetchData();
     }

     render(){
          if(!this.state.loading){
               return(
                    this.renderLoadingView()
               );
          }

          else{

               return(
                    this.renderLoadedView()
               );
          }
     }
}

var style = StyleSheet.create({

});

En estos días no tenemos que llamar al constructor dentro del componente; podemos llamar directamente state={something:""}, de lo contrario, primero tenemos que declarar el constructor super()para heredar todo de la React.Componentclase y luego dentro del constructor inicializamos nuestro estado.

Si lo usa React.createClass, defina el estado de inicialización con el getInitialStatemétodo.

La gran diferencia es comenzar desde donde provienen, por lo que constructor es el constructor de tu clase en JavaScript, por otro lado, getInitialState es parte del ciclo de vida de React. El método constructor es un método especial para crear e inicializar un objeto creado con una clase.