[译文]React v16.0

查看原文内容

---

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

• fragments (返回片断类型)
• error boundaries（处理错误）
• portals (挂载方式)
• custom DOM attributes （支持自定义DOM属性）
• improved server-side rendering (提高服务端渲染性能)
• reduced file size (减小文件大小)

（下面逐一说明）

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

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

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

新的版本也支持render方法返回的类型为strings。

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

更好的处理错误

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

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

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

挂载方式

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

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

查看完整的例子

更好的服务端渲染

React16更好的支持服务端html的渲染，再也不须要服务端进行初始化渲染以匹配结果了，它会尝试从新利用尽量多的已经存在的DOM节点。

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

支持自定义的DOM属性

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

减小文件体积

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

• react 大小从以前的20.7kb(压缩后6.9kb)下降到如今的5.3kb (压缩后2.2kb)。
• react-dom 从以前的141kb(压缩后42.9kb)下降到如今的103.7kb(压缩后32.6kb)。
• react + react-dom 从以前的161.7kb(压缩后49.8kb)到如今的109kb(压缩后43.8kb)。

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

新的核心架构

React16是React第一个创建在一个称为"Fiber"全新架构的版本。你能够经过阅读Facebook的工程博客了解Fiber所有的内容。

这个版本中的大部分功能，好比error boundaries和fragments，这都是经过重写和核心架构来实现这些可能的。而过后的几个版本中，你可以回去更多的新特性，由于咱们会开始全力释放React的所有潜能。

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

咱们认为异步渲染是一个充满意义的功能，它表明了React的将来。为了可以保证现有项目平滑的融合v16.0版本，这个版本咱们并无启动任何异步的特性，可是在接下来的几个月里咱们会很是高兴的请它隆重登场。请你们拭目以待！

---

升级

就长期的升级来讲，尽管React16只是包括了一些有意义的内部改变，这个版本和其余主要的React版本仍可势均力敌。在今年早期的时候，新版版已服务于React和Messenger.com，而后咱们经过发布一些beta版本和候选版原本解决增长的问题。除少数例外，若是你的项目使用v15.6版本没有任何警示，那么能够升级到v16来服务项目了。

弃用

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

突破变化

• React15有局限，使用未被文档化的unstabel_handleError来支持error boundaries。在新版本中，这个方法被命名为了componentDidCatch。你可使用codemod将项目自动迁移到新的API上。
• 若是ReactDOM.render和ReactDOM.unstable_renderIntoContainer在生命周期方法中被调用，则返回null。为了解决这个问题，你可使用portals或者refs

• setState:

  • setState参数为null的状况下不会再触发更新。这容许你决定一个更新方法若是你想从新渲染。
  • 在render方法中使用setState会触发更新。这在以前是不被容许的，可是如今吗，咱们仍然建议不要在render中触发setState。
  • setState函数的回调（第二个参数）会在ComponentDidMount/componentWillUnmount方法会当即被触发，而不是等全部组件从新渲染后再触发。
  • 当使用组件<A/>替代<B/>时，B.componentDidMount如今必定会出如今A.componentDidUnmount以前。而在以前，A.componentDidUnmount只会在某些状况下首先发生。
  • 以前，当改变一个组件的ref时，ref和dom会在组件的render方法被调用以前分离。如今，咱们延迟了ref的改变，直到dom元素被改变了，ref才会和dom分离。
  • 对于不使用React而是使用其余方法来从新渲染容器是不安全的。这在之前的版本中也许会生效，可是咱们以为不支持这样作。如今对于这种状况咱们会发出一个警告，你须要使用ReactDOM.unmountComponentAtNode来清空你的节点树。看这个栗子
  • componentDidUpdate生命周期再也不接受prevContext参数。
  • shallow render再也不调用componentDidUpdate()由于DOM refs再也不有效。
  • shallow renderer再也不实现unstable_batchedUpdates()。

打包

• 再也不有react/lib/ 和 react-dom/lib/。即便在CommonJS环境下，React和ReactDOM都会预编译成单独的文件("flat bundles")。若是你的项目以前依赖于没有文档化的React内部方法，可是如今它们再也不有效，联系咱们让咱们知道你的特殊栗子，咱们会尽可能提出一个可融合方案。
• 再也不构建react-with-addons.js。全部兼容的插件都会发布到npm上，若是你须要咱们也提供了浏览器单文件版本。
• 在15.x中启用部分的介绍已经在核心包中被去掉了。以下的这些方法是等效的，
  React.createClas <=> create-react-class，React.ProprTypes <=> prop-types，React.DOM <=> react-dom-factories, react-addons-test-utils <=> react-dom/test-utils,shallow renderer <=> react-test-renderer/shallow。能够查看15.5.0及15.6.0版本的博客以了解融合代码及自动化codemods。

• 浏览器单文件版本构建文件的名字和路径的改变是为了强调开发和生产环境的不一样。以下所示：

  • 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

( Over... )