Pertanyaan Bereaksi konstruktor ES6 vs ES7


Saya membaca pada halaman React tutorial bahwa ES6 akan menggunakan fungsi konstruktor untuk menginisialisasi keadaan seperti ini.

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 };

Kemudian berlanjut, menggunakan sintaks ES7 untuk mencapai hal yang sama.

// 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>
    );
  }
}

Mengapa ES7 lebih baik dari versi ES6 atau versi ES5.

Terima kasih


32
2018-02-26 22:30


asal


Jawaban:


ES7 lebih baik karena memungkinkan skenario berikut:

  • Di mana interpretasi deklaratif harapan berguna. Beberapa contoh termasuk editor sehingga mereka dapat menggunakan info ini untuk typeaheads / inferensi, TypeScript / Flow dapat memanfaatkan ini untuk memungkinkan pengguna mereka untuk mengekspresikan niat tentang bentuk kelas mereka
  • Mengizinkan pengguna umum untuk menggunakan ini hanya untuk dokumentasi yang dapat dibaca manusia tentang properti yang terpisah dari logika inisialisasi kompleks yang kompleks
  • Memungkinkan VM untuk secara pre-emptively mengoptimalkan objek yang dibuat dari kelas dengan beberapa petunjuk ini.

catatan: Ketika Anda mendefinisikan negara Anda dengan menggunakan ES7, Anda menggunakan Property initializers fitur

Referensi:  1


16
2018-02-26 23:46