Syntax 使用哪种语法；React.createClass还是ES6扩展？

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

React.createClass({
displayName:'计数器'，
getDefaultProps:function（）{
返回{initialCount:0}；
},
getInitialState:函数（）{
返回{count:this.props.initialCount}
},
propTypes:{initialCount:React.propTypes.number}，
勾选（）{
this.setState（{count:this.state.count+1}）；
},
render（）{
返回(
单击：{this.state.count}
);
}
});

此版本由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>
    );
  }
}

类计数器扩展React.Component{
静态propTypes={initialCount:React.propTypes.number}；
静态defaultProps={initialCount:0}；
建造师（道具）{
超级（道具）；
this.state={count:props.initialCount}；
}
state={count:this.props.initialCount}；
勾选（）{
this.setState（{count:this.state.count+1}）；
}
render（）{
返回(
单击：{this.state.count}
);
}
}

---

使用ReactJS的更好方法是什么？但是我发现了这些库，github上的应用程序曾经执行过很多ES6。

第二种方法可能是未来应该采用的正确方法，因为Facebook说他们最终会反对React.createClass方法

从：

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

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

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

关于这两个语法之间的差异有一些很好的信息。关于

this

关键字在这两种语法中的不同行为的讨论值得一读

编辑：提出一些非常好的观点，这些观点也应该被考虑

第三种选择。。。 还有第三种定义React组件的方法，称为“无状态函数”，通常称为“无状态功能组件”或“功能无状态组件”。以下是文档中的示例：

函数HelloMessage（道具）{
返回Hello{props.name}；
}

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

---

当使用单独的状态管理方法（如Redux）时，这种方法尤其有效，并确保Redux的时间旅行将产生一致的结果。功能性无状态组件还使实现诸如撤消/重做之类的功能变得更简单。

我已经为work完成了

React.createClass，为我的宠物项目完成了ES6类。我确实觉得后者更容易阅读，但我常常怀念前者的简单/平和。
对于基于类的方法，请注意，从技术上讲，静态定义的propTypes和DefaultProp是ES7，而不是ES6——在ES7最终确定之前，它们可能会发生变化。
纯ES6方法是声明propTypes/defaultProps，如

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

您还必须记住绑定onClick-in-render（或需要使用
this
的任何其他方法）。几乎可以肯定的是，在某些地方，你会忘记。使用createClass时，所有调用都由React自动绑定。
另一个ES7提案可能会让事情变得更简单，但你仍然需要记住在任何地方都要写：
它将
此
绑定到
勾选
。
当然，您必须选择babel配置中的stage 0来利用所有这些ES7建议

关于mixin…在类中使用mixin有一些可以接受的方法。一个很好的方法是使用ES7装饰器、HOC，甚至
Object.assign（）
：）

最后，我觉得类方法没有带来任何真正的价值，在你对React有了很好的理解之前，你可以走createClass的老路。然后你就可以玩弄班级和ES6/7/100了。还有很长一段时间他们才会反对
createClass
我从React ES6+staging风格开始，当你在React中说“一切都是组件”时听起来不错。我喜欢这个
类
组织

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


因为只有方法可以在ES6
class
中定义，如果您想在纯ES6中定义属性，它们必须在类之外。比如在这里：

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，您可以对方法使用隐式绑定提示，如中所示：

或者使用一些技巧来使用属性初始值设定项语法完成相同的操作

class Counter extends React.Component {
  tick = () => {
    ...
  }
  ...
}


总结
对于新手来说，我认为最新的款式是更好的选择


关于混合器
如上所述：

ES6在没有任何mixin支持的情况下发布。因此，当您使用React with ES6类时，不支持mixin。
我们还发现在使用mixin的代码库中存在许多问题，因此不建议在新代码中使用它们。
本节仅供参考

谢谢@tom提供的信息和你的主观原因。以前，我喜欢用JSX语法来编写我的ReactJS项目。但现在，我应该重新考虑决定使用ES6语法编写ReactJS谢谢，我喜欢使用复合方式React.createClass。ES6类只是糖，没有任何真正的价值来反对使用工厂创建（至少对我来说）。也许装饰师会
return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
);

class Counter extends React.Component {
  constructor() {
    super();
    this.tick = this.tick.bind(this);
  }
  tick() {
    ...
  }
  ...
}

class Counter extends React.Component {
  tick = () => {
    ...
  }
  ...
}