【IT168 资讯】近日，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(即使在测试环境中)。 用于测试环境的简单示例是：