Was ist der Unterschied zwischen der Verwendung von Konstruktor und getInitialState in React / React Native?

Der Unterschied zwischen constructor und getInitialState ist der Unterschied zwischen ES6 und ES5 selbst.
getInitialState wird mit React.createClass und verwendet
constructor wird mit React.Component verwendet.

Daher läuft die Frage auf die Vor- und Nachteile der Verwendung von ES6 oder ES5 hinaus. .

Schauen wir uns den Unterschied im Code an

ES5

var TodoApp = React.createClass({ 
  propTypes: {
    title: PropTypes.string.isRequired
  },
  getInitialState () { 
    return {
      items: []
    }; 
  }
});

ES6

class TodoApp extends React.Component {
  constructor () {
    super()
    this.state = {
      items: []
    }
  }
};

Es gibt ein interessantes reddit thread diesbezüglich.

Die Reaktionsgemeinschaft rückt näher an ES6 heran. Auch wird es als die beste Praxis angesehen.

Es gibt einige Unterschiede zwischen React.createClass und React.Component. Zum Beispiel, wie this in diesen Fällen behandelt wird. Lesen Sie mehr über solche Unterschiede in diesem Blogpost und Facebook Inhalt auf Autobinding

constructor kann auch verwendet werden, um mit solchen Situationen umzugehen. Um Methoden an eine Komponenteninstanz zu binden, kann diese in constructor vorgebunden werden. This ist ein gutes Material, um solche coolen Sachen zu machen.

Weiteres gutes Material zu Best Practices
Best Practices für den Komponentenzustand in React.js
React Projekt von ES5 nach ES6 konvertieren

Update: 9. April 2019 :

Mit den neuen Änderungen in der JavaScript-Klassen-API benötigen Sie keinen Konstruktor.

Du könntest es tun

class TodoApp extends React.Component {

    this.state = {items: []}
};

Dies wird immer noch in das Konstruktorformat transpiliert, aber Sie müssen sich nicht darum kümmern. Sie können dieses Format verwenden, das besser lesbar ist.

  Mit React Haken

Ab React Version 16.8 gibt es eine neue API namens Hooks.

Jetzt brauchen Sie nicht einmal eine Klassenkomponente, um state zu haben. Dies kann sogar in einer Funktionskomponente erfolgen.

import React, { useState } from 'react';

function TodoApp () {
  const items = useState([]);

Beachten Sie, dass der Anfangszustand als Argument an useState übergeben wird. useState([]

Lesen Sie mehr über Reaction Hooks aus den offiziellen Dokumenten

OK, der große Unterschied besteht darin, woher sie kommen. constructor ist der Konstruktor Ihrer Klasse in JavaScript. Auf der anderen Seite ist getInitialState Teil von lifecycle von React.

In constructor wird Ihre Klasse initialisiert ...

Konstruktor

Die Konstruktormethode ist eine spezielle Methode zum Erstellen und Initialisieren eines mit einer Klasse erstellten Objekts. In einer Klasse kann es nur eine spezielle Methode mit dem Namen "Konstruktor" geben. Ein SyntaxError wird ausgelöst, wenn die Klasse mehr als ein Vorkommen einer Konstruktormethode enthält.

Ein Konstruktor kann das Schlüsselwort super verwenden, um den Konstruktor einer übergeordneten Klasse aufzurufen.

Im Dokument React v16 wurde keine Präferenz angegeben, aber Sie müssen getInitialState angeben, wenn Sie createReactClass()... verwenden.

Einstellen des Ausgangszustands

In ES6-Klassen können Sie den Anfangszustand definieren, indem Sie this.state im Konstruktor zuweisen:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  // ...
}

Mit createReactClass () müssen Sie eine separate getInitialState-Methode bereitstellen, die den Anfangszustand zurückgibt:

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

Besuchen Sie hier für weitere Informationen.

Außerdem wurde das folgende Bild erstellt, um einige Lebenszyklen von React Komponenten anzuzeigen:

Wenn Sie eine React-Native-Klasse mit ES6 schreiben, wird das folgende Format verwendet. Es enthält Lebenszyklusmethoden von RN für die Klasse, die Netzwerkaufrufe durchführt.

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

});

Heutzutage müssen wir den Konstruktor in der Komponente nicht mehr aufrufen - wir können state={something:""} direkt aufrufen, ansonsten müssen wir vorher den Konstruktor mit super() deklarieren, um alles von der Klasse React.Component zu erben dann initialisieren wir innerhalb des Konstruktors unseren Zustand.

Wenn Sie React.createClass verwenden, definieren Sie den Initialisierungsstatus mit der Methode getInitialState.