Question Quelle est la différence entre l'utilisation de constructor vs 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 que c'est une meilleure pratique?


445
2018-06-05 13:53


origine


Réponses:


Les deux approches ne sont pas interchangeables. Vous devez initialiser l'état dans le constructeur lors de l'utilisation de classes ES6 et définir le getInitialState méthode lors de l'utilisation React.createClass.

Voir le doc officiel de 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 */ };
  },
});

699
2018-06-05 14:06



La différence entre constructor et getInitialState est la difference entre ES6 et ES5 lui-même.
getInitialState est utilisé avec React.createClass  et
constructor est utilisé avec React.Component.

D'où la question se résume à des avantages / inconvénients de l'utilisation ES6 ou ES5.

Regardons la différence dans le 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 de reddit à 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 géré dans ces cas. En savoir plus sur ces différences dans ce blog et facebook contenu sur l'autobinding

constructor peut également être utilisé pour gérer de telles situations. Pour lier des méthodes à une instance de composant, il peut être pré-lié dans le constructor. Ce est un bon matériel pour faire des choses aussi cool.

Encore du bon matériel sur les meilleures pratiques
Meilleures pratiques pour l'état des composants dans React.js
Conversion du projet React d'ES5 en ES6


103
2018-03-19 22:05



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 de la 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 y en avoir qu'un   méthode spéciale avec le nom "constructeur" dans une classe. Une erreur de syntaxe   sera jeté si la classe contient plus d'une occurrence d'un   méthode constructeur.

Un constructeur peut utiliser le super mot-clé pour appeler le constructeur d'un   classe parent.

Dans le document React v16, ils n'ont mentionné 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 un   Méthode getInitialState qui renvoie l'état initial:

var Counter = createReactClass({
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  // ...
});

Visite ici pour plus d'informations.

A également créé l'image ci-dessous pour montrer quelques cycles de vie de React Compoenents:

React lifecycle


15
2017-10-03 13:56



Si vous écrivez la classe React-Native avec ES6, le format suivant sera suivi. Il inclut des méthodes de cycle de vie de RN pour les appels réseau de classe.

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

});

3
2018-03-10 07:25