使用哪种ReactJS语法; React.createClass还是ES6扩展？

Question

我是ReactJS的初学者.我在各种网站上学习和研究了很多文档和电子书.我意识到ReactJS有两种语法.例:

React.createClass({
  displayName: 'Counter',
  getDefaultProps: function(){
    return {initialCount: 0};
  },
  getInitialState: function() {
    return {count: this.props.initialCount} 
  },
  propTypes: {initialCount: React.PropTypes.number},
  tick() {
    this.setState({count: this.state.count + 1});
  },
  render() {
    return (
      <div onClick={this.tick}>
        Clicks: {this.state.count}
      </div>
    );
  }
});

这个版本是由ES6编写的:

class Counter extends React.Component {
  static propTypes = {initialCount: React.PropTypes.number};
  static defaultProps = {initialCount: 0};

  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }

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

使用ReactJS的更好方法是什么？但是我发现这些库,github上的应用程序用来执行很多ES6.

Answer 1

第二种方法可能是未来采用的正确方法,因为Facebook已经表示他们最终会弃用React.createClass方法.

从React v0.13发行说明:

我们最终的目标是让ES6类完全替换React.createClass,但在我们替换当前的mixin用例并支持该语言的类属性初始化器之前,我们不打算弃用React.createClass

我个人认为第二种方法也使代码更容易阅读,但这显然是一个更主观的原因.

但是,如上所述,重要的是要注意ES6格式不支持Mixins,因此如果您需要mixin,则需要为该组件使用createClass格式.

Todd Motto的这篇文章"React.createClass vs. extends React.Component"提供了两个语法之间差异的一些很好的信息.值得一读的是关于this关键字在两种语法之间的行为方式的讨论.

编辑:Dan Caragea在下面的帖子提出了一些非常好的观点,这些观点也应该被考虑在内.

第三种选择......

还有第三种定义React组件的方法,在React文档中称为"无状态函数" ,通常称为"无状态功能组件"或"功能无状态组件".这是文档中的示例:

function HelloMessage(props) {
  return <div>Hello {props.name}</div>;
}

将组件定义为函数意味着它每次都有效地重新创建,因此没有持续的内部状态.这使得组件更易于推理和测试,因为组件的行为对于给定的一组属性(props)总是相同的,而不是由于内部状态的值而可能从一次运行到另一次运行.

当使用单独的状态管理方法(如Redux)时,此方法尤其有效,并确保Redux的时间旅行将产生一致的结果.功能无状态组件还使诸如撤消/重做之类的功能更加简单.

Answer 2

我React.createClass为我的宠物项目做过工作和ES6课程.我发现后者也更容易阅读,但我常常想念我与前者的简单/安心.使用基于类的方法,请注意,从技术上讲,静态定义的propTypes和defaultProps是ES7,而不是ES6 - 在ES7最终确定之前可能会更改.纯ES6方法是声明propTypes/defaultProps之类的

class Counter extends React.Component {
...
}
Counter.propTypes = {...};
Counter.defaultProps = {...};

您还必须记住绑定onClick in render(或您需要使用的任何其他方法this).几乎可以肯定你会忘记在某些地方.使用createClass时,所有调用都由React自动绑定.另一个ES7提案可以让事情变得更容易,但你仍然需要记住在任何地方写它: <div onClick={::this.tick}>它绑定this到tick.当然,您必须选择使用babel配置中的第0阶段才能使用所有这些ES7提议.

关于mixins ...有一些方法可以将mixins与类一起使用.一个很棒的方法是mixWith.js,但你也可以尝试ES7装饰,HOC,甚至Object.assign():)

在一天结束时,我觉得类方法没有带来任何真正有价值的东西,你可以使用createClass的旧方法,直到你对React有一个很好的理解.然后你可以玩类和ES6/7/100.他们弃用之前还需要很长时间createClass.