Jaka jest różnica pomiędzy używaniem konstruktora a getInitialState w React / React Native?

Różnica pomiędzy constructor i getInitialStatejest różnicą pomiędzy ES6i ES5.
getInitialState jest używany z React.createClass i
constructor jest używany z React.Component.

Stąd pytanie sprowadza się do zalet / wad używania ES6 lub ES5 .

Spójrzmy na różnicę w kodzie

ES5

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

ES6

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

Jest ciekawy wątek dotyczący to.

Społeczność React zbliża się do ES6 . Jest również uważana za najlepszą praktykę.

Istnieją pewne różnice między React.createClass i React.Component. Na przykład, jak this jest obsługiwane w tych przypadkach. Więcej o takich różnicach przeczytasz na tym blogu i na Facebook ' u na autobinding

constructor może być również używany do radzenia sobie z takimi sytuacjami. Aby powiązać metody z instancją komponentu, może być ona wstępnie zdefiniowana w constructor. ten {[39] } jest dobrym materiałem do robienia tak fajnych rzeczy.

Kilka dobrych materiałów na temat najlepszych praktyk
najlepsze praktyki dotyczące stanu komponentów w Reaccie.js
Konwersja projektu Reactowego z ES5 na ES6

Ok, duża różnica polega na tym, że start z miejsca, z którego pochodzą, więc constructor jest konstruktorem Twojej klasy w JavaScript, z drugiej strony getInitialState jest częścią lifecycle z React.

constructor to miejsce, w którym twoja klasa zostaje zainicjowana...

Konstruktor

Metoda konstruktora jest specjalną metodą tworzenia i inicjalizacja obiektu utworzonego za pomocą klasy. Może być tylko jeden specjalna metoda o nazwie "konstruktor" w klasie. A SyntaxError zostanie wyrzucona, jeśli klasa zawiera więcej niż jedno wystąpienie metoda konstruktora.

Konstruktor może użyć super słowa kluczowego, aby wywołać konstruktor zajęcia dla rodziców.

W dokumencie React v16 nie wspomniano o żadnych preferencjach, ale musisz getInitialState, Jeśli używasz createReactClass()...

Ustawienie stanu początkowego

W klasach ES6 można zdefiniować stan początkowy, przypisując to.stan w konstruktor:

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

Z createReactClass (), musisz podać oddzielny metoda getInitialState zwracająca stan początkowy:

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

Odwiedź tutaj aby uzyskać więcej informacji.

Stworzył również poniższy obrazek, aby pokazać kilka cykli życia komponentów Reactowych:

Jeśli piszesz klasę React-Native za pomocą ES6, zostanie zastosowany następujący format. Zawiera metody cyklu życia RN dla klasy wykonującej połączenia sieciowe.

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

});