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 <div>Hello {this.props.name}</div>;
  }
}
 
React.render(<HelloMessage name="Sebastian" />, 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 (
        <div onClick={this.tick.bind(this)}>
        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 带来了突破性的改变，以前在一个元素内使用 > 或者}会被识别为一个字符串，由于 JSX 变更了解析的方式，现在会将其视为语法错误。Alpert 指出：“npm 中有一个名为 jsx_orphaned_brackets_transformer 的包，你可以用它来寻找、修复 JSX 代码中潜在的问题”。

React 0.13 现在可以下载了。

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

感谢夏雪对本文的审校。

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