ReactDOM-render
溫故知新
React fiber & diff algo =>
Render流程簡易版
render func
root existence deter
exist
not exist
一連串的callback（造孩運動）
create FiberRoot
bind to React Root
new FiberRootNode
create HostRootFiber
Connect RootFiber with FiberRoot
create ReactRoot
bind to DOM container
第一步
Root existence determination
SSR(server side render) 今天暫且不提
Bind ReactRoot to DOM container
第二步
create FiberRoot
bind to React Root
new FiberRootNode
create HostRootFiber
Bind RootFiber to FiberRoot
create ReactRoot
開始造孩
remove nodes inside the container
<div id='root'></div>
Bind FiberRoot to ReactRoot._internalRoot
第三步
FiberRoot
RootFiber
FiberRoot
RootFiber(RootFiberNode)
FiberRoot
FiberRoot
#root
DOM container
ReactRoot
container info
_reactRootContainer
_internalRoot
ReactRoot唯一屬性
RootFiber
current
與DOM container做連接以及RootFiberNode做連接
RootFiber
function FiberNode(
tag: WorkTag,
pendingProps: mixed,
key: null | string,
mode: TypeOfMode,
) {
this.stateNode = null;
this.return = null;
this.child = null;
this.sibling = null;
this.effectTag = NoEffect;
this.alternate = null;
}
RootFiber
FiberRoot
stateNode
function App() {
return (
<div>
<span></span>
<span></span>
</div>
);
}
ReactDom.render(<APP/>, document.querySelector('#root'))小總結
謝謝大家
參考連結
Copy of ReactDOM
By Jay Chou
