What is the difference between using constructor vs getInitialState in React / React Native?

当在React组件中设置初始状态时，构造函数（constructor）和getInitialState是两种不同的方法，它们存在于React组件的不同类型以及不同的React版本中。

首先，getInitialState方法是React早期版本中创建类组件的方法之一。在使用React.createClass方式创建组件时，getInitialState被用于返回组件的初始状态对象。这是一个无需使用this关键字的普通方法，因为React.createClass自动绑定了所有方法到其实例上。下面是一个使用getInitialState的例子：

javascript
const MyComponent = React.createClass({
  getInitialState: function() {
    return {
      count: 0
    };
  },
  render: function() {
    return <div>{this.state.count}</div>;
  }
});

然而，当React引入了ES6类语法后，getInitialState方法就被淘汰了，取而代之的是在类的构造函数（constructor）中初始化状态。在ES6类组件中，你需要显式调用super(props)来继承React.Component的构造函数，并通过this.state来设置初始状态。以下是一个使用构造函数设置初始状态的例子：

javascript
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

总结一下区别：

• getInitialState是React早期版本中React.createClass的方法，而构造函数是ES6类组件中设置初始状态的方式。
• 在构造函数中，你需要调用super(props)并使用this.state直接赋值状态对象，而在getInitialState中则直接返回状态对象，无需用到this。
• React官方推荐使用ES6类组件，因此在新的React代码中，你更可能会见到构造函数而不是getInitialState。

React Native中的组件也遵循这些规则，因为React Native是基于React的，所以在设置初始状态时，它们之间的行为是一致的。在React中，构造函数（constructor）和getInitialState是用来初始化组件状态的两种不同方法，但它们适用于不同的React版本和不同的组件类型。

constructor方法：

在React ES6类组件中，我们使用constructor方法来初始化状态。constructor是在组件的生命周期中非常早期被调用的方法，它是ES6类的一部分，这意味着它不是React特有的，而是JavaScript语言的一部分。在这个方法中，你可以设置组件的初始状态，也可以为事件处理函数绑定this上下文。

jsx
class MyComponent extends React.Component {
  constructor(props) {
    super(props); // 这一步是必须的，它调用了父类（React.Component）的constructor
    this.state = { /* 初始状态 */ };
  }

  render() {
    // ...
  }
}

在这个例子中，this.state是在构造函数内初始化的，这是ES6类组件设置初始状态的推荐方式。

getInitialState方法：

getInitialState是React早期版本中创建组件的方法，它用于React.createClass方式定义的组件中。React.createClass是React提供的一种创建组件的辅助方法，它不是JavaScript语言的一部分。在用React.createClass创建组件时，您会使用getInitialState方法返回组件的初始状态对象。

jsx
var MyComponent = React.createClass({
  getInitialState: function() {
    return { /* 初始状态 */ };
  },

  render: function() {
    // ...
  }
});

从React 16.0版本开始，React.createClass方法已经被废弃，并且getInitialState不再是初始化状态的推荐方式。因此，如果你正在使用较新版本的React，应当使用ES6类和构造函数来定义组件和初始化状态。

总结来说，React ES6类组件中使用constructor方法来初始化状态，而在老式的React.createClass定义的组件中使用getInitialState方法。自从React 16.0版本以后，React.createClass已经被废弃，因此在现代React代码中应当使用constructor方法。React Native也遵循这些规则，因为它使用相同的组件模型。

当在React组件中设置初始状态时，构造函数（constructor）和getInitialState是两种不同的方法，它们存在于React组件的不同类型以及不同的React版本中。

首先，getInitialState方法是React早期版本中创建类组件的方法之一。在使用React.createClass方式创建组件时，getInitialState被用于返回组件的初始状态对象。这是一个无需使用this关键字的普通方法，因为React.createClass自动绑定了所有方法到其实例上。下面是一个使用getInitialState的例子：

javascript
const MyComponent = React.createClass({
  getInitialState: function() {
    return {
      count: 0
    };
  },
  render: function() {
    return <div>{this.state.count}</div>;
  }
});

