React 日常记录

以下是学习重点 原文地址

浏览器环境
JS解析和执行、绘制、事件处理、静态资源加载和处理
GUI渲染线程和Javascript线程

调度策略

先到先得(FCFS)
对短进程不利
对I/O密集不利
单处理器进程调度中并不受欢迎

轮转 (时钟的 )
确定合适的时间片长度
对I/O进程还是不公平

最短进程优先(SPN)
先执行完短进程，后执行长进程。这是一种非抢占策略。
缺陷是: 如果系统有大量的短进程，那么长进程可能会饥饿得不到响应

最高响应比优先(HRRN)
为了解决长进程饥饿问题，同时提高进程的响应速率
响应比 = （等待执行时间 + 进程执行时间） / 进程执行时间
对于短进程来说，因为执行时间很短，分母很小，所以响应比比较高，会被优先执行
对于长进程来说，执行时间长，一开始响应比小，但是随着等待时间增长，它的优先级会越来越高，最终可以被执行

反馈法
每个进程一开始都有相同的优先级，每次被抢占(需要配合其他抢占策略使用，如轮转)，优先级就会降低一级。因此通常它会根据优先级划分多个队列。

解决这种问题有三个方向:
1️⃣ 优化每个任务，让它有多快就多快。挤压CPU运算量
2️⃣ 快速响应用户，让用户觉得够快，不能阻塞用户的交互
3️⃣ 尝试 Worker 多线程

Fiber 架构

Reconcilation(协调)
React Fiber 的思想和协程的概念是契合的: React 渲染的过程可以被中断，可以将控制权交回浏览器，让位给高优先级的任务，浏览器空闲后再恢复渲染。
主动让出机制(通过requestIdleCallback实现)

模拟函数调用栈
递归进行处理的事情分解成增量的执行单元，将递归转换成迭代.
链表-> Fiber
return 父节点
child 子节点
sibling 下一兄弟节点

⚛️ 协调阶段:可以被中断副作用(Effect)
constructor
shouldComponentUpdate
render
getSnapshotBeforeUpdate

⚛️ 提交阶段: 同步执行，不能被打断.副作用(Effects)一次性执行
componentDidMount
componentDidUpdate
componentWillUnmount

协调阶段可能被中断、恢复，甚至重做，️React 协调阶段的生命周期钩子可能会被调用多次!,
协调阶段的生命周期钩子不要包含副作用

不会再递归去比对、而且不会马上提交变更。
 结构信息
节点类型信息如div、MyComp
节点的状态 - 节点的组件实例、props、state等
 副作用保存在节点的effectTag 通过nextEffect连接起来
 替身构建一颗新的树(官方称为workInProgress tree，WIP树)还有一颗表示已渲染界面的旧树
WIP 树双缓存(Double Buffering)
中断和恢复