lastEffect
cloneChildFibers
App
初始化dom属性，事件
将子孙的dom插入到刚生成的dom中
nextEffect
FunctionComponent: function App(){}MemoComponent: useMemoFragment: <Fragment>a</Fragment>...
reconcileChildFibers
prepareUpdate
finishedWork
createFiber
update
初始化
jsxWithValidation
<h1>我出现了</h1>
ReactElement
<div>...</div>
fiberRoot
firstEffect
mount
diffProperties
HostRoot：根节点HostComponent：<a>a</a>HostText: abc
updateHostComponent$1/updateHostText$1
reconcileChildren
<span>点我</span>
workInProgress.updateQueue = prepareUpdate(...); updatePayload && markUpdate(workInProgress);
更新
while (workInProgress !== null && !shouldYield()) { performUnitOfWork(workInProgress); }
renderWithHooks
节点复用。一般是根节点以及非引用节点：例如字符串
if (completedWork.lastEffect !== null) { if (returnFiber.lastEffect !== null) { returnFiber.lastEffect.nextEffect = completedWork.firstEffect; } returnFiber.lastEffect = completedWork.lastEffect;}
jsxDEV
目标：- 什么时候创建与更新，以及代码编写的优化- fiber使用哪些缓存策略- jsx转reactElement过程- reactElement转fiber过程- fiber节点怎么转成DOM节点以及绑定事件等- MemoComponent、LazyComponent等组件为什么可以做到提高性能- effectList 构建流程- react 数组转链表技巧
1. props不同2. type不同3. 执行上下文改变 - context的值4. 当前workInProgress优先级高：挂起恢复大多数情况下beginWork中的fiber是重新生成而非复用。因为每次生成新的fiber中props的引用也随之改变
return
sibling
将jsx转reactElement
Child(FunctionComponent)
设置flags：Update/Placement/Deletefiber diff
将reactElement转fiber
child
effectList的更新
createFiberFromElementcreateFiberFromTextcreateFiberFromPortalcreateFiberFromFragment ...
No:update
验证 & diff获取到updatePayload
mountChildFibers
HostRoot：根节点HostComponent：<a>a</a>HostText: abc...
创建Dom节点，挂载到stateNode上
didReceiveUpdate
Yes: mount
App1
null
FiberNode
finalizeInitialChildren
createInstance/createTextInstance/null
span(HostComponent)
bailoutOnAlreadyFinishedWork
createElement
setInitialProperties
workInProgress.tag
h1(HostComponent)
reconcileChildrenArray/reconcileSingleElemen/reconcileSingleTextNode/reconcileSinglePortal...
current: 当前组件对于的fiber节点。workInProgress: 即将显示在页面中的 Fiber树。1. current = workInProgress.alternate 2. 在第一次初始化的时候current为根fiber
构建真实的dom
FunctionComponent: function App(){}
current === null除了fiberRootNode
App(FunctionComponent)
Root(HostRoot)
根据不同的tag，创建不同fiber节点。
// deleteChildvar last = returnFiber.lastEffect;if (last !== null) { last.nextEffect = childToDelete; returnFiber.lastEffect = childToDelete;} else { returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;}childToDelete.nextEffect = null;childToDelete.flags = Deletion;
appendAllChildren
验证 & diff
div(HostComponent)
current !== null && !didReceiveUpdate
child(HostText)
createChild
