React构造函数ES6与ES7?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (8)

我在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更好,因为它支持以下情况:

  • 对期望的陈述性解释是有用的。一些示例包括编辑器,以便他们可以使用此类信息进行typeahead / inference,TypeScript / Flow可以利用它来允许用户表达关于其类的形状的意图
  • 允许一般用户使用这个只是人类可读的文档关于独立于潜在复杂的初始化逻辑的属性
  • 可能允许虚拟机先用性地优化从课程创建的对象,并在其中提供一些提示。

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

扫码关注云+社区