React v16.0正式版发布

原文：deploy-preview-10824--reactjs.netlify.com/blog/2017/0…

咱们很高兴的宣布React v16.0发布了，此次版本的新增了一些呼声很高的特性，包括支持render返回数组和字符串、错误处理、portals、自定义DOM属性、优化服务器端渲染以及减小文件大小。

支持render返回数组和字符串

你如今能够经过render方法返回一个包含元素的数组：

render() {
  // 再也不须要在外边包裹一个额外的元素！
  return [
    // 不要忘记加key哦 :)
    <li key="A"/>First item</li>,
    <li key="B"/>Second item</li>,
    <li key="C"/>Third item</li>,
  ];
}复制代码

同时也支持返回字符串。

API 文档

更好的错误处理

在此以前，React在渲染时运行错误会致使渲染中断，接着抛出一个使人匪夷所思的错误以及要求刷新页面来恢复。为了解决这个问题，React16 使用了更有弹性的错误处理策略。若是在组件的render方法或者生命周期方法中抛出错误，整个组件会被卸载。这样能够阻止显示错误的页面。然而这可能不是理想的用户体验。

每当错误发生时，你可使用错误边界而不是卸载整个应用。错误边界是一个特殊的组件，捕捉组件树的错误而后显示降级的UI来提高体验。其实错误边界就像try-catch语句，只不过是用于React。

想得到更详细的信息, 查看咱们以前的文章.

Portals

Portals提供一个方法来渲染DOM层级以外的DOM节点。

render() {
  // React不须要建立一个新的div。将被渲染到`divNode`中。
  // `divNode` 是一个在DOM中任何地方都有效的节点。
  return React.createPortal(
    this.props.children,
    divNode,
  );
}复制代码

查看完整portals示例

更好的服务器端渲染

再也不要求初始渲染和服务器的结果彻底匹配，取而代之的是尝试重用更多已存在的节点。减小校验！

服务器端渲染的特性被彻底重写以支持数据流。React核心团队成员Sasha Aicken（主要负责这个特性），他写了一篇很牛逼的文章来描述React16服务器端渲染的提高：“对流的渲染能够节省时间，在document后面部分生成以前就能够把document前面部分发送给浏览器。全部主流的浏览器，都会在当服务器传输流时，开始解析和渲染document。”

支持自定义DOM属性

React将再也不忽略未被识别的HTML和SVG属性，React会将它们传递给DOM。这样还带来一个好处就是容许咱们把它们从React属性的白名单剔除出去，从而减少了文件大小。

缩小React的体积

尽管内容有所增长，但React 16的实际大小比起15.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（压缩文件34.8kb）。

与前一个版本相比，大小减小了32%（压缩后大小减小了30%）。

体积的缩小主要是由于打包方式的改变。React使用Rollup 来为不一样的目标格式建立bundles，带来的结果不只仅是体积减少也使得运行时性能获得提高。

全新架构

React16是在新架构之上第一个版本，代号“Fiber”。

此次发布的大部分特性，好比错误边界和fragments，都是重写核心代码实现的。在接下来的几个版本中，你能够期待更多的特性，由于React的无限潜能已经被激发出来了。

咱们正在开发异步渲染———一种浏览器按期协同渲染策略，异步渲染会使应用响应更稳定，由于React不会阻塞主线程。

咱们认为异步渲染是一个很好的解决方案，它也表明了React将来的方向。这个特性会尽量平顺的迁移到v16.0，目前咱们尚未启用任何异步特性，可是咱们很高兴会在接下来几个月推出这一解决方案，请持续关注！

升级

尽管React16包含了很重大内部改变，但在升级方面，和以前发布React版本同样。在通常状况下，若是你的应用运行在15.6上没有任何警告提示，那就能够运行在16上。

注意

若是你在服务器端渲染HTML，请使用ReactDOM.hydrate替换ReactDOM.render。若是你只是在客户端渲染，那么请继续使用ReactDOM.render。

重大改变

• unstable_handleError方法更名为componentDidCatch，你能够用codemod自动迁移到新的API。

• 若是在生命周期中调用ReactDOM.render 和 ReactDOM.unstable_renderIntoContainer这两个方法会返回null，若是真有这种需求，可使用portals或者refs。

• setState:

  • 调用setState传入null将不会触发更新。

  • 直接在render方法中调用setState会致使更新。无论怎样，你也不该该在render方法中调用setState。

  • setState的回调函数（第二个参数），在componentDidMount 或 componentDidUpdate方法执行后当即调用。

• 当用<B />替换<A />，B组件的componentWillMount会在A组件的componentWillUnmount以前执行。

• 在此以前，改变组件的ref，总会在调用改组件render方法以前分离ref，如今是让它在 DOM 变动后再作改变。

• 经过非React方式修改组件后从新渲染是很不安全的，虽然在以前的版本中可行，可是如今咱们会抛出警告，除非你使用ReactDOM.unmountComponentAtNode来清除你的组件树。查看示例

• componentDidUpdate生命周期不会再返回prevContext 参数。(查看 #8631)

• 浅渲染不在调用componentDidUpdate()，由于DOM的refs是不可用的。这也使得它和componentDidMount()保持一致（componentDidMount()在以前的版本也是不会调用的）。

• 浅渲染再也不执行unstable_batchedUpdates()

打包

• 再也不有react/lib/* 和 react-dom/lib/*两个路径。即便是在CommonJS环境中，React和ReactDOM预编译成一个单独的文件。若是你以前依赖React内部文件，而且再也不工做了，那么请告诉咱们你的具体状况，咱们会尝试为你制定迁移策略。

• 再也不有react-with-addons.js编译版本，全部兼容的插件都会在npm上单独发布，若是你须要的话有单个文件应用于浏览器的版本。

• React.createClass 如今等同于 create-react-class， React.PropTypes 等同于 prop-types, React.DOM 等同于 react-dom-factories, react-addons-test-utils 等同于 react-dom/test-utils, 以及浅渲染等同于 react-test-renderer/shallow，请参阅 15.5.0 和 15.6.0 的文章 来迁移代码。

• 应用于浏览器的单个文件的文件名和路径被修改了，目的是为了区分开发模式和生产模式，好比：

  • 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

完