fiber work

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