React 10 beta版发布了。翻译了官网上的文档,方便大家阅读。恳请大家批评指正。
原地址:https://github.com/facebook/react/issues/10294
React 16 beta版公测开始啦!🎉
安装指南
测试版已经在npm包中发布了,标签是“next”。 常规的npm安装将继续安装15.6版。要安装测试版需要使用以下命令:
yarn add react@next react-dom@next
或者:
npm install --save react@next react-dom@next
对你来说,React 16意味着什么?
React 16是第一个对React核心代码(之前的代号是“Fiber”)进行重写的版本。重写有以下几个目标:
- 移除了一些旧的内部抽象,它们发展的不好,阻碍了内部变更。
- 实现一些备受期待的功能,比如: 在render中返回数组、 组件错误恢复以及跟踪每个错误的可读组件堆
- 开发者可以尝试对组件进行异步渲染,以获得更好的呈现效果
React 16.0主要关注与现有app的兼容性。目前还不支持异步渲染。在后期的 React 16.x版本的发布过程中,我们将加入异步模式的选择项。我们并不期待 React 16.0会给你的app带来多大的速度上的改变,但是我们却很关注你是否看到了进步,或者退步。
环境要求
React 16依赖于Map和Set这一类型集。如果你所支持的老式浏览器和设备本身不提供(如 <IE11),请考虑在你的应用bundle中加入一个全局polyfill,比如core-js或是babel-polyfill。
在使用core-js的React 16 的polyfill环境中,支持旧版本浏览器的写法如下:
import 'core-js/es6/map';
import 'core-js/es6/set';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
React同样依赖于requestAnimationFrame(测试环境也是如此)。测试环境中,一个简单的shim如下:
global.requestAnimationFrame = function(callback) {
setTimeout(callback, 0);
};
兴趣点
- 这是对React完全的重写,但是我们还是期望能与你现有的代码兼容。如果你修复了15.x版本中引入的所有deprecation警告,那16beta版本就可以完美运行了。
- 用户需要更新依赖于弃用或是不支持的API的第三方库以保证其在新版本下正常运行。现在正是对存在问题的库提出issue的好时机。
- 我们尤其感兴趣的是来自于用户的关于15.x和16.x两个版本之间的不同表现的反馈。或许没有什么巨大变化,但是我们还是想听听有哪些进步或是退步。请在这里指出来!
- 服务器渲染器被完全重写,现在提供一种流模式(现在通过react-dom/node-stream来实现不过未来可能会有变化)。服务器渲染器不再使用标记验证,而是尽量与已存在的DOM相关联,并对不一致发出警告。服务器渲染器的代码还很新,因此可能会存在issue。请在这里提出来。
- React Native属于不同的发布周期,它的测试版本将在未来发布。
突破性变更
错误处理
- 以前,runtime错误会使React的state终止并产生含混不清的错误。 React 16修复了这一点,引入了一种叫做“error boundaries”的特殊组件。Error boundaries能在组件树中捕获runtime错误,记录错误,同时显示一个备选UI。
- 如果组件中存在未捕获的的错误,那么组件树中就不存在error boundary,那么整个组件树就会unmounted。这样做有利于避免那些脏bug打断UI的显示,但这也意味着开发者需要在app中添加一些error boundary来优雅地处理错误。
- React 15对error boundaries也有支持,但未被写进文档,方法名也不同。React 15名叫unstable_handleError,现在更名为:componentDidCatch
进程安排和生命周期
- 现在,如果在一个生命周期的方法中使用ReactDOM.render() 和
ReactDOM.unstable_renderIntoContainer()
则会返回null
。
- 为了应对这一点,开发者可以使用the new portal API 或者是 refs.
- setState:
- setState为空将不会再触发更新。开发者可以在更新函数中决定是否需要重新渲染。
- 在render中直接调用setState总是可以导致更新。这与之前不同。尽管如此,开发者还是不应该在render过程中调用setState。
- setState回调(第二个参数)在
componentDidMount
/componentDidUpdate
后会立即触发,而不是在所有组件渲染完成之后。
- 当使用
<A />
替代<B />
的时候,B.componentWillMount
总是会在A.componentWillUnmount
之前发生。以前,A.componentWillUnmount
总是会在某些事件中首先结束。 - 以前,更改一个组件的引用总会将其在调用组件渲染之前与组件分离。现在我们将其延后,在变化应用到DOM时才更改引用。
- 使用除了React之外的工具更改容器内容并重新渲染是很不安全的。这样做虽然有效,但却从不受支持。现在,我们会对这种做法发出警告。开发者可以清空组件树并使用
ReactDOM.unmountComponentAtNode
. 参见此例. -
componentDidUpdate
生命周期不再接收prevContext
参数。(参见 #8631)
打包
-
react/lib/*
和react-dom/lib/*
已经被移除了。即使在CommonJS环境中,React和ReactDOM都会被提前编译为一个单独的文件(“flat bundles”)。如果开发者之前依赖于非文件记录的内部构建,而他们现在又失效了,请在此issue下告知我们您的具体情况,我们会尝试为您提出迁移方案。 -
react-with-addons.js
构建也被移除了。所有兼容性扩展在npm上分开发布,也有单文件浏览版本供开发者参阅。 - 在15.x版本中引入的deprecations现在从核心包中移除了。React.createClass 现在改为
create-react-class
,React.PropTypes
改为prop-types
,React.DOM
改为react-dom-factories
,react-addons-test-utils
改为react-dom/test-utils
, and shallow renderer 改为react-test-renderer/shallow
.参见15.5.0 和15.6.0的博客,那里有介绍如何迁移代码并自动化codemods。 - 单文件浏览构建的名称和路径发生了变化,为的是突出开发和发布的不同。比如:react/dist/react.js → react/umd/react.development.js
react/dist/react.min.js → react/umd/react.production.min.js
react-dom/dist/react-dom.js → react-dom/umd/react-dom.development.js
react-dom/dist/react-dom.min.js → react-dom/umd/react-dom.production.min.js