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

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

    你可能感兴趣的:(react.js,前端,javascript)