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

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



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

746   4  

4 ответов:

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

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

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

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

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});
728  
2015-11-22 20:02:19

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

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

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

ES5

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

ES6

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

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

сообщество React приближается к ES6. И это считается лучшей практикой.

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

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

еще несколько хороших материалов о передовой практике
лучшие практики для состояния компонента в React.js
преобразование проекта React из ES5 в ES6

111  
2016-08-01 19:27:07

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

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

конструктор

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

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

в документе 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};
  },
  // ...
});

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

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

React lifecycle

18  
2018-04-30 01:59:26

Если вы пишете класс 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({

});
3  
2018-03-16 00:26:01

Comments

    Ничего не найдено.
Click here to cancel reply.