如何解释 React 的渲染过程
要理解 React 的渲染过程,我们就想要了解到 React 的设计理念,他想要专心的做好 UI 层面的调度优化,让我们开发可以更专注于页面的展示效果。理解了这,我们就很容易看出他的一些设计意图。
首先第一步是将给我们看的语言转化成机械能看懂的数据结构,这一步一般都是通过 Babel 来进行转化,react 是经过 createElement 这一步,将 jsx 转化成 AST 树,但是和平常所见的 children 数组树不同,React 采用了一种名为 Fiber 的数据结构,也就是说一棵链表树。
为什么使用链表树,我们先了解一下,链表有什么好处,
!链表, 我们结合一下他的设计意图,就可以想到,他是需要进行频繁的插入和删除操作。结合最近 17、18 的版本更新,
最近的更新其实都是在为 conCurrent 在铺路,无论是 window. IdleCallback 还是 Fiber 数据结构,意在把任务拆成最小的粒度,同时去支持高优先级任务的插队,因为链表在这方面有天然的优势,只需要优秀一次指针就可以完成插队,并且引入了双缓存的策略,可以随时暂停。
Patch 这方面是 React 和其他框架最不同的地方, 因为他为了更好的用户体验,引入了 Fiber 数据结构、优先级策略和 window. Idlecallback