hello,这里是潇晨,大家在面试的过程中有没有遇到过一些和react相关的问题呢,比如面试官让你说说react渲染的过程,这到题目比较开放,也比较考验大家对react渲染原理以及源码的整体架构的理解。
react源码3.1 react的核心可以用ui=fn(state)来表示,更详细可以用 const state = reconcile(update); const UI = commit(state); 上面的fn可以分为如下一个部分:
那这些模块是怎么配合工作的呢:
另外我们也可以从首次渲染和更新的时候看在render和commit这两个子阶段是如果工作的:
mount
时: render
阶段会根据jsx
对象构建新的workInProgressFiber
树,不太了解Fiber
双缓存的可以查看往期文章 Fiber架构,然后将相应的fiber
节点标记为Placement
,表示这个fiber
节点需要被插入到dom
树中,然后会这些带有副作用的fiber
节点加入一条叫做Effect List
的链表中。commit
阶段会遍历render
阶段形成的Effect List
,执行链表上相应fiber
节点的副作用,比如Placement
插入,或者执行Passive
(useEffect
的副作用)。将这些副作用应用到真实节点上update
时: render
阶段会根据最新状态的jsx
对象对比current Fiber
,再构建新的workInProgressFiber
树,这个对比的过程就是diff
算法,diff
算法又分成单节点的对比和多节点的对比,不太清楚的同学参见之前的文章 diff算法 ,对比的过程中同样会经历收集副作用的过程,也就是将对比出来的差异标记出来,加入Effect List
中,这些对比出来的副作用例如:Placement
(插入)、Update
(更新)、Deletion
(删除)等。commit
阶段同样会遍历Effect List
,将这些fiber
节点上的副作用应用到真实节点上react源码3.2
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。