¿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?
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 */ };
},
});
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
yconstructor
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
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:
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({
});
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