React 16 发布啦。。渣渣看了一下更新文档~

xi4oh4o 发布于2019-08-21 16:47 / 2271人阅读

摘要：又双叒更新啦这次是，其实在前段时间就知道最近要发布了。协议更新了。。。这样做是为了阻止损坏数据的显示。协议的协议已经是协议了，当然，也把已经发布的页改成协议了。

React 又双叒更新啦~ 这次是React v16.0，其实在前段时间就知道最近要发布了。协议更新了。。。来看看其他的变化吧。自己看着玩的。。期待官方中文文档的更新。。

原文地址：React v16.0

我们很高兴地宣布发布React v16.0了！其中的一些变化是一些长期的功能请求，包括 fragments ，边界错误， portals ，支持自定义 DOM 属性，更好的服务器端渲染以及减小了文件大小。

新的render()返回类型

你现在可以在一个组件的 render 方法中中返回一个元素数组。就像其它数组一样，你需要为每一个数组元素添加一个 key 来避免 key warning 。

render() {
  // 不需要将列表项包含在一个额外的元素中了
  return [
    // 不要忘了添加key哦 :)
    First item,
    Second item,
    Third item,
  ];
}

未来我们可能会向JSX添加一种不需要带有 key 属性的特殊的 fragments 。

同时，我们也使 render 可以返回一个字符串：

render() {
  return "Hello React 16!";
}

更好的错误处理机制

以前，渲染过程中的运行错误可能会使 React 处于崩溃状态，还会产生隐藏的错误消息，并需要页面刷新才能恢复。为了解决这个问题， React 16 使用了一种更灵活的错误处理机制。默认情况下，假如组件的 render 或生命周期的其它方法中抛出了错误，整个组件树会从根卸载。这样做是为了阻止损坏数据的显示。然而，这可能还不是最理想的用户体验。

每次发生错误时，不会卸载整个app，你可以看到错误边界（error boundaries）。错误边界是可以在子树内部捕获错误的一种特殊组件，并且显示一个可显示的回退版本UI。可以把错误边界看成是对于React的 try-catch 语句。

如果想了解更多，可以看这：previous post on error handling in React 16

Portals

Portals 提供了一种一流的方法，将子节点渲染到父节点之外的 DOM 节点中。

render() {
  // React 不会创建一个新的div。它会像`donNode`中渲染子组件。
  // `domNode` 是任何有效的DOM节点，无论它处于DOM中的哪个位置。
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

查看更全面的例子：documentation for portals.

更好的服务端渲染

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

支持自定义DOM属性

之前我们忽略无法识别的 HTML 和 SVG 属性，新版本中， React 可以将它们传递给 DOM 了。这样还有额外的好处，去除了 React 属性的白名单列表，从而减少了文件大小。

削减文件大小

尽管增加了这些新特性，但是 React 16 实际上比 15.6.1 更小！

react 是5.3kb（gzip：2.2kb），之前是20.7kb（gzip：6.9kb）

react-dom 是103.7kb（gzip：32.6kb），之前是141kb（gzip：42.9kb）

react + react-dom 是109kb（gzip：34.8kb），之前是161.7kb（gzip：49.8kb）

相比以前的版本，小了32%（gzip后小了30%）。

MIT 协议

React 16 的协议已经是 MIT 协议了，当然，也把已经发布的15.6.2页改成MIT协议了。

云服务器 GPU云服务器 React Hooks 文档重大更新！更新文档吧开发文档更新 php发布更新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88719.html

你不知道的parseInt

摘要：前言原由偶然看到一个略微奇妙的代码初看之时，瞬间得出答案虽然心底有些许疑问的声音因此追溯根源，没想到答案让我惊呼这里黑人问号，手动滑稽查询了等文档，因此得出下文结论，由于英语渣渣，所以有不恰当的地方希望各位帮忙斧正函数是核心的一个全局函数前言原由：偶然看到一个略微奇妙的代码[1, 2, 3].map(parseInt)初看之时，瞬间得出答案[1, 2, 3]（虽然心底有些许疑问的声...

DesGemini 2019-08-20 18:33 评论0 收藏0
我所理解的简单的项目结构

摘要：将图片都放入文件夹下指定公共的名字。匹配删除的文件根目录开启在控制台输出信息启用删除文件插入开关说一些可能没用的站在前端角度不懂的很多很多时候一个项目都是由一个小组完成的，小组成员可能包括产品，前端，后端，测试，运营等等。不急，先听我唠会嗑~ 随着js发展的如此迅速，市场上越来越多的前端框架可以方便开发者使用。本人大四渣渣一名，先后实习了两个地方，第一家公司用vuejs，实话...

_DangJin 2019-08-22 16:17 评论0 收藏0
用Gatsby和Strapi创建一个静态博客(翻译和自己探索过程中的经验总结)

摘要：用和创建一个静态博客翻译和自己探索过程中的经验总结原文参阅或本篇主要是对其精华内容进行翻译以及实操过程中遇到的问题解决和探索一些具体的操作步骤和细节我将忽略结合原文一起阅读效果更佳注本文操作环境是介绍这是一个包含很多静态内容页面的站点从技术用Gatsby和Strapi创建一个静态博客(翻译和自己探索过程中的经验总结) 原文参阅: Building a static blog usin...

lijy91 2019-06-26 17:32 评论0 收藏0
【babel+小程序】记“编写babel插件”与“通过语法解析替换小程序路由表”的经历

摘要：而扫描各个模块并合并路由表的脚本非常简单，读写文件就了。编写插件之前先要理解抽象语法树这个概念。的解析器，的配置。编写脚本识别字段思路首先获取到源代码是类单文件的语法。获取内的字段，并替换成已生成的路由表。话不多说先上图，简要说明一下干了些什么事。图可能太模糊，可以点svg看看showImg(https://segmentfault.com/img/bV3fs4?w=771&h=63...

李昌杰 2019-08-26 11:36 评论0 收藏0