React v16.0正式版发布

2017-10-10  本文已影响0人  miaoyu2009

原文：https://deploy-preview-10824--reactjs.netlify.com/blog/2017/09/26/react-v16.0.html
译者：miaoyu

我们很高兴的宣布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小得多！

与前一个版本相比，大小减少了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。

重大改变

打包

完

上一篇 下一篇

猜你喜欢

热点阅读