[Reactjs] 在React / React Native中使用構造函數和getInitialState有什麼區別?


Answers

constructorgetInitialState的區別在於ES6ES5本身的區別。
getInitialStateReact.createClass
constructorReact.Component一起React.Component

因此,這個問題歸結為使用ES6ES5的優點/缺點。

我們來看看代碼中的差異

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線程

React社區正在向ES6靠攏。 它也被認為是最好的做法。

React.createClassReact.Component有一些區別。 例如,在這些情況下如何處理這個問題。 閱讀更多關於此博客 帖子和Facebook上關於自動綁定內容的差異

constructor也可以用來處理這種情況。 要將方法綁定到組件實例,可以將其綁定到constructorThis是做這種很酷的東西的好材料。

關於最佳實踐的一些更好的材料
React.js中組件狀態的最佳實踐
將React項目從ES5轉換為ES6

Question

我已經看到兩者可以互換使用。

兩者的主要用例是什麼? 有沒有優點/缺點? 是一個更好的做法嗎?




如果您正在使用ES6編寫React-Native類,則將遵循以下格式。 它包括網絡呼叫類的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({

});