构造函数和getInitialState之间的区别是ES6和ES5本身的区别。 getInitialState与React一起使用。createClass和 构造函数与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上有一个关于这方面的有趣帖子。

React社区正在向ES6靠拢。它也被认为是最佳实践。

React之间有一些区别。createClass和React.Component。例如，在这些情况下是如何处理的。在这篇博文和facebook关于自动绑定的内容中阅读更多关于这些差异的内容

构造函数也可用于处理此类情况。要将方法绑定到组件实例，可以在构造函数中对其进行预绑定。这是做这么酷的东西的好材料。

还有一些关于最佳实践的好材料 React.js中组件状态的最佳实践 将React项目从ES5转换为ES6

更新日期:2019年4月9日:

随着Javascript类API的新变化，您不需要构造函数了。

你可以这样做

class TodoApp extends React.Component {

    this.state = {items: []}
};

这仍然会被转译为构造函数格式，但您不必担心。您可以使用这种更具可读性的格式。

React挂钩

从React 16.8版本开始，有一个新的API叫做hooks。

现在，您甚至不需要类组件来拥有状态。它甚至可以在功能组件中完成。

import React, { useState } from 'react';

function TodoApp () {
  const items = useState([]);

注意，初始状态作为参数传递给useState;useState ([])

阅读更多关于react钩子的官方文档

构造函数和getInitialState之间的区别是ES6和ES5本身的区别。 getInitialState与React一起使用。createClass和 构造函数与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上有一个关于这方面的有趣帖子。

React社区正在向ES6靠拢。它也被认为是最佳实践。

React之间有一些区别。createClass和React.Component。例如，在这些情况下是如何处理的。在这篇博文和facebook关于自动绑定的内容中阅读更多关于这些差异的内容

构造函数也可用于处理此类情况。要将方法绑定到组件实例，可以在构造函数中对其进行预绑定。这是做这么酷的东西的好材料。

还有一些关于最佳实践的好材料 React.js中组件状态的最佳实践 将React项目从ES5转换为ES6

更新日期:2019年4月9日:

随着Javascript类API的新变化，您不需要构造函数了。

你可以这样做

class TodoApp extends React.Component {

    this.state = {items: []}
};

这仍然会被转译为构造函数格式，但您不必担心。您可以使用这种更具可读性的格式。

React挂钩

从React 16.8版本开始，有一个新的API叫做hooks。

现在，您甚至不需要类组件来拥有状态。它甚至可以在功能组件中完成。

import React, { useState } from 'react';

function TodoApp () {
  const items = useState([]);

注意，初始状态作为参数传递给useState;useState ([])

阅读更多关于react钩子的官方文档

这两种方法是不可互换的。当使用ES6类时，你应该在构造函数中初始化状态，并在使用React.createClass时定义getInitialState方法。

关于ES6类的主题，请参阅官方React文档。

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

等于

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

现在我们不需要在组件内部调用构造函数——我们可以直接调用state={something:""}，否则之前我们必须先用super()声明构造函数来继承React中的所有东西。组件类 然后在构造函数中初始化状态。

如果使用React。createClass然后用getInitialState方法定义初始化状态。

如果您正在使用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({

});

在构造函数中，我们应该总是初始化状态。