React v0.13
发布在yibuyisheng 的专栏2015年3月20日view:2591
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

今天,我们很高兴发布了 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 类似,除了维护 keyref,并且不自动合并 styleclassName 之外)。更多关于我们计划的优化,参见 Gitub issues #3226, #3227, #3228

该版本现在可以下载了:

我们也在 npm 上发布了 0.13.0Reactreact-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 改变等),因此该方法是异步的。在组件第一次挂载并且该函数第一次被调用的时候,该函数是同步的。
  • 现在,在未挂载的组件上调用 setStateforceUpdate 将会出现警告信息,而不再是抛出异常。这就在使用 Promises 的时候避免了可能的竞争条件(That avoids a possible race condition with Promises)。
  • 已经不能访问大多数内置的属性了,包括 this._pendingStatethis._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 替换 - 如果需要,确保手动合并 styleclassName

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 代码中潜在的问题。

译者注:由于水平所限,翻译中难免有不正确的地方。如果有什么问题,可以到 react-docs 提交 issue,谢谢。

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
yibuyisheng 的专栏

关于 web 技术的胡言乱语

我的收藏