React中初始化state的两种方式

React中初始化state有两种方式：

   在React的组件中初始化state有两种方式，一是使用ES6 class语法，二是使用实验性的public class fields语法。

ES6 class 语法

   当你使用ES6 class语法定义一个组件的时候，通常的做法是在构造函数constructor()中为 this.state赋值来初始化state。

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

   React官方文档指出，使用这种方式需要注意以下几点：

1. 如果要初始化 state 或进行方法绑定，就必须要为 React 组件实现构造函数。
2. 在为React.Component子类实现构造函数时，应在其他语句之前调用 super(props)。否则，this.props在构造函数中可能会出现未定义的 bug。
3. 你必须谨慎对待 JSX 回调函数中的this，在 JavaScript 中，class 的方法默认不会绑定this。如果你忘记绑定 this.handleClick并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。

   如果觉得使用这种方式很麻烦，这里有一种方式可以解决，就是使用实验性的 public class fields 语法。

public class fields语法

   public class fields语法示例代码如下：

class Test extends React.Component {
  state = {
      isToggleOn:true
    };
　　handleClick = () => {
　　　this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
　　
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

   这种方式与ES6 class语法方式相比，代码更加简洁，Create React App是 默认启用此语法的。要注意的是：

• 这种方式没有实现构造函数constructor();
• state是class的实例属性，并不是静态属性，不需要添加static关键字（就像为static propTypes {…}）,其作用域是在Class内部，并不是某一个方法的内部;
• 使用的时候还是要用this.state;

两种方式的比较

   两种方式哪一种更好呢？其实是习惯使用哪种，就使用哪种。
为了比较两种语法在编译的时候有什么区别，这里使用babel的Try it out 来做一下验证。为了输出的代码更具可读性，选择es2016。

ES6 class语法：

public class fields语法:

对比babel编译后的代码可以看出，public class fields语法，其实state也是定义在了constructor中。