reactjs - will - setstate prevstate react




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

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:

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?


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 .


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 */ };
  },
});

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

});






constructor