reactjs - React构造器ES6与ES7

我在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版本更好。

谢谢

最佳答案

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

对期望的声明式解释很有用。一些示例包括编辑器，以便他们可以将此信息用于typeaheads / inferences，TypeScript / Flow可以利用此信息允许其用户表达有关其类的形状的意图

允许一般用户仅将其用于易于阅读的文档中，以了解与可能复杂的初始化逻辑

分开的属性

可能允许VM抢先优化从类创建的对象，并在其中添加一些提示。

注意:使用ES7定义状态时，将使用Property initializers功能

引用:Class field declarations for JavaScript

关于reactjs - React构造器ES6与ES7，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35662932/

es7

reactjs - React构造器ES6与ES7