В чем разница между использованием конструктора vs getInitialState в React / React Native?

Я видел, как оба используются взаимозаменяемо.

каковы основные варианты использования для обоих? Есть ли преимущества / недостатки? Один лучше практики?

4 ответов


эти два подхода не являются взаимозаменяемыми. Вы должны инициализировать состояние в конструкторе при использовании классов ES6 и определить getInitialState способ при использовании React.createClass.

см. официальный документ React по предмету классов ES6.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}

эквивалентно

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

разницу между constructor и getInitialState - это разница между ЕС6 и в ES5.
getInitialState используется React.createClass и
constructor используется React.Component.

следовательно, вопрос сводится к преимуществам / недостаткам использования ЕС6 или в ES5.

давайте посмотрим на разницу в код

в ES5

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

ЕС6

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

есть интересное reddit thread относительно этого.

сообщество React приближается к ЕС6. Также это считается лучшей практикой.

есть некоторые различия между React.createClass и React.Component. Например, как this обрабатывается в этих случаях. Подробнее о таких различиях in это blogpost и facebook содержание на autobinding

constructor также может использоваться для обработки таких ситуаций. Для привязки методов к экземпляру компонента, он может быть prebinded в constructor. этой хороший материал, чтобы сделать такие классные вещи.

еще несколько хороших материалов о передовой практике
рекомендации по состоянию компонента в React.js
преобразование проекта React из ES5 в ЕС6


хорошо, большая разница-начать с того, откуда они приходят, так что constructor - это конструктор вашего класса в JavaScript, с другой стороны, getInitialState является частью lifecycle of React.

constructor - это когда ваш класс инициализируется...

конструктор

метод конструктора является специальным методом для создания и инициализация объекта, созданного с помощью класса. Может быть только одна специальный метод с имя "конструктор" в классе. Синтаксис Ошибка будет выдано, если класс содержит более одного вхождения метод конструктора.

конструктор может использовать ключевое слово super для вызова конструктора родительский класс.

в документе React v16 они не упоминали никаких предпочтений, но вам нужно getInitialState Если вы используете createReactClass()...

установка начального состояния

в ES6 классы, вы можете определить начальное состояние, назначив этот.состояние в конструкторе:

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

С createReactClass () вы должны предоставить отдельный метод getInitialState, возвращающий начальное состояние:

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

посетить здесь для получения дополнительной информации.

также создал картинку ниже, чтобы показать несколько жизненных циклов Compoenents реагировать:

React lifecycle


Если вы пишете класс React-Native с ES6, будет следовать следующий формат. Он включает в себя методы жизненного цикла RN для класса, выполняющего сетевые вызовы.

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

});