React 16 beta 版发布！

作者：lizheming

编辑：魔卡

原文地址：http://www.zcfy.cc/@lizheming

━━━━━

令人欣慰，React 16 首个 beta 版已经发布，可以公开测试了！🎉 下面我来告诉大家如何使用以及新版的一些值得注意的地方。

如何使用

安装

由于还是 beta 版，常规的 NPM 安装命令仍然会使用 15.6 正式版。beta 版我们使用 next 标签发布在 NPM 上，你需要使用如下命令安装使用 beta 版：

# Yarn
yarn add react@next react-dom@next

# NPM
npm install --save react@next react-dom@next

Javascript 环境要求

由于 React 16 依赖新的数据集合类型 Map 和 Set ，所以我们不支持一些老浏览器和设备（例如 <IE11）。如果你要支持它们的话，最好为项目引入一个全局的 Polyfill，core-js 和 babel-polyfill 都是不错的选择。

下面是在 React 16 中使用 core-js 来支持老浏览器的示例：

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 16 还依赖了 requestAnimationFrame 方法（在测试环境也是哦），同样如果浏览器不支持的话我们需要提供一个 shim，例如：

global.requestAnimationFrame = function(callback) {
  setTimeout(callback);
};

React 16 给我们带来了什么？

React 16 是首个包含了重构后的 React core（之前代号为“Fiber”）的版本。本次重构实现了一下几个目标：

移除一些老旧并影响系统性能的内部抽象方法。
增加一些呼声最高的新特性，例如 render 方法支持返回数组, 修复某些组件错误，以及 debug 时组件的错误堆栈追踪。
支持异步渲染组件，提高渲染性能。

本次 React 16 的首个版本主要集中在解决与现有应用程序的兼容问题，所以目前暂时还没开启异步渲染。我们会在之后的 16.x 版本中提供选项开启异步渲染功能。我们无法预料 React 16.0 会让你的应用变得更快还是更慢，但是我们希望知道大家用完新版后感觉更好了还是更糟糕了，请反馈给我们。

有趣的点

虽然这个版本是 React 的重构版，但是我们希望它还是能向后兼容的。所以如果你已经修复了 15.x 版本在控制台中所有的已废弃警告的话，16 beta版你使用起来也肯定没问题的。
目前一些依赖了已废弃或者已不支持的 API 接口的第三方组件需要修复这些问题才能兼容当前的 beta 版。最好现在就给这些项目提 issue 来解决兼容性问题。（当然如果是我们的更新无意中破坏了某些接口，也欢迎告诉我们！）
我们对 15.x 和 16.x 两个版本的性能差异非常感兴趣。我们不期望有非常大的变化，但是我们希望得到大家使用后的性能反馈。如果有相关的讨论可以在 issue 中提出！
我们完全重构了服务端渲染功能，现在我们提供流模式来支持这个功能（代码放置在 react-dmo/node-stream中）。服务端渲染不再使用标记验证，而是将其尽可能地附加到现有 DOM 中，并对不一致的地方进行警告。服务端渲染功能可能还有一些问题，如果碰到了请 issue 告诉我们。
React Native 有另外的发布周期，会在之后的版本中支持 16 beta版本。（目前有 alpha 版本支持了但是还未使用 Fiber 引擎。）

重大改变

错误处理

以前， React 的运行时错误会导致组件状态中断并显示一个令人费解的错误。React 16 新增一种称之为“错误边界”的特殊组件修复了这个问题。该组件能够捕捉组件树的运行错误，记录错误，并显示一个降级的 UI 以提升交互。
如果组件有未捕捉的错误，并且在组件树中没有错误边界的话，整个组件树会被卸载。这样能够避免由于错误而导致界面不正常，不过话说回来，为了更好的交互你需要在某些组件中添加错误边界组件来更友好的显示错误。
React 15 对错误边界有一个非常有限且未被文档记录的支持方式。不过之前用了别的方法名，叫unstable_handleError，现在我们将其重命名为 componentDidCatch。

点击此处阅读了解更多的 React 错误处理行为。

队列和生命周期

ReactDOM.render() 和 React.unstable_renderSubtreeIntoContainer()：

这两个方法在生命周期方法中执行时将会返回 null。如果真有这种需求，可以使用 portals 或者 ref 来代替。

setState：

传递 null 给 setState 方法将不会触发更新。你可以自定义更新方法决定是否需要重新渲染。
在 render 方法中直接调用 setState 总会导致更新。这点和之前不太一样。不管怎么说我们都不应该在 render 方法中直接调用 setState 方法。
setState 的回调函数（第二个参数）现在会在 componentDidMount/componentDidUpdate 生命周期之后立即触发，之前是在所有组件渲染完成之后才触发。

当我们使用 <B /> 组件替换 <A /> 组件时，B.componentWillMount 总是会比 A.componentWillUnmount 先触发。老版本中 A.componentWillUnmount 在某些情况下会被先触发。
之前，改变对一个组件的 ref ，总是会在该组件 render 之前将组件和 ref 进行分离。现在我们修改了 ref 变化的时间，让它在 DOM 变更后再做变化。
使用 React 之外的方法修改了一个容器之后，重新渲染组件中的内容是不安全的。之前的版本中虽然可以使用，但是并不推荐。现在我们会在控制台中使用 console.error 发出警告。如果非得这么做的话你可以使用 ReactDOM.unmountComponentAtNode 方法清除组件。点击此处查看示例。
componentDidUpdate 生命周期不再返回 prevContext 参数。（具体详情查看 #8631）

打包

移除了 react/lib/* 和 react-dom/lib/* 模块。即使在 CommonJS 环境，React 和 ReactDOM 都被预编译成单文件了。如果你之前依赖了这些文档中没说明的 React 内部组件，你可能需要更新下。如果你有不得已的使用理由，请在 issue 中告诉我们，我们会试着为你找到一个迁移方案！
移除了 react-with-addon.js 编译版本。所有的兼容组件已经独立发布在 NPM 中，并且都提供了对应的浏览器直接引用的单文件版本。
我们修改了浏览器直接引用的单文件构建版本的名称和路径，用来区分开发版和生产版的区别。例如：

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

插件

React 16 将不支持 react-addons-perf 组件。在之后的发布周期中我们可能需要提供类似功能的组件，不过目前还没有进行迁移。目前你可以直接使用 Chrome 开发者工具的 Performance 模块来优化组件，使用 Performance Observer API 在项目中收集性能数据。具体可查看该 issue。