文章目录
- React 15
- React 16
- React 17 试验性并发模式
- React 18
React 15
React.createClass （弃用）
class 组件
函数组件（无状态、纯UI组件）
堆栈diff（同步更新state1->state2->state3…、每个更新过程不可中断）
每个更新过程包括：
- setState
- 创建虚拟dom节点
- 虚拟dom对比完成，创建真实dom节点
React 16
hooks：让函数式组件有了和类组件一样的状态（副作用函数可以模拟生命周期）
React fiber：取代堆栈diff，可中断更新机制。
- 基于浏览器单线程调度算法：原生js的requestIdleCallback（在浏览器空闲的时候执行）
requestAnimationFrame：在浏览器执行重排重绘渲染前面调用，使用场景：把动画、更新dom的操作放入raf的回调函数中，性能较好。
- 如果这一帧16.6ms执行完，还剩余一点时间，RIC 会被执行。
小结：
- RIC 执行时机：宏任务、微任务、raf、渲染完成之后执行。
- 在callback中执行一些轻量的微任务。（存在任务优先级）
React fiber 分为两个阶段：
- 协调阶段：创建vdom过程中，打断低优先级，执行高优先级的任务。（∴ 伴随新生命周期的出现，老生命周期可能会重复执行两次。）
- React意识到componentWillMount、componentWillReceiveProps和componentWillUpdate这三个生命周期函数有缺陷，比较容易导致崩溃。但是由于旧的项目已经在用以及有些老开发者习惯用这些生命周期函数，于是通过给它加**UNSAFE_**来提醒用它的人要注意它们的缺陷。
- 替换方案：React 16.3 加入了两个新的生命周期函数getSnapshotBeforeUpdate和getDerivedStateFromProps。
- 17.0：删除componentWillMount，componentWillReceiveProps 和 componentWillUpdate。 （从现在开始，只有新的“UNSAFE_”生命周期名称将起作用。）
- 提交阶段：提交真实dom，不允许被打断。
React 17 试验性并发模式
交替执行不同的任务
React 18
concurrent mode 并发模式，不是一个具体功能，是一个底层设计。
基于并发模式，18 给出两个API，让开发者自己决定优先级的高低。
底层如何实现：基于fiber架构，requestIdleCallback 空闲函数来实现。
- 使用ReactDOM.createRoot( ) 默认开启批处理功能和**并发模式*。*
- 使用 useTransition()、useDeferredValue() 指定非紧急任务更新。
