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

2024年1月11日 193次阅读 来源: axuebin

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协议了。

    原文作者：axuebin
    原文地址: https://segmentfault.com/a/1190000011378812
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