一. Fiber
架构
React
将整个应用构建成一棵虚拟DOM
树,当触发更新渲染时,会重新生成一棵虚拟DOM
树,与当前的虚拟DOM
树进行比对,找出可复用节点和需要处理的副作用,在更新DOM
阶段进行DOM
树更新。
构建虚拟DOM
树时采用了时间片调度算法,即每个虚拟DOM
节点的构建会作为一个宏任务执行,通过这种方式,当需要花时间构建虚拟DOM
树也极大程度上降低页面卡顿的情况,提升用户体验。
另外React
还引入了优先级任务调度机制,即当有高优先级任务插入时,可以将当前执行的任务中断掉,优先保证高优先级任务优先执行,执行完毕之后再执行之前中断的任务。
二. 文章汇总
强烈推荐阅读第一篇文章,算是React入门教程了,代码仓库
2.1 React
渲染原理
2.1.1 手写mini React,理解React渲染原理
2.2 state
2.2.1 手写React useState,理解useState原理
2.2.2 手写React useReducer, 理解useReducer原理
2.3 effect
2.3.1 手写React useEffect,理解useEffect原理
2.3.2 手写React useLayoutEffect,理解useLayoutEffect原理
2.4 ref
2.4.1 手写React useRef, 理解useRef原理
2.4.2 手写 React ImperativeHandle, 理解 useImperativeHandle 原理
2.5 memo
2.5.1 手写React useMemo, 理解useMemo原理
2.5.2 手写React useCallback,理解useCallback原理
2.5.3 手写React memo,理解memo原理
2.6 优先级任务调度
2.6.1 手写React Scheduler, 理解Scheduler原理
2.6.2 手写React useDeferredValue, 理解useDeferredValue原理
2.7 其它
2.7.1 手写React useSyncExternalStore,理解useSyncExternalStore原理
2.7.2 手写React useContext,理解useContext原理
三. 结束语
创作不易,如果文章对你有帮助,那点个小小的赞吧,你的支持是我持续更新的动力!