在React / React Native中使用构造函数和getInitialState有什么区别？
我已经看到两个交替使用。
两者的主要用例是什么？ 有没有优点/缺点？ 是一个更好的做法？
这两种方法是不可互换的。 在使用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一起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的内容在自动绑定的差异
constructor也可以用来处理这种情况。 要将方法绑定到组件实例，可以将其绑定到constructor 。 这是做这种很酷的东西的好材料。
一些更好的最佳实践材料
React.js中组件状态的最佳实践
将React项目从ES5转换为ES6
好的，最大的不同在于它们来自哪里，所以constructor是JavaScript中类的构造函数，另一方面， getInitialState是React lifecycle的一部分。
constructor是你的类初始化的地方…
构造函数
构造函数方法是创build和初始化用类创build的对象的特殊方法。 在类中只能有一个名称为“构造函数”的特殊方法。 如果类包含多个构造函数方法，则会引发SyntaxError。
构造函数可以使用super关键字来调用父类的构造函数。
在React v16文档中，他们没有提到任何首选项，但是如果使用createReactClass()则需要getInitialState …
设置初始状态
在ES6类中，可以通过在构造函数中分配this.state来定义初始状态：
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}; }, // ... });
访问这里获取更多信息。
还创build了下面的图片来显示React Compoenents的几个生命周期：
如果您正在使用ES6编写React-Native类，则将遵循以下格式。 它包括networking呼叫类的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({ });
