syntax - 使用哪种 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

第二种方法可能是 future 采用的正确方法，因为 Facebook 表示他们最终将弃用 React.createClass 方法。

来自React v0.13 release notes :

Our eventual goal is for ES6 classes to replace React.createClass completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate React.createClass

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

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

This post "React.createClass versus extends React.Component" by Todd Motto关于两种语法之间的差异有一些很好的信息。值得一读的是，它讨论了 this 关键字在两种语法之间的行为有何不同。

编辑:Dan Caragea's post below提出了一些绝对应该考虑的优秀观点。

第三种选择...

还有第三种定义 React 组件的方法，称为“无状态函数”in the React Documentation通常称为“无状态功能组件”或“功能无状态组件”。这是文档中的示例:

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

将组件定义为函数意味着每次都会有效地重新创建它，因此没有持续的内部状态。这使得组件更容易推理和测试，因为对于给定的一组属性(props)，组件的行为始终是相同的，而不是由于内部状态的值而在运行之间可能有所不同。

当使用单独的状态管理方法(例如 Redux)时，这种方法特别有效，并确保 Redux 的时间旅行将产生一致的结果。功能无状态组件还使撤消/重做等功能的实现变得更加简单。