反应构造函数ES6与ES7

Question

我在React教程页面上读到,ES6将使用构造函数来初始化状态.

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

然后继续,使用ES7语法实现同样的事情.

// Future Version
export class Counter extends React.Component {
  static propTypes = { initialCount: React.PropTypes.number };
  static defaultProps = { initialCount: 0 };
  state = { count: this.props.initialCount };
  tick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}

为什么ES7比ES6版本或ES5版本更好.

谢谢

Answer 1

ES7更好,因为它支持以下方案:

• 对期望的声明性解释是有用的.一些示例包括编辑器,以便他们可以使用此信息进行预先输入/推理,TypeScript/Flow可以利用它来允许用户表达对其类形状的意图
• 允许一般用户将其用于与可能复杂的初始化逻辑分开的关于属性的人类可读文档
• 可能允许VM以先发制人的方式优先优化从类创建的对象.

注意:使用ES7定义状态时,您正在使用Property initializers功能

参考:JavaScript的类字段声明