React 16 如期发布，遵循 MIT 许可，你们还会继续用么？

（点击上方蓝字，快速关注我们）

Facebook 工程师 Adam Wolff 上周在 FB 工程官博发文称本周将发布 React 16，同时把 React 协议改成 MIT。（当地时间 9月 26 日，FB 工程师 Andrew Clark 在 React 官方主页发文，宣布 React v16.0 发布，并介绍了新版本中的改进：

• 包括了一些长期请求的特性，比如：fragments、 error boundaries（错误边界）、 portals；

• 新支持自定义 DOM 属性；

• 改进了服务端渲染（rendering）；

• 并减小了文件大小。

新的 render() 返回类型：fragments 和 strings

render 方法现在有新的返回类型了：

render() {

  // No need to wrap list items in an extra element!

  return [

    // Don't forget the keys :)

    <li key="A">First itemli>,

    <li key="B">Second itemli>,

    <li key="C">Third itemli>,

  ];

}

和其他数组类似，需要给每个元素加一个 key，避免 key 警告；

render() {

  return 'Look ma, no spans!';

}

更灵活的错误处理机制

此前，在渲染（rendering）过程中发生的运行时错误（runtime error）会导致 React 处于崩溃状态，产生隐藏的错误信息，并要求刷新页面。为了解决这个问题，React 16 采用了一种更灵活的错误处理策略。在默认情况下，如果组件的 render 或生命周期方法内出现了错误，整个组件树将从根（root）卸载（unmount）。以阻止崩溃数据的展示。不过，这可能不是最理想的用户体验。

Portals

Portals 提供了一流方式，将子节点渲染呈现在 DOM 父组件层次结构之外的 DOM 节点中。

render() {

  // React does *not* create a new div. It renders the children into `domNode`.

  // `domNode` is any valid DOM node, regardless of its location in the DOM.

  return ReactDOM.createPortal(

    this.props.children,

    domNode,

  );

}

查看更全面的例子：https://facebook.github.io/react/docs/portals.html

更好的服务端渲染

React 16 包括了一个完全重写的服务端渲染器（renderer）。它真的很快，因为支持 streaming，所以给客户端发送字节更快了。

因为新的打包策略（packaging strategy ）编制了process.env 检查，（不管你信不信，在 Node 中读取 process.env 真的很慢！），现在不需要绑定 React 就能获取不错的服务端渲染性能了。

了解更多：https://facebook.github.io/react/docs/react-dom-server.html

支持自定义 DOM 属性

React 没有忽略无法识别的 HTML 和 SVG 属性，新版本支持向 DOM 传递这些属性。这让我们摆脱了 React 属性白名单列表，从而减小了文件大小。

减小了文件大小

相比 React 15.6.1，React 16 真的是更小巧了：

• 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%。

MIT 许可

上周 FB 已发文说明，React 16 将遵循 MIT 许可。那些还不能立刻升级到 v16 的童鞋，不用担心，FB 也把 React 15.6.2 也改成了 MIT 许可。

React 官方更多说明：https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html

scrolling="no" frameborder="0" class="vote_iframe js_editor_vote_card" data-display-style="height: 145px;" data-display-src="/cgi-bin/readtemplate?t=vote/vote-new_tmpl&__biz=MzAxODE2MjM1MA==&supervoteid=470093558&token=807899630&lang=zh_CN" data-src="/mp/newappmsgvote?action=show&__biz=MzAxODE2MjM1MA==&supervoteid=470093558#wechat_redirect" data-supervoteid="470093558" allowfullscreen=""/>

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能