Phản ứng constructor ES6 vs ES7

Question

tôi đọc trên trang Phản ứng hướng dẫn mà ES6 sẽ sử dụng chức năng constructor để khởi tạo trạng thái như thế này.

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

Sau đó, tiếp tục, sử dụng cú pháp ES7 để đạt được điều tương tự.

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

Tại sao ES7 tốt hơn phiên bản ES6 hoặc ES5.

Cảm ơn

Answer 1

ES7 là tốt hơn bởi vì nó cho phép các tình huống sau:

• đâu giải thích tường thuật của những kỳ vọng rất hữu ích. Một số ví dụ bao gồm biên tập viên để họ có thể tận dụng thông tin này cho typeaheads/suy luận, nguyên cảo/Lưu lượng có thể tận dụng điều này để cho phép người dùng của họ để bày tỏ ý định về các hình dạng của các tầng lớp của họ
• Cho phép người dùng nói chung sử dụng này chỉ tài liệu hướng dẫn người có thể đọc về các thuộc tính riêng biệt từ khả năng phức tạp logic tạo
• có thể cho phép máy ảo để trước emptively tối ưu hóa đối tượng được tạo từ một lớp học với một số những gợi ý về chúng.

Lưu ý: Khi bạn xác định trạng thái của bạn bằng cách sử dụng ES7, bạn đang sử dụng tính năng Property initializers

Tài liệu tham khảo: cú pháp 1