Facebook发布React v16.0，新旧浏览器都可以尝鲜!

近日，Facebook发布React v16.0！新版本包括一些长期的功能改进，比如fragments、error boundaries，portals，支持自定义DOM属性，改进的服务器端渲染以及减小的文件大小。

新的渲染返回类型：fragments和strings

现在，程序员可以从组件的渲染中返回一组元素。与其他阵列一样，需要为每个元素添加一个键，以避免出现key警告：

在将来，我们可能会向JSX添加不需要密钥的特殊片段语法。

我们也添加了对返回字符串的支持：

更好的错误处理

以前，渲染过程中的运行时错误可能会使React处于断开状态，产生隐秘的错误消息，并需要页面刷新才能恢复。为了解决这个问题，React 16使用了更有弹性的错误处理策略。默认情况下，如果组件的渲染或生命周期方法中抛出了错误，则会从根目录卸载整个组件树。这样可以防止显示损坏的数据。但是，这可能不是理想的用户体验。

每次发生错误时，不要卸载整个应用程序，你可以使用 error boundaries。error boundaries是捕获子树内部错误的特殊组件，并显示一个备用UI。

Portals

Portals提供了一流的方法来将子节点呈现到存在于父组件的DOM层次结构之外的DOM节点。

更好的服务器端渲染

React 16包括一个完全重写的服务器端渲染器。它可以很快的支持流，所以你可以更快地向客户端发送字节。而且，由于采用了一个新的封装策略来编译process.env check（在Node中读取process.env真的很慢），不再需要绑定React来获得良好的服务器呈现性能。

核心团队成员Sasha Aickin写了一篇不错的文章，描述了React 16的SSR改进。根据Sasha的综合基准测试，React 16中的服务器渲染速度大大高于React 15的三倍。当将React 15与proccess.env进行比较时，节点4的改进大约为2.4倍，节点6的性能提升了3倍，并且在新的Node 8.4版本中全面提升了3.8倍，如果与React 15进行比较而没有编译，则React 16在最新版本的Node！的SSR中有一个完整的数量级增益。（正如Sasha指出的那样，这些数字是基于综合基准测试得出的，不代表现实世界中的表现。）

此外，React 16可以更好地在服务器端呈现HTML，它不再需要初始渲染与服务器的结果完全匹配。相反，它将尝试尽可能重用现有的DOM。没有更多的校验和！一般来说，不建议在客户端和服务器上呈现不同的内容，但在某些情况下（例如时间戳）可能会有用。

支持自定义DOM属性

不是忽略无法识别的HTML和SVG属性，React现在可以将它们传递给DOM。这有额外的好处，允许程序员摆脱React的大多数属性白名单，从而减少文件大小。

减少文件大小

尽管补充了很多功能，但React 16实际上比15.6.1更小！

• react为5.3 kb（2.2 kb gzipped），低于20.7 kb（6.9 kb gzipped）。

• react-dom是103.7 kb（32.6 kb gzipped），低于141 kb（42.9 kb gzipped）。

• react+react - dom是109 kb（34.8 kb gzipped），低于161.7 kb（49.8 kb gzipped）。

相比之下，与之前的版本相比，这相当于减少32％的大小（30％的gzip）。

React现在使用Rollup为每种不同的目标格式创建捆绑，从而导致大小和运行时性能的优化。扁平捆绑格式意味着，无论使用Webpack，Browserify，预制UMD捆绑包还是任何其他系统，React对捆绑包大小的影响基本一致。

MIT许可

React 16可以在MIT许可证下使用。

新的核心架构

React 16是React的第一个版本，建立在新的核心架构之上，代号为“Fiber”。用户可以在Facebook的博客上阅读有关此项目的所有内容。此外，该团队正在进行异步渲染研究 - 通过定期向浏览器执行协同调度渲染工作的策略。结果表明，使用异步呈现应用程序更加灵敏，因为React避免阻塞主线程。

Facebbok认为这代表了React的未来。为了尽可能平滑地迁移到v16.0，这一版还没有启用任何异步功能，但是Facebook可能在未来几个月内推出。

安装

React v16.0.0在npm注册表中可用。

要使用Yarn安装React 16，请运行：

要使用npm安装React 16，请运行：

我们还通过CDN提供了React的UMD版本：

升级

虽然React 16包含了许多重大变化，但在升级方面，可以像任何其他主要的React版本一样。自从今年早些时候起，我们一直为Facebook和Messenger.com用户提供React 16，并且发布了几个测试版和候选版本来排除其他问题。除了少数例外，如果应用程序在15.6运行时没有任何警告，它应该可以运行16.0。

新的弃用

如果你在恢复服务器呈现的HTML，请使用ReactDOM.hydrate而不是ReactDOM.render。如果只是在进行客户端渲染，请继续使用ReactDOM.render。

突破变化

React 16包括一些小的突破性变化。这些只会影响不常见的用例，不会破坏大多数应用程序。对于使用unstable_handleError的error boundaries进行了有限的无证支持。此方法已重命名为componentDidCatch，可以使用codemod自动迁移到新的API。

ReactDOM.render和ReactDOM.unstable_renderIntoContainer现在从生命周期方法内部调用时返回null。要解决这个问题，可以使用Portals。

setState：

• 使用null指定setState不再触发更新。如果要重新渲染，允许在更新功能中进行决定。

• 直接在渲染中调用setState会导致更新，不应该从render调用setState。

• setState回调（第二个参数）现在立即在componentComponentDidMount / componentDidUpdate之后启动，而不是在所有组件呈现之后。

当使用<B />替换<A />时，B.componentWillMount总是在A.componentWillUnmount之前发生。

componentDidUpdate生命周期不再接收prevContext参数。

由于DOM引用不可用，简单的渲染器不再调用componentDidUpdate。这也使得它与componentDidMount（在以前的版本中也不会被调用）一致。

浅渲染器不再执行unstable_batchedUpdate。

现在，即使在CommonJS环境中，React和ReactDOM也可以预编译为单个文件（“flat bundles”）。

所有兼容插件在npm上单独发布，如果需要，它们具有单文件浏览器版本。

单文件浏览器构建的名称和路径已更改，以强调开发和生产构建之间的区别。例如：

JavaScript环境要求

React 16依赖于Map和Set的集合类型。如果支持旧的浏览器和可能尚未提供这些原始浏览器的设备（例如IE <11），请考虑在捆绑的应用程序中包括例如core-js或babel-polyfill。

使用core-js支持旧版浏览器的React 16的多重填充环境可能如下所示：

React也取决于requestAnimationFrame（即使在测试环境中）。 用于测试环境的简单示例是：