在React/React Native中使用构造函数与getStart alState有什么区别？

这两种方法不可互换。使用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 */ };
},
});

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线程关于这个。

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

React.createClass和React.Component之间存在一些差异。例如，在这些情况下如何处理this。阅读更多关于此类差异在这篇博客和Facebook的自动绑定上的内容

constructor也可以用来处理这种情况。要将方法绑定到组件实例，可以在constructor中预绑定。这个是做这种很酷的事情的好材料。

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

更新：2019年4月9日，：

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

你可以做

class TodoApp extends React.Component {


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

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

使用React Hooks

从React版本16.8开始，有一个新的API称为钩子。

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

import React, { useState } from 'react';


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

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

阅读更多关于反应挂钩从官方文档

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


});

好吧，最大的区别是从它们的来源开始，所以constructor是JavaScript中类的构造函数，另一方面，getInitialState是React的lifecycle的一部分。

constructor是你的类初始化的地方…

构造函数

构造函数方法是一种特殊的方法，用于创建和 初始化使用类创建的对象。只能有一个 在类中具有名称“构造函数”的特殊方法。 将被抛出，如果类包含一个以上的事件 构造方法。

构造函数可以使用超关键字来调用 父类。

在React v16文档中，他们没有提到任何偏好，但如果您使用createReactClass()…

设置初始状态

在ES6类中，您可以通过分配来定义初始状态 构造函数中的this.state：

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

使用createReactClass（），您必须提供一个单独的 返回初始状态的getLaunalState方法：

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

访问这里了解更多信息。

还创建了下面的图片来显示React Compoenents的几个生命周期：

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

如果使用React.createClass，则使用getInitialState方法定义初始化状态。

最大的区别是从它们的来源开始，所以构造函数是JavaScript中类的构造函数，另一方面，getLaunalState是React生命周期的一部分。构造函数方法是一种特殊的方法，用于创建和初始化使用类创建的对象。

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