React Fiber架构浅析,版本16.0~16.5的主要更新

Fiber架构浅析

1.Fiber架构的目的

为了解决之前react的渲染问题。
可能会出现调用栈过长,再加上中间进行了复杂的操作,导致长时间阻塞主线程,带来不好的用户体验。

2.Fiber 本质

本质上是一个虚拟的堆栈帧,新的调度器会按照优先级自由调度这些帧,从而将之前的同步渲染改成了 异步渲染 ,在不影响体验的情况下去分段计算更新。

3.特点

比如 对于动画这种实时性很高的东西,也就是 16 ms 必须渲染一次保证不卡顿的情况下,React 会每 16 ms(以内) 暂停一下,返回来继续渲染动画。

4.异步渲染

()分为两个阶段: reconciliation核查阶段 和 commit 提交阶段。
()核查阶段, 可以打断
()提交阶段,不能暂停,会一直更新界面直到完成
()两个阶段包含的声明周期函数如下图
()注意,因为Reconciliation阶段能被打断,所以内部的生命周期函数会出现 多次调用 的情况,应该避免使用,16.0版之后标记为 不安全

版本16.0~16.5的主要更新

目录
1.生命周期函数的更新
2.全新的Context API
3.React Strict Mode
4.Portal
5.Refs
6.Fragment
7.其他

一.生命周期函数的更新

1.新增的生命周期函数

(1)getDerivedStateFromProps (nextProps, prevState)

它配合 componentDidUpdate 周期函数,用来替代 componentWillReceiveProps。
将原本 componentWillReceiveProps 功能进行划分 —— 更新 state 和 操作/调用 props,很大程度避免了职责不清而导致过多的渲染, 从而影响应该性能。

(2)getSnapshotBeforeUpdate (prevProps, prevState)

用来替代componentWillUpdate;
在组件更新之前获取一个 snapshot —— 可以将计算得的值或从 DOM 得到的信息传递到 componentDidUpdate(prevProps, prevState, snapshot) 周期函数的第三个参数,常常用于 scroll 位置的定位。

(3)componentDidCatch(error, info)

让开发者可以自主处理错误信息,诸如展示,上报错误等

2.标记为不安全的生命周期函数

(1)componentWillMount(nextProps, nextState)

升级方案是把 componentWillMount 改为 componentDidMount

(2)componentWillReceiveProps(nextProps)

(3)componentWillUpdate(nextProps, nextState)

2和3不安全的原因,操作 props 引起的 re-render重复渲染;
2的升级方案是使用 getDerivedStateFromProps 和 componentDidUpdate 来代替;
3的升级方案是使用 componentDidUpdate 代替,如涉及大量的计算,可在 getSnapshotBeforeUpdate 完成计算,再在 componentDidUpdate 一次完成更新。

二.全新的Context API

1.旧版的问题

是一个实验性的产品,破坏了 React 的分形结构。
如果在穿透组件的过程中,某个组件的 shouldComponentUpdate 返回了 false, 则 Context API 就不能穿透

2.全新 Context API 成了一等 API,可以很容易穿透组件而无副作用

3.完全可以取代部分Redux应用

全新的 Context API 带来的穿透组件的能力对于需要状态全局共享的场景十分有用,无需进入额外的依赖就能对状态进行管理,代码简洁明了

三.React Strict Mode严格模式

发现开发阶段的潜在问题,主要检测四个问题
1.识别被标志为不安全的生命周期函数
2.检测是否采用了老的 Context API
3.对弃用的 API 进行警告
4.探测某些产生副作用的方法

四.Portal

允许将组件渲染到其他 DOM 节点上。

这对大型应用或者独立于应用本身的渲染很有帮助。

五.Refs属性,操作真正的DOM

1.React.createRef 来取得ref对象
2.React.forwardRef,让父组件可以访问到子组件的 Ref,从而操作子组件的 DOM

六.Fragment

1.类似document.createDocumentFragment文档片段,减少DOM操作;
2.render的再也不用再最外层包裹一层无用的元素了,比如套个div元素;

七.其他

1.ReactDOM 的 render 函数可以数组形式返回 React Component

1
2
3
4
5
6
render(){
return [
<ComponentA key='A' />,
<ComponentB key='b' />,
]
}

2.移除内建的react-with-addons.js, 所有的插件都独立出来

~~~end~

同时欢迎关注我的个人微信公众号:

分享到:
Disqus 加载中...

如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理