如何解释 React 的渲染过程

要理解 React 的渲染过程，我们就想要了解到 React 的设计理念，他想要专心的做好 UI 层面的调度优化，让我们开发可以更专注于页面的展示效果。理解了这，我们就很容易看出他的一些设计意图。

首先第一步是将给我们看的语言转化成机械能看懂的数据结构，这一步一般都是通过 Babel 来进行转化，react 是经过 createElement 这一步，将 jsx 转化成 AST 树，但是和平常所见的 children 数组树不同，React 采用了一种名为 Fiber 的数据结构，也就是说一棵链表树。

为什么使用链表树，我们先了解一下，链表有什么好处，

链表

链表

/* 链表的优点： 由于链表上的元素在空间存储上内存地址不连续。 所以随机增删元素的时候不会有大量元素位移，因此随机增删效率较高。
**链表优于数组的:**

• 插入与删除的操作….
• 内存地址的利用率方面….
• 链表的扩展性比数组好.

指向原始笔记的链接

, 我们结合一下他的设计意图，就可以想到，他是需要进行频繁的插入和删除操作。结合最近 17、18 的版本更新，

最近的更新其实都是在为 conCurrent 在铺路，无论是 window. IdleCallback 还是 Fiber 数据结构，意在把任务拆成最小的粒度，同时去支持高优先级任务的插队，因为链表在这方面有天然的优势，只需要优秀一次指针就可以完成插队，并且引入了双缓存的策略，可以随时暂停。

Patch 这方面是 React 和其他框架最不同的地方, 因为他为了更好的用户体验，引入了 Fiber 数据结构、优先级策略和 window. Idlecallback