react源码 - 详解

思维导图

关键问题：

高优先级任务插入后的操作

假设高优任务taskH，正在执行的低优任务taskL
1） 在ensureRootIsScheduled中创建taskH，并插入taskqueue，由于taskqueue自动排序,taskH 在它的过期时间比所有现有任务都早时会在队首。然后将root.callbackNode指向taskH
2）在performConcurrentWorkOnRoot中根据root.callbackNode和当前任务是否一致判断是否有高优任务进入：如果有就取消当前任务并设置taskL.callback=null，回退到workLoop中，由于callback=null，所以取消taskL并重新获取taskqueue队首任务，也就是taskH，从而执行taskH的callback

useEffect闭包陷阱问题

从源码角度解释一下这个疑问，典型的计时器错误实现为：

const [count, setCount] = useState(0);
useEffect(() => {

const interval = setInterval(() => {

setCount(count++)
}, 1000);
}, []);

为什么count的值没有递增？

1. mount阶段，第一次执行useEffect回调函数，启动定时器
2. 触发setCount，组件重新渲染 -> Component()执行组件函数 -> 源于useEffect依赖为[]，所以不重新执行回调函数，所以定时器还是旧的 -> 可是因为组件重新渲染，count变量是一个新的变量，但旧定时器引用的是旧count变量 -> 定时器中的count仍然是旧的，也就是0

scheduler+render关键代码流程图备份(自用)

ensureRootIsScheduled

从ensureRootIsScheduled到task.callback执行