React v16.0 发布了

很多等待已久的特性:

包括: fragments, error boundaries, portals, 支持 custom DOM attributes, 改进 server-side rendering, reduced file size

render方法可以返回新类型: fragments and strings

现在组件的 render方法里可以直接返回数组。像在其它地方使用数组一样,这里每个数组元素也要加上key属性。

render() {
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

注:fragments实际指的就是 array, 在这之前如果你想简单返回一个 array, 不好意思,不行!
上面的代码会爆这个错误 Adjacent XJS elements must be wrapped in an enclosing tag.
现在返回array时还是要加key属性,接下来React Team会让JSX支持一种不需要keyfragment语法。

另外直接返回string也是支持的, 完整的 render返回类型可参考.

render() {
  return 'Look ma, no spans!';
}

更好的错误处理

在之前,渲染时发生的runtime errors会令React处于异常状态, 同时产生一些莫名其妙的错误消息,只有通过刷新整个页面才能恢复。React 16采取了一种更灵活的策略来处理这个问题。默认情况下,如果在组件的renderlifecycle方法中抛出了错误,整个组件树会从根节点被unmount下来。这样做的好处是,已经被破坏的数据不会被显示出来,但带来的用户体验并不理想。
除了把整个app在每次出错时都unmount下来,你还可以使用error boundaries. 每一个boundaries都是特殊的React组件,它可以捕获它子树的里发生的错误,并在它控制区域中显示一个fallback UI,可以把它想像成传统的try-catch语句,但仅用于React组件。

如果要了解更多细节,请看previous post on error handling in React 16.

Portals

Portals提供了一种最直接的方式去把一个子组件渲染到父组件所控制的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,
  );
}

完整portals文档.

:最直接的应用就是用来实现像modal, tooltip之类的组件,这些组件的DOM元素通常会直接被放到顶层,但逻辑上它们又可能只是属于某个子组件的。

还有一点要特别留意的是,在用Portal的时候,你只是把DOM渲染到父组件之外,但子组件(就是调用Portal那个)还是在React的父组件之内,就是React的组件树结构不变,不受Portal的调用(或者说DOM结构)影响。

带来的一个特性就是,你在子组件产生的event会被你的React父组件所捕获,即使在DOM中,它不是你的父组件。对组件的组织,代码的切割来所,这应该是个好特性,但如果你同时操作 DOM的话,可能会需要一些特殊处理

更好的服务器端渲染

React 16 里把服务器渲染(SSR)彻底重写了一遍。新的实现非常快,并且支持 streaming, 现在你可以更快地把渲染的字节发送到客户端。
多亏了在 新的打包策略 中去掉了process.env检查(信不信由你, 在node.js里读取process.env真的很慢),现在你不再需要在服务器端重新打包一次React也可以有不错的服务端渲染性能。
核心小组的Sasha Aickin写了一篇很棒的文章来阐述React 16里的改进
. 根据 Sasha's 的模拟benchmarks, React 16里的服务端渲染性能 3倍React 15.

"When comparing against React 15 with process.env compiled out, there’s about a 2.4x improvement in Node 4, about a 3x performance improvement in Node 6, and a full 3.8x improvement in the new Node 8.4 release. And if you compare against React 15 without compilation, React 16 has a full order of magnitude gain in SSR in the latest version of Node!" (As Sasha points out, please be aware that these numbers are based on synthetic benchmarks and may not reflect real-world performance.)

另外,React 16hydrating(注:指在客户端基于服务器返回的HTML再次重新渲染)方面也表现的更好。React 16
不再要求客户端的初始渲染完全和服务器返回的渲染结果一致,而是尽量重用已经存在的DOM元素。不再会有checkusm!
一般来说,在服务器和客户端渲染不同的内容是不建议的,但这样做在某些情况下也是有用的(比如,生成timestamp).

documentation for ReactDOMServer
有更多细节可供参考

支持自定义DOM属性

React不再忽略无法识别的HTMLSVG属性,现在它会把这些属性直接传递给DOM. 这个改动让React可以去掉属性白名单,从而减小了文件大小

缩减文件大小

尽管添加了这些新特性, React 16 实际上比 15.6.1还要苗条

react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).

react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).

react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).

总体上就是比上个版本减小了 32% (30% post-gzip).
文件尺寸的减小一部分要归功于打包方法的改变。

React now uses Rollup to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins. The flat bundle format also means that React's impact on bundle size is roughly consistent regardless of how your ship your app, whether it's with Webpack, Browserify, the pre-built UMD bundles, or any other system.

MIT licensed

如果你没有读过,点我, React 16 现在使用MIT license. 为了那些不能立刻升级React的同志们,我们也用MIT发布了React 15.6.2

新的核心架构

React 16 是第一个使用新架构Fiber的版本。你可以在这里了解所有详情
(剧透一下: 我们重写了React!)
大部分的新特性,像error boundaries, fragments,都可以归功于Fiber。接下来的发布的版本,你们可以期待更多的新特性,因为我们要释放React的所有潜能。
最令人兴奋的大概就是异步渲染
通过异步渲染, 程序可以更流畅地运行,因为React可以避免阻塞主线程。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容