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




actualizar getdefaultprops (5)

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

La comunidad React se está acercando a ES6 . También es considerado 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 acerca de estas diferencias en este blogpost y en el contenido de Facebook en el enlace automático

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

Algún material más bueno sobre las mejores prácticas.
Mejores Prácticas para Estado de Componentes en React.js
Convirtiendo el proyecto React de ES5 a ES6

He visto los dos usados ​​indistintamente.

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


De acuerdo, la gran diferencia es comenzar desde donde vienen, por lo que el 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 lanzará un SyntaxError si la clase contiene más de una aparición de un método constructor.

Un constructor puede usar la súper palabra clave para llamar al constructor de una clase padre.

En el documento React v16, no mencionaron ninguna preferencia, pero necesita obtener getInitialState si 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};
  },
  // ...
});

Visita here para 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({

});

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

Consulte el documento oficial 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 */ };
  },
});

El ... (operador de propagación) se utiliza para reaccionar a:

proporcione una forma clara de pasar props de los componentes padre a hijo. Por ejemplo, dado estos apoyos en un componente principal,

this.props = {
  username: "danM",
  email: "[email protected]"
}

Se podrían pasar de la siguiente manera al niño,

<ChildComponent {...this.props} />

que es similar a esto

<ChildComponent username={this.props.username} email={this.props.email} />

Pero mucho más limpio.





reactjs react-native constructor