Reacr 16 新特性

最新推荐文章于 2022-11-18 16:07:17 发布

原创最新推荐文章于 2022-11-18 16:07:17 发布 · 577 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React16 #新特性x #前端

React 专栏收录该内容

6 篇文章

订阅专栏

Reacr 16 新特性

1. 体积变小

react+react-dom 在gzipped之后小了
- react 大小从之前的20.7kb(压缩后6.9kb)降低到现在的5.3kb (压缩后2.2kb)。
- react-dom 从之前的141kb(压缩后42.9kb)降低到现在的103.7kb(压缩后32.6kb)。
- react + react-dom 从之前的161.7kb(压缩后49.8kb)到现在的109kb(压缩后43.8kb)。

2. 全部代码用Fiber概念重写

Fiber的目标是，激活React，让它具备调度的能力。
具体地来说：

暂停及恢复任务。

赋予不同的任务不同的优先级。

重用之前已经完成的任务。

中止那些不再需要的任务。

要想做到其中的任何一条，我们首先需要一种方式，把工作/任务分解成许许多多的小单元（units）。从某种意义上来说，那就是fiber。一个fiber代表了任务的单位。

3. 新特性之一 `error boundary`

过去，组件内的JavaScript 错误常常会破坏React内部状态,并导致它在下一次渲染时产生神秘的错误。这些错误总会在应用代码中较早的错误引发的，但React 并没有提供一种方式能够在组件内部优雅地来处理，也不能从错误中恢复。

部分UI中的JavaScript 错误不应该破坏整个应用程序。为了解决React 用户的这个问题，React 16引入了一个 “错误边界(Error Boundaries)” 的新概念。

错误边界是 React 组件，它可以在子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示一个备用 UI ** ，而不是使整个组件树崩溃。 错误边界(Error Boundaries)在渲染，生命周期方法以及整个组件树下的构造函数中捕获错误。

    错误边界 无法 捕获如下错误:
    事件处理 （了解更多）
    异步代码 （例如 setTimeout 或 requestAnimationFrame 回调函数）
    服务端渲染
    错误边界自身抛出来的错误 （而不是其子组件）

4. 新特性之二 `New render return types`

react支持在render方法里支持返回数组和字符串
在React 16中，render方法支持直接返回string，number，boolean，null，portal，以及fragments(带有key属性的数组)，这可以在一定程度上减少页面的DOM层级。

//string
render(){
  return 'hello,world'
}

//number
render(){
  return 12345
}

//boolean
render(){
  return isTrue?true:false
}

//null
render(){
  return null
}

//fragments，未加key标识符，控制台会出现warning
render(){
  return [
    <div>hello</div>,
    <span>world</span>,
    <p>oh</p>
  ]
}

以上各种类型现在均可以直接在render中返回，不需要再在外层包裹一层容器元素，不过在返回的数组类型中，需要在每个元素上加一个唯一且不变的key值，否则控制台会报一个warning。

5. 新特性之三 `Protals`

Portals提供了一种很好的方法，将子节点渲染到父组件DOM层次结构之外的 DOM 节点。

ReactDOM.createPortal(child, container)

第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或片段(fragment)。第二个参数（container）则是一个 DOM元素。

通常来说，当你从组件的render方法返回一个元素时，它将被作为子元素被装载到最近父节点 DOM 中：

render() {
  // React 装载一个新的 div，并将 children 渲染到这个 div 中
  return (
    <div>
      {this.props.children}
    </div>
  );
}

然而，有时候将子元素插入到 DOM 节点的其他位置会有用的：

render() {
  // React *不* 会创建一个新的 div。 它把 children 渲染到 `domNode` 中。
  // `domNode` 可以是任何有效的 DOM 节点，不管它在 DOM 中的位置。
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

对于portal的一个典型用例是当父组件有overflow: hidden 或 z-index样式，但你需要子组件能够在视觉上 “跳出(break out)” 其容器。例如，对话框、hovercards以及提示框。

6. 新特性之四 `Better server-side rendering`

React16更好的支持服务端html的渲染，不再需要服务端进行初始化渲染以匹配结果了，它会尝试重新利用尽可能多的已经存在的DOM节点。

服务端渲染器被完全重写用以支持流。React的核心成员Sasha Aicken，它是这个功能的贡献者，写了一篇非常好的文章来描述React16 SSR的提升。“渲染流的方式能够减少获取响应首字节前所花费的毫秒数(TTFB),将页面文档的开头沿着电缆发送到浏览器端时，下一部分的页面文档已经形成了。用这种流的方式，所有的主流浏览器都会更早的开始解析和渲染页面文档”