reactjs - update - react lifecycle diagram

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

Question

He visto que ambos se usan indistintamente.

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

Answer 1

De acuerdo, la gran diferencia es comenzar de dónde provienen, por lo que constructor es el constructor de su clase en JavaScript, por otro lado, getInitialState es parte del lifecycle de lifecycle de React .

constructor es donde tu clase se inicializa ...

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 generará un SyntaxError si la clase contiene más de una aparición 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 obtener getInitialState si usa createReactClass() ...

Establecer el estado inicial

En las clases 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};
  },
  // ...
});

Visita here para más información.

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

Answer 2

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

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

Answer 3

La diferencia entre constructor y getInitialState es la diferencia entre ES6 y ES5 .
getInitialState se usa 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 hilo interesante de reddit con respecto a esto.

La comunidad 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 esto en estos casos. Lea más sobre tales diferencias en esta publicación de blog y el contenido de Facebook sobre enlace automático

constructor también se puede utilizar para manejar tales situaciones. Para vincular métodos a una instancia de componente, se puede prebinding en el constructor . This es un buen material para hacer cosas tan geniales.

Un poco más de buen material sobre mejores prácticas
Mejores prácticas para el estado del componente en React.js
Convertir el proyecto React de ES5 a ES6

Actualización: 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 trasladará al formato de constructor, pero no tendrá que preocuparse por eso. puede usar este formato que sea más legible.

Con ganchos de reacción

Desde la versión React 16.8, hay un nuevo API llamado Hooks.

Ahora, ni siquiera necesita un componente de clase para tener estado. Incluso se puede hacer 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 para useState ; useState([])

Lea más sobre reaccionar ganchos de los documentos oficiales

Answer 4

Los dos enfoques no son intercambiables. Debe inicializar el estado en el constructor cuando use las clases ES6 y definir el método getInitialState 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 */ };
  },
});

Answer 5

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

});