Question

我看过两者都可以互换使用。

两者的主要用例是什么？有优点/缺点吗？这是一个更好的做法吗？

Answer 1

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

See the official React doc on the subject of ES6 classes

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

相当于

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

Answer 2

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 this blogpost和Facebook＆＃39; content on autobinding

constructor也可用于处理此类情况。要将方法绑定到组件实例，可以将其预先绑定在constructor中。 This是做这么酷事的好材料。

关于最佳实践的一些更好的材料
Best Practices for Component State in React.js
Converting React project from ES5 to ES6

更新：2019年4月9日：

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

你可以做到

class TodoApp extends React.Component {

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

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

react hooks image 使用React Hooks

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

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

import React, { useState } from 'react';

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

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

详细了解反应钩from the official docs

Answer 3

好的，最重要的区别是从它们的来源开始，因此constructor是JavaScript中类的构造函数，另一方面，getInitialState是lifecycle的一部分} React。

constructor是您的课程初始化的地方......

构造

构造函数方法是一种用于创建和创建的特殊方法   初始化用类创建的对象。只能有一个   名称为＆＃34;构造函数＆＃34;的特殊方法在课堂上。一个SyntaxError   如果类包含多个a，则抛出   构造方法。

构造函数可以使用super关键字来调用a的构造函数   父母班。

在React v16文档中，他们没有提及任何偏好设置，但如果您使用getInitialState，则需要createReactClass() ...


设置初始状态

在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}; }, // ... });

访问here了解详情。

还创建了下面的图片，以显示React Compoenents的生命周期：

Answer 4

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

});

Answer 5

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

Answer 6

React 中的构造函数和 getInitialState 都是用来初始化状态的，但是不能互换使用。这两者的区别在于我们在使用 ES6 类时应该在构造函数中初始化 state，而在使用 React.createClass（ES5 语法）时定义 getInitialState 方法。所以constructor和getInitialState的区别就是ES6和ES5本身的区别。

Answer 7

这几天，我们不必调用组件内部的构造函数-我们可以直接调用state={something:""}，否则以前我们首先要使用super()声明构造函数以继承{{1 }}类然后在构造函数中，我们初始化状态。

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

Answer 8

构造函数 构造函数是在从类创建对象期间自动调用的方法。 ...简单地说，构造函数有助于构造事物。在 React 中，构造函数也不例外。可用于将事件处理程序绑定到组件和/或初始化组件的本地状态。Jan 23, 2019

getInitialState 在 ES6 类中，你可以通过在构造函数中赋值 this.state 来定义初始状态：

看看这个例子

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

使用 createReactClass()，您必须提供一个单独的 getInitialState 方法来返回初始状态：

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

8 个答案: