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可以利用它来允许用户表达对其类形状的意图
允许一般用户将其用于与可能复杂的初始化逻辑分开的属性的人类可读文档
可能允许虚拟机预先优化从类创建的对象，并在其上添加一些提示。

注意：使用ES7定义状态时，您使用的是Property initializers功能

参考文献：Class field declarations for JavaScript

反应构造函数ES6与ES7

1 个答案: