React 0.13 Release Notes 粗略的翻译

#1

今天我们很高兴发布 React v0.13!

最显著的新功能莫过于ES6 class 的支持,
这让开发者在编写模块时有了更大的灵活性.
我们的最终目标是用 ES6 的 class 整个替换到 React.createClass,
但是在我们有好的方案来替换当前的 mixin 使用, 以及支持语言当中的类属性初始化之前,
(上一句原文: support for class property initializers in the language)
我们不打算 deprecate React.createClass.

在这个星期的 EmberConf 和 ng-conf, 我们乐于看到 Ember 和 Angular 正在改善性能,
现在两者都有可以跟 React 匹敌的性能了.
此前我们一直认为性能不是人们选择 React 最重要的原因,
但是我们还是会安排计划做更多优化, 让 React 跑得更快,

我们的计划当中, 需要让 ReactElement objects 编程 immutable,
这也一直属于编写通用的 React 代码的最佳实践.
在这个发布中, 我们添加了运行时的报错, 在 props 被修改, 或者在元素创建或者渲染时, 会被触发
在迁移代码的时候, 你可能要用到一个新的 React.cloneElement API
(类似 React.addons.cloneWithProps 但是保留了 key 和 ref, 还有不会自动合并 style 跟 className ).
关于我们优化的计划, 看这些 GitHub Issue: #3226, #3227, #3228.

这个发布现在可以下载了:

同时我们发布了 0.13.0 版本的 react 和 react-tools 两个 npm 模块, 以及 react Bower 模块.

Changelog

React Core

Breaking Changes

  • 在 0.12 中被 warning 的 deprecated patterns 不再支持了: 其中最明显的,
    不通过 JSX 或者 React.createElement 调用 component classe 但和对 non-component 函数使用 JSX 或者 createElement

  • 开发模式下, 在 element 创建之后修改 props 这样的写法被 deprecated, 将会触发 warning,
    未来版本的 React 在性能优化当中会假设 props 是不会修改的.

  • static methods (通过 statics 定义) 不再自动绑定到 component class 上

  • ref 解决方案稍微做了改变, component 上的 ref 在 componentDidMount 调用后(原文: after … is called)马上生效
    这个改变只有在你 componentDidMount 里调用 parent component 的方法时才会有区别
    不管怎么说这个是不合规范的, 理应避免

  • life-cycle methods 当中调用的 setState 现在总是被合并操作的, 所以是异步的,
    以前, 第一次 mout 的第一次调用是同步的.

  • 已经卸载的 component 中调用 setState 和 forceUpdate 现在是警告, 不在是抛出错误,
    这避免了 Promise 当中可能出现的 race condition.

  • 对大多数内部属性的访问现在被完全移出掉了, 包括 this._pendingState 和 this._rootNodeID.

New Features

  • 支持使用 ES6 class 构建 React component, 具体看 v0.13.0 beta 1 notes.

  • 添加了新的 top-level API React.findDOMNode(component), 应该可以替代 component.getDOMNode().
    基于 ES6 的 component 的 base class 将不会再有 getDOMNode.
    这个改变让有些 pattern 往前推进.

  • 添加了新的 top-level API React.cloneElement(el, props) 用来拷贝 React element – 具体看 v0.13 RC2 notes.

  • 新的 ref 写法, 允许使用一个 callback 替代一个 name: <Photo ref={(c) => this._photo = c} />,
    让你可以用通过 this._photo 引用 component(相对于 ref="photo" 的 this.refs.photo)

  • this.setState() 现在可以用函数作为第一个参数, 作为事务性的状态更新(transactional state updates),
    比如说 this.setState((state, props) => ({count: state.count + 1}));
    – 就是说你不再需要使用 this._pendingState 了, 那个 API 已经不存在了.

  • 支持 iterators 和 immutable-js sequences 作为 children.

Deprecations

  • ComponentClass.type 被 deprecated. 用 ComponentClass代替 (通常是 element.type === ComponentClass).

  • 基于 createClass 的 component 上可用的一些方法被从 ES6 classes 移除了或者被 deprecate 了
    (getDOMNode, replaceState, isMounted, setProps, replaceProps).

React with Add-Ons

New Features

Deprecations

  • React.addons.classSet 被 deprecated. 这项功能可以用一些自由的模块替代. 比如 classnames.

  • React.addons.cloneWithProps 的调用会被迁移到 React.cloneElement,
    – 注意需要的话, 手动合并一下 style 和 className

React Tools

Breaking Changes

  • 在 transforming ES6 语法的时候, class 的方法不再默认 enumerable, 那样的话需要 Object.defineProperty;
    if you support browsers such as IE8, you can pass --target es3 to mirror the old behavior
    如果你要支持比如说 IE8, 你可以传递参数 --target es3 来备份(mirror)旧的行为.

New Features

  • --target 选项在 jsx 命令里可用了, 让用户能指定目标的 ECMAScript 版本

    • es5 i作为默认
    • es3 重置到从前的默认行为. 添加了额外的变换来保证保留字可以安全用作属性(比如 this.static 变成 this['static'] 兼容 IE8).

  • call spread operator 的变换也被开启了

JSX

Breaking Changes

  • 一些 JSX 怎样 parse 的方法被改变了, 具体是关于 > 和 } 在标签内部的用法.
    之前它会被认为是个字符串, 但是现在会被作为一个 parse error.
    npm 上的 jsx_orphaned_brackets_transformer 模块可以用来查找和修复你的 JSX 中可能的问题
4 Likes