|
近日，Facebook发布React v16.0！新版本包括一些长期的功能改进，比如fragments、error boundaries，portals，支持自定义DOM属性，改进的服务器端渲染以及减小的文件大小。 新的渲染返回类型：fragments和strings 现在，程序员可以从组件的渲染中返回一组元素。与其他阵列一样，需要为每个元素添加一个键，以避免出现key警告：
我们也添加了对返回字符串的支持：
以前，渲染过程中的运行时错误可能会使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更小！
相比之下，与之前的版本相比，这相当于减少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，请运行：
虽然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：
当运用替换时，B.componentWillMount总是在A.componentWillUnmount之前发生。 React 16依赖于Map和Set的集合类型。如果支持旧的浏览器和可能尚未提供这些原始浏览器的设备（例如IE <11），请考虑在捆绑的使用程序中包括例如core-js或babel-polyfill。
|
