Quelle est la différence entre l'utilisation du constructeur et de getInitialState dans React / React Native?
J'ai vu les deux utilisés de manière interchangeable.
Quels sont les principaux cas d'utilisation pour les deux? Y a-t-il des avantages/inconvénients? Est-ce une meilleure pratique?
Les deux approches ne sont pas interchangeables. Vous devez initialiser l'état dans le constructeur lorsque vous utilisez des classes ES6 et définir la méthode getInitialState lorsque vous utilisez React.createClass.
Voir le document officiel React au sujet des classes ES6 .
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { /* initial state */ };
}
}
est équivalent à
var MyComponent = React.createClass({
getInitialState() {
return { /* initial state */ };
},
});
La différence entre constructor et getInitialState est la différence entre ES6 et ES5 lui-même.getInitialState est utilisé avec React.createClass etconstructor est utilisé avec React.Component.
La question se résume donc aux avantages/inconvénients de l’utilisation de ES6 ou de ES5 .
Regardons la différence de code
ES5
var TodoApp = React.createClass({
propTypes: {
title: PropTypes.string.isRequired
},
getInitialState () {
return {
items: []
};
}
});
ES6
class TodoApp extends React.Component {
constructor () {
super()
this.state = {
items: []
}
}
};
Il y a un intéressant fil rouge à ce sujet.
La communauté React se rapproche de ES6 . En outre, il est considéré comme la meilleure pratique.
Il y a quelques différences entre React.createClass et React.Component. Par exemple, comment this est traité dans ces cas. En savoir plus sur ces différences dans cet article de blog et sur Facebook contenu sur la recherche automatique
constructor peut également être utilisé pour gérer de telles situations. Pour lier des méthodes à une occurrence de composant, celle-ci peut être pré-liée dans le constructor. This est un bon matériau pour faire des choses aussi cool.
Encore du bon matériel sur les meilleures pratiques
Meilleures pratiques pour l'état d'un composant dans React.js
Conversion du projet React de ES5 à ES6
Mise à jour: 9 avril 2019 :
Avec les nouvelles modifications de l'API de classe Javascript, vous n'avez pas besoin de constructeur.
Vous pourriez faire
class TodoApp extends React.Component {
this.state = {items: []}
};
Cela sera toujours transpilé au format constructeur, mais vous n'aurez pas à vous en soucier. vous pouvez utiliser ce format qui est plus lisible.
avec React crochets
Depuis React version 16.8, il y a une nouvelle API appelée hooks.
Maintenant, vous n'avez même pas besoin d'un composant de classe pour avoir l'état. Cela peut même être fait dans un composant fonctionnel.
import React, { useState } from 'react';
function TodoApp () {
const items = useState([]);
Notez que l'état initial est passé en tant qu'argument à useState; useState([]
En savoir plus sur les réactifs des documents officiels
OK, la grande différence est de commencer d'où ils viennent, donc constructor est le constructeur de votre classe en JavaScript, de l'autre côté, getInitialState fait partie du lifecycle de React.
constructor est l'endroit où votre classe est initialisée ...
Constructeur
La méthode constructeur est une méthode spéciale pour créer et initialiser un objet créé avec une classe. Il ne peut exister qu'une seule méthode spéciale portant le nom "constructeur" dans une classe. Une SyntaxError sera renvoyée si la classe contient plusieurs occurrences d'une méthode constructeur.
Un constructeur peut utiliser le mot-clé super pour appeler le constructeur d'une classe parente.
Dans le document React v16, ils ne mentionnent aucune préférence, mais vous devez getInitialState si vous utilisez createReactClass()...
Définition de l'état initial
Dans les classes ES6, vous pouvez définir l'état initial en affectant this.state dans le constructeur:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
// ...
}
Avec createReactClass (), vous devez fournir une méthode getInitialState séparée qui renvoie l'état initial:
var Counter = createReactClass({
getInitialState: function() {
return {count: this.props.initialCount};
},
// ...
});
Visitez ici pour plus d'informations.
Également créé l'image ci-dessous pour montrer quelques cycles de vie de React Compoenents:
Si vous écrivez la classe React-Native avec ES6, le format suivant sera suivi. Il inclut les méthodes de cycle de vie de RN pour la classe effectuant des appels réseau.
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({
});
De nos jours, nous n'avons pas besoin d'appeler le constructeur à l'intérieur du composant - nous pouvons appeler directement state={something:""}, sinon nous devons d'abord déclarer le constructeur avec super() pour hériter de tout de React.Component class. puis à l'intérieur du constructeur nous initialisons notre état.
Si vous utilisez React.createClass, définissez l'état d'initialisation avec la méthode getInitialState.