09月28, 2017

Reactv16.0 新特性尝鲜

好久没更博,花花的博客都被遗忘在角落了,哈哈。 今天来分享一下最近炒的火热的React新版本的feature。

render方法新增返回的type类型:fragments(片段集合)和字符串

新版本中,你可以在render方法中通过数组的方式返回一组元素。需要注意的是,这一组元素中每个元素都需要有一个Key值。

render() {
   // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

同时,你也可以在新版本中在render的时候直接返回一个字符串。

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

当然,官方文档介绍,将来可能会在JSX中增加不需要key值的特殊fragment(代码片段)语法。

更好的错误处理机制

在之前的版本中,当渲染时出错会打乱React的状态,然后抛出一些很难追踪的错误信息,你需要刷新页面才能恢复。在React16中采用了弹性的错误处理机制。默认情况下,当错误是在组件render或在组件生命周期内抛出的话,整个组件树从root开始就会被卸载。这种方式避免了损坏数据的展示。但却不是理想的用户体验。

新版本中你可以使用error boundaries(错误边界) 来替代原来那种一旦有错误整个组件都不渲染的情况。error boundaries(错误边界)其实是一种特殊的组件,它将错误包含在子节点中然后展示一个默认UI到界面中。就好比是React组件中的try-catch语句。

需要注意的是error boundaries(错误边界)组件只能是class声明的组件,当你在组件声明周期中调用componentDidCatch(error, info)方法时,一个class声明的组件就变成了一个错误边界组件。具有了错误边界的特性。

同时,错误边界组件只能捕获当前组件树以下的错误,并不能捕获组件树上层的错误,也不能捕获自身错误。如果一个错误边界组件在渲染错误信息失败时,错误将向上传递到最近的错误边界。原理和 try catch 差不多啦。

在React16中,没有被任何错误边界捕获的错误将导致整个React组件树被卸载。

为什么不用try/catch 这种方式呢?是因为try / catch 本身很强大,但是适用在命令行式的里及时性代码中。

alt

但是React 组件是声明式的,用来指定什么需要被渲染,错误边界组件可以保留React原生的声明方式,按照我们期望的方式执行。

alt

更多详情可以看这里:previous post on error handling in React 16.

Portals

Portals提供了一种全新的方式来渲染那些存在于父组件DOM层级之外的孩子节点到DOM节点中,来,看个例子:

render() {
  // React并没有创建新的div,而是将children渲染到`domNode`中了。
  // `domNode`可以是任何一个合法的dom,无论它在什么位置。
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

更多详情可以看这里:documentation for portals

更好的服务端渲染

React16中包含一个重构后的服务端渲染器。大大的提升了性能。渲染器最大的特点:支持streaming,所以你可以更快的发送数据到客户端。由于采用了新的包管理策略,新版本中不需要再去解析环境变量process.env,换言之,你不需要再考虑为了性能优化而打包React的事情了。

官方统计,服务端渲染在React16中的速度比15提升三倍!!

补充,React16可以更好的维持服务端渲染的HTML,不在需要初始渲染和服务器的结果保持完全匹配。取而代之,它将尽可能多的尝试复用现有的DOM元素。

降低包的体积

加了很多新的特性,但是React16的体积却变小了。

  • react 5.3 kb (2.2 kb gzipped) vs 20.7 kb (6.9 kb gzipped)
  • react-dom 103.7kb(32.6 kb gzipped) vs 141 kb (42.9 kb gzipped)
  • react + react-dom 109 kb (34.8 kb gzipped) vs 161.7 kb (49.8 kb gzipped)

这个主要是React目前采用Rollup的方式为每一种不同的目标格式创建扁平的包来达到相同大小更高性能的效果。这种方式也意味着你不需要考虑用那种工具来打包你的应用,无论Webpack,Browserify,预构建的UMD软件包还是其他什么工具,都不会对最后产生的包大小有太大差异影响。

新版核心架构(Fiber)

React16新特性都涵盖在Fiber中,另外Fiber中最令人激动的地方是:提出async rendering(异步渲染)的设想,周期性的向浏览器执行协调调度函数策略。

官方声明:异步渲染是一个巨大的决定,预示着React的未来。为了能够平滑的过渡到V16版本,目前还没有实现这一设想,但是在不久的将来一定会实现的!

MIT license

最后就是这个引起众怒的license,React16目前是MIT licence。

好了,就这么多了,快去升级吧(^__^) 嘻嘻……

参考链接: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html#reduced-file-size

本文链接:https://www.imwineki.cn/post/React16newfeature.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。