title: "React v0.13"

author: Ben Alpert

今天，我们很高兴发布了 React v0.13！

该版本最重要的特性就是 支持 ES6 类，让开发者开发组件的时候更加灵活。我们最终的目标是用 ES6 类完全取代 React.createClass，但是在语言中有当前的混入（ mixin ）和类属性初始化器的替代解决方案之前，我们不打算反对使用 React.createClass。

在上周的 EmberConf 和 ng-conf 上，很振奋地看到 Ember 和 Angular 已经着手优化运行速度，现在两者的表现都可以与 React 媲美。我们一直认为性能表现并不是选择 React 的最重要原因，但是我们仍然计划做更多优化来使 React 更加快速。

我们计划的优化方案需要 ReactElement 是不可变的，这也是一个写标准 React 代码的最佳实践。在这个版本中，我们增加了运行时警告，这些警告在元素被渲染创建中 props 被改变或者添加的时候触发。在移植代码的时候，可能想使用新的 React.cloneElement API（该方法和 React.addons.cloneWithProps 类似，除了维护 key 和 ref，并且不自动合并 style 和 className 之外）。更多关于我们计划的优化，参见 Gitub issues #3226, #3227, #3228。

该版本现在可以下载了：

我们也在 npm 上发布了 0.13.0 的 React 和 react-tools 包，在 bower 上发布了 React 包。

更新日志

React 核心代码

破坏性的改变（ Breaking Changes ）

  • 在 0.12 中不建议使用的东西已经无法正常工作了：最重要的是，调用组件类的时候不使用 JSX 也不使用 React.createElement，而是在 JSX 中使用非组件函数或者 createElement
  • 不建议在元素创建之后改变 props，并且在开发模式下会出现警告；React 的未来版本将会认为 props 是不可变的，从而提高性能
  • 静态方法（在 statics 中定义的方法）不再自动绑定到组件类
  • ref 绑定顺序做了一些微调，比如指向某个组件的 ref 在它的 componentDidMount 方法调用之后就马上可以使用了；这个改变仅在某个子组件的 compoenentDirMount 内调用父组件的回调函数，这是一种反模式（anti-pattern），应该尽量规避。
  • 现在，在生命周期方法中调用 setState 总是会被批量处理（译者注：也就是说在某个生命周期函数中调用了多次 setState，这些 setState 的产生的改变会集中在一起处理，比如计算最小的 DOM 改变等），因此该方法是异步的。在组件第一次挂载并且该函数第一次被调用的时候，该函数是同步的。
  • 现在，在未挂载的组件上调用 setState 和 forceUpdate 将会出现警告信息，而不再是抛出异常。这就在使用 Promises 的时候避免了可能的竞争条件（That avoids a possible race condition with Promises）。
  • 已经不能访问大多数内置的属性了，包括 this._pendingState 和 this._rootNodeID。

新特性

  • 支持使用 ES6 类来创建 React 组件；详细内容参考 v0.13.0 beta 1 notes。
  • 添加新的顶层 API React.findDOMNode(compoment)，这应该用于代替 component.getDOMNode()。基于 ES6 组件的基类将不会有 getDOMNode 方法。这一改变将会使更多的机制（patterns）进化变为可能。
  • 添加了新的顶层 API React.cloneElement(el, props) 来制作 React 元素副本 - 详细内容参考 v0.13 RC2 notes。
  • 新的 ref 风格，允许使用回调函数而不仅仅是一个名字字符串：<Photo ref={(c) => this._photo = c} /> 允许用 this._photo 指向组件（而不是通过 ref="photo" 绑定在 this.refs.photo）。
  • this.setState() 现在能够用一个函数作为第一个参数，用于转换 state 更新（for transactional state updates），比如，this.setState((state, props) => ({count: state.count + 1})); - 这意味着再也不需要使用 this._pendingState 了，并且该属性现在也被删除了。
  • 支持迭代器和 immutable-js（Support for iterators and immutable-js sequences as children）。

不建议使用的

  • ComponentClass.type 不建议使用。使用 ComponentClass （通常这样使用：element.type === ComponentClass）。
  • 一些在基于 createClass 创建组件的方法在 ES6 类中被移除掉了或者不建议使用了（getDOMNode, replaceState, isMounted, setProps, replaceProps）。

带有附加组件的 React

新特性

不建议使用的

  • React.addons.classSet 现在不建议使用了。这个功能可以被几个能自由使用的模块替换。classnames 就是一个这样的模块。
  • React.addons.cloneWithProps 可以用 React.cloneElement 替换 - 如果需要，确保手动合并 style 和 className。

React 工具

破坏性的改变（Breaking Changes）

  • ES6 语法转换的时候，类 方法默认情况下不再可枚举，这需要 Object.defineProperty；如果要支持像 IE8 这种浏览器，可以带上 --target es3 来模仿旧式的行为

新特性

  • --target 可选项在 jsx 命令里可用了，允许用户指定要转换成的 ECMAScript 语言版本。
    • es5 是默认的。
    • es3 修正了前面的默认行为。这里添加了额外的转换，以确保用保留字作为属性是安全的（例如，this.static 将会转换成 this['static'] 来兼容 IE8）。
  • 省略号操作符（spread operator）转换仍然被支持。

JSX

破坏性的改变（Breaking Changes）

  • 关于某些 JSX 如何解析有一点改变，尤其是在某个元素中使用 > 和 }。之前这被当做一个字符串，但是现在将会是一个解析错误。npm 上的 jsx_orphaned_brackets_transformer 包可以用来找出并修复 JSX 代码中潜在的问题。