¿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? ¿Hay ventajas / desventajas? Es una mejor práctica?

Author: hippietrail, 2015-06-05

4 answers

Los dos enfoques no son intercambiables. Debe inicializar state en el constructor cuando use clases ES6, y definir el método getInitialState cuando use React.createClass.

Ver el documento oficial de React sobre el tema de las clases 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 */ };
  },
});
 728
Author: Alexandre Kirszenberg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-22 18:02:19

La diferencia entre constructor y getInitialState es la diferencia entre ES6 y ES5 sí mismo.
getInitialState se utiliza con React.createClass y
constructor se utiliza 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 con respecto a este.

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

Hay algunas diferencias entre React.createClass y React.Component. Por ejemplo, cómo se maneja this en estos casos. Lea más sobre tales diferencias en este blogpost y el contenido de facebook en autobinding

constructor también se puede utilizar para manejar este tipo de situaciones. Para enlazar métodos a una instancia de componente, se puede pre-enlazar en constructor. Este es un buen material para hacer cosas tan geniales.

Más material 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

 111
Author: sudo bangbang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-01 16:27:07

OK, la gran diferencia es comenzar desde donde vienen, por lo que constructor es el constructor de su clase en JavaScript, por otro lado, getInitialState es parte del lifecycle de React.

constructor es donde tu clase se inicia...

Constructor

El método constructor es un método especial para crear y inicializar un objeto creado con una clase. Sólo puede haber uno método especial con el nombre "constructor" en una clase. Un SyntaxError se producirá 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 de padres.

En el documento React v16, no mencionaron ninguna preferencia, pero necesita getInitialState si usa createReactClass()...

Establecer el Estado Inicial

En las clases ES6, puede definir el estado inicial asignando este.estado en el constructor:

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

Con createReactClass (), tienes que proporcionar una Método getInitialState que devuelve el estado inicial:

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

Visite aquí para más información.

También creó la imagen de abajo para mostrar algunos ciclos de vida de los componentes de React:

Ciclo de vida de React

 18
Author: Alireza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-29 22:59:26

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 a la 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({

});
 3
Author: Анураг Пракаш,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-15 22:26:01