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

Ich habe gesehen, beide Synonym verwendet.

Was sind die wichtigsten Anwendungsfälle für beide? Gibt es Vorteile /Nachteile? Ist eine bessere Praxis?

InformationsquelleAutor der Frage Nader Dabit | 2015-06-05

690

Sich die beiden Ansätze sind nicht austauschbar. Sollten Sie initialisieren Staat im Konstruktor bei der Verwendung von ES6-Klassen, und definieren Sie die getInitialState - Methode bei der Verwendung von React.createClass.

Finden Sie auf der offiziellen Reagieren doc auf das Thema ES6-Klassen.
```
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}
```
entspricht
```
var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});
```
InformationsquelleAutor der Antwort Alexandre Kirszenberg
101

Den Unterschied zwischen constructor und getInitialState ist der Unterschied zwischen ES6 und ES5 selbst.

getInitialState mit React.createClass und

constructor mit React.Component.

Daher die Frage läuft darauf hinaus, Vorteile/Nachteile der Verwendung von ES6 oder ES5.

Schauen wir uns den Unterschied in der 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: []
    }
  }
});
```
Es ist eine interessante reddit-thread in Bezug auf diese.

Reagieren Gemeinschaft rückt näher an ES6. Auch es wird als die beste Praxis.

Gibt es einige Unterschiede zwischen React.createClass und React.Component. Zum Beispiel, wie this behandelt wird in diesen Fällen nicht. Lesen Sie mehr über diese Unterschiede in diesem Blogbeitrag und facebook ist Inhalte auf autobinding

constructor können auch verwendet werden, um mit solchen Situationen fertig zu werden. Zum binden von Methoden, um eine Komponenten-Instanz, kann es sein, prebinded in der constructor. Diese ist ein gutes material für solche Sachen.

Einige mehr gutes material über best practices

Best Practices für die Komponente State in React.js

Konvertieren Reagieren-Projekt von ES5, ES6

InformationsquelleAutor der Antwort sudo bangbang
15

OK, der große Unterschied ist, beginnen, wo Sie herkommt, so constructor ist der Konstruktor der Klasse in JavaScript, auf der anderen Seite getInitialState ist Teil der lifecycle von React.

constructor ist, wo Ihre Klasse sich initialisiert...

Konstruktor

Der Konstruktor ist eine spezielle Methode zum erstellen und
initialisieren ein Objekt erstellt, mit der a-Klasse. Es kann nur einen geben
spezielle Methode mit dem Namen "Konstruktor" in der a-Klasse. Ein SyntaxError
wird geworfen, wenn die Klasse enthält mehr als ein vorkommen eines
Konstruktor-Methode.

Kann ein Konstruktor mit dem Schlüsselwort super, um den Konstruktor aufrufen einer
übergeordneten Klasse.

In der Reagieren v16-Dokument, die Sie gar nicht erwähnt, eine Vorliebe, aber Sie brauchen, um getInitialState wenn Sie mit createReactClass()...

Einstellung der Ursprüngliche Zustand

In ES6-Klassen, die Sie definieren können, den ursprünglichen Zustand durch die Zuweisung
diese.Staat im Konstruktor:
```
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  //...
}
```
Mit createReactClass(), Sie haben einen separaten
getInitialState Methode liefert den Anfangszustand:
```
var Counter = createReactClass({
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  //...
});
```
Besuchen hier für weitere Informationen.

Schuf auch das Bild unten, um die show wenigen Lebenszyklen zu Reagieren Compoenents:

InformationsquelleAutor der Antwort Alireza

Wenn Sie sich schriftlich Reagieren-Native-Klasse mit ES6, Folgendes format wird verfolgt werden. Es umfasst life-cycle-Methoden der RN für die Klasse machen Netzwerkaufrufe.

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

});

InformationsquelleAutor der Antwort Анураг Пракаш

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.