[转][译文]React v16（新特性）

2018-11-29  本文已影响0人  彼得马的前端小院

英语原文：React v16.0 (Sep 26, 2017)

我们很高兴的宣布React v16.0发布了! 这个版本包含了很多长期被使用者期待的功能，包括：

下面逐一说明

render函数可返回新的类型：数组和字符串

新的版本支持组件的render方法返回包含元素的数组类型，代码如下：

render() {
     //不需要再把所有的元素绑定到一个单独的元素中了
      return [
        // 别忘记加上key值
        <li key="A"/>First item</li>,
        <li key="B"/>Second item</li>,
        <li key="C"/>Third item</li>,
      ];
    }

关于render()方法的详细说明，请查看API文档。

更好的错误处理

之前的React，在渲染过程中如果遇到运行时的错误，可能会导致整个React组件的崩溃，并产生一些隐藏的错误信息，需要重新刷新才能恢复。为了解决这个问题，React 16 使用了一个更有弹性的错误处理策略。默认情况下，如果一个错误是在组件的渲染或者生命周期方法中被抛出，整个组件结构就会从根节点中卸载。这种方式阻碍了损坏数据的展示，但不是很好的用户体验。

新的策略：对于这种一出现错误就卸载整个组件app的方式进行了改善，你可以使用error boundaries（错误边界）来进行处理，它是专门用来抓取其下子组件错误并向视图展示错误信息的组件。将error boundaries（错误边界）想象成 try { } catch() { } 语句，只不过它是React专用而已。

想要了解更多关于这个特性的说明，请查看这篇文章。

挂载方式

Portals（挂载方式）提供了一个非常好的方式，可以将渲染的children插入到一个DOM节点，而这个节点可以是存在于当前组件DOM结构外的其他节点。

render() {
      // 可以不必创建一个新的div标签，divNode是一个存在于dom结构的节点，不需要考虑这个节点的位置
      return React.createPortal(
        this.props.children,
        divNode,
      );
    }

查看完整的例子

更好的服务端渲染

React 16更好的支持服务端HTML的渲染，不再需要服务端进行初始化渲染以匹配结果了，它会尝试重新利用尽可能多的已存在DOM节点。

为了支持流，服务端渲染器被完全重写。React的核心成员Sasha Aicken，它是这个功能的贡献者，写了一篇非常好的文章来描述React 16 SSR的提升。“渲染流的方式能够减少获取响应首字节前所花费的毫秒数(TTFB)，将页面文档的开头沿着电缆发送到浏览器端时，下一部分的页面文档已经形成了。用这种流的方式，所有的主流浏览器都会更早的开始解析和渲染页面文档”。

支持自定义的DOM属性

取代之前忽略不识别的HTML和SVG属性的方式，新的版本将会把它们传递给DOM元素。这个新特性会让我们摆脱可用的React属性白名单，从而减少文件的大小。
可以参考文章：DOM Attributes in React 16

减少文件体积

除了上面提交到的这些特性，React16要比v15.6.1更小！

文件大小的变化部分归功于打包工具的改变。React现在使用Rollup针对不同的目标格式创建打包，进而使文件大小和运行时性能都表现优秀。

新的核心架构

React 16是React第一个建立在一个称为"Fiber"全新架构的版本。你可以通过阅读Facebook的工程博客了解Fiber全部的内容。

这个版本中的大部分功能，比如error boundaries和fragments，这都是通过重写和核心架构来实现这些可能的。而事后的几个版本中，你能够回去更多的新特性，因为我们会开始全力释放React的全部潜能。

也许最让人兴奋的地方是我们正致力于async rendering（异步渲染）的工作 —— 这个策略能通过周期性的向浏览器发布执行任务从而协同调度渲染工作。结果就是使用异步渲染，应用将会更加响应式，因为React避免了主线程的阻塞。

我们认为异步渲染是一个充满意义的功能，它代表了React的未来。为了能够保证现有项目平滑的融合v16.0版本，这个版本我们并没有启动任何异步的特性，但是在接下来的几个月里我们会非常高兴的请它隆重登场。请大家拭目以待！

升级

就长期的升级来说，尽管React 16只是包括了一些有意义的内部改变，这个版本和其他主要的React版本仍可平分秋色。在今年早期的时候，新版版已服务于React和Messenger.com，然后我们通过发布一些beta版本和候选版本来解决增加的问题。除少数例外，如果你的项目使用v15.6版本没有任何警示，那么可以升级到v16来服务项目了。

弃用

Hydrating一个服务端渲染的容器现在有了一个明确的API，如果你要进行服务端渲染，请使用ReactDOM.hydrate方法替换ReactDOM.render，客户端的渲染请保持使用ReactDOM.render方法。

突破性的变化

打包

( Over... )
转自大转转FE，有改动

另，在知乎上有司徒正美大神的一篇不错的文章：React16新特征总览

上一篇 下一篇

猜你喜欢

热点阅读