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