2016-02-26 92 views
22

我认为ES6将使用构造函数初始化这样的状态下做出反应教程页面上阅读。阵营构造ES6 VS ES7

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

感谢

+0

这ES7语法是新的我。你可以发布那个网页,你发现它吗?我会感到惊讶,如果Facebook,采取了这么多时间给反应的ES6大修后,将摆脱它为开发人员提供Java或其他一些面向对象语言的感觉的构造。 –

+2

是的,它是here.https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html –

回答

11

ES7是更好,因为它可以实现以下场景:

  • 凡预期说明性解释是有用的。一些例子包括编辑器,使他们可以利用这些信息为typeaheads /推断,打字稿/ Flow可以利用这让他们的用户可以表达他们的班
  • 允许一般用户用这个刚刚的形状意图人类可读的有关属性的文档从潜在的复杂初始化逻辑
  • 分离可能允许VM先发制人优化从一些对他们这些提示的一个类创建的对象。

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

参考文献:1