然而，当React引入了ES6类语法后，getInitialState方法就被淘汰了，取而代之的是在类的构造函数（constructor）中初始化状态。在ES6类组件中，你需要显式调用super(props)来继承React.Component的构造函数，并通过this.state来设置初始状态。以下是一个使用构造函数设置初始状态的例子：

javascript
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

总结一下区别：

• getInitialState是React早期版本中React.createClass的方法，而构造函数是ES6类组件中设置初始状态的方式。
• 在构造函数中，你需要调用super(props)并使用this.state直接赋值状态对象，而在getInitialState中则直接返回状态对象，无需用到this。
• React官方推荐使用ES6类组件，因此在新的React代码中，你更可能会见到构造函数而不是getInitialState。

React Native中的组件也遵循这些规则，因为React Native是基于React的，所以在设置初始状态时，它们之间的行为是一致的。

当在React组件中设置初始状态时，构造函数（constructor）和getInitialState是两种不同的方法，它们存在于React组件的不同类型以及不同的React版本中。

首先，getInitialState方法是React早期版本中创建类组件的方法之一。在使用React.createClass方式创建组件时，getInitialState被用于返回组件的初始状态对象。这是一个无需使用this关键字的普通方法，因为React.createClass自动绑定了所有方法到其实例上。下面是一个使用getInitialState的例子：

javascript
const MyComponent = React.createClass({
  getInitialState: function() {
    return {
      count: 0
    };
  },
  render: function() {
    return <div>{this.state.count}</div>;
  }
});

然而，当React引入了ES6类语法后，getInitialState方法就被淘汰了，取而代之的是在类的构造函数（constructor）中初始化状态。在ES6类组件中，你需要显式调用super(props)来继承React.Component的构造函数，并通过this.state来设置初始状态。以下是一个使用构造函数设置初始状态的例子：

javascript
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

总结一下区别：

• getInitialState是React早期版本中React.createClass的方法，而构造函数是ES6类组件中设置初始状态的方式。
• 在构造函数中，你需要调用super(props)并使用this.state直接赋值状态对象，而在getInitialState中则直接返回状态对象，无需用到this。
• React官方推荐使用ES6类组件，因此在新的React代码中，你更可能会见到构造函数而不是getInitialState。

React Native中的组件也遵循这些规则，因为React Native是基于React的，所以在设置初始状态时，它们之间的行为是一致的。 在React中，构造函数（constructor）和getInitialState是用来初始化组件状态的两种不同方法，但它们适用于不同的React版本和不同的组件类型。

constructor方法：

在React ES6类组件中，我们使用constructor方法来初始化状态。constructor是在组件的生命周期中非常早期被调用的方法，它是ES6类的一部分，这意味着它不是React特有的，而是JavaScript语言的一部分。在这个方法中，你可以设置组件的初始状态，也可以为事件处理函数绑定this上下文。

jsx
class MyComponent extends React.Component {
  constructor(props) {
    super(props); // 这一步是必须的，它调用了父类（React.Component）的constructor
    this.state = { /* 初始状态 */ };
  }

  render() {
    // ...
  }
}

在这个例子中，this.state是在构造函数内初始化的，这是ES6类组件设置初始状态的推荐方式。

getInitialState方法：

getInitialState是React早期版本中创建组件的方法，它用于React.createClass方式定义的组件中。React.createClass是React提供的一种创建组件的辅助方法，它不是JavaScript语言的一部分。在用React.createClass创建组件时，您会使用getInitialState方法返回组件的初始状态对象。

jsx
var MyComponent = React.createClass({
  getInitialState: function() {
    return { /* 初始状态 */ };
  },

  render: function() {
    // ...
  }
});

从React 16.0版本开始，React.createClass方法已经被废弃，并且getInitialState不再是初始化状态的推荐方式。因此，如果你正在使用较新版本的React，应当使用ES6类和构造函数来定义组件和初始化状态。

总结来说，React ES6类组件中使用constructor方法来初始化状态，而在老式的React.createClass定义的组件中使用getInitialState方法。自从React 16.0版本以后，React.createClass已经被废弃，因此在现代React代码中应当使用constructor方法。React Native也遵循这些规则，因为它使用相同的组件模型。