React支持了ES6 Classes，听听他们怎么说

React是Facebook开源的构建反应式用户界面的JavaScript库，Facebook用它构建了Instagram app以及Facebook自身的一部分功能。

\\

在React v0.13的声明中，Facebook的开发者Ben Alpert介绍了ES6 classes的新特性，这些特性可以协助开发者编写更有弹性的组件，与此同时，他们也打算用这些新特性代替React.createClass。

\\

Sebastian Markbåge在React v0.13.0 Beta 1的声明中提供了更多有关ES6的信息。

\\

Markbåge 说：

\\

\

JavaScript原本没有内建的类系统，包括我们在内的每一个流行的框架都构建了自己的类系统。这意味着你需要对每一个框架语法上细微差异都要了如指掌。

\\

我们认为我们的职责并不是设计一个类系统，我们只想使用符合JavaScript标准的方式去创造类。

\\

使用React 0.13.0意味着你不再需要使用React.createClass来创建React组件，如果你有一个转译器，那么你现在就可以上手ES6 classes，你可以使用我们在react-tools里提供的转译器，不过你需要启用使用harmony的选项：jsx --harmony。

\\

\class HelloMessage extends React.Component {\  render() {\    return \u0026lt;div\u0026gt;Hello {this.props.name}\u0026lt;/div\u0026gt;;\  }\}\\React.render(\u0026lt;HelloMessage name=\"Sebastian\" /\u0026gt;, mountNode);\\

\\

虽然getInitialState还不尽如人意，但其它大多数的API应该可以满足你的期望，我们认为，只使用简单的实例属性是标明一个类的特定状态的惯用手法。同样的，getDefaultProps和getDefaultProps也只是构造器的属性而已。

\\

\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 (\        \u0026lt;div onClick={this.tick.bind(this)}\u0026gt;\        Clicks: {this.state.count} \    );\  }\}\Counter.propTypes = { initialCount: React.PropTypes.number };\Counter.defaultProps = { initialCount: 0 };\        

\

\\

React v0.13的其它部分也有翻天覆地的变化，包括React Core、React Tools和JSX。

\\

React Core中的新特性有：新的顶级API、React.findDOMNode(component)和React.cloneElement(el, props)。值得注意的是现在用React.findDOMNode(component)代替了component.getDOMNode()，在未来会启用更多的模式。根据声明的介绍，React.cloneElement被用以拷贝React的元素（elements），这与React.addons.cloneWithProps相似，但是它保持key和ref不变，并且不会自动合并style和className。

\\

对于React Tools来说，在jsx命令行中新加入了--target选项，可以允许用户指定React所使用的ECMAScript的版本。

\\

React 0.13给JSX带来了突破性的改变，以前在一个元素内使用\u0026gt;或者}会被识别为一个字符串，由于JSX变更了解析的方式，现在会将其视为语法错误。Alpert指出：“npm中有一个名为jsx_orphaned_brackets_transformer的包，你可以用它来寻找、修复JSX代码中潜在的问题”。

\\

React 0.13现在可以下载了。

\\

查看英文原文：React Introduces Support for ES6 Classes

\\

---

感谢夏雪对本文的审校。

\

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至[email protected]。也欢迎大家通过新浪微博（@InfoQ，@丁晓昀），微信（InfoQ）关注我们，并与我们的编辑和其他读者朋友交流。