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

前端之家收集整理的这篇文章主要介绍了React 16 发布啦。。渣渣看了一下更新文档~前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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


原文地址:React v16.0

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

新的render()返回类型

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

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

未来我们可能会向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协议了。

原文链接:https://www.f2er.com/react/302715.html

猜你在找的React相关文章