通过react的脚手架工具建立一个react项目,打开index.js,这个是项目的入口文件
就一句话,ReactDOM.render(<Router />,document.getElementById('root'));
ReactDOM是 react-dom这个库,所以直接看react-dom这个源码,找到render方法,看看到底是个什么鬼!
找到这个传说中的render方法,继续看一下庐山真面目!
首先看一下方法的参数 element, container, callback !
element 就是 React当中的ReactDom ,React实现了独立于浏览器的DOM系统
container 浏览器中的Dom节点
发现这个render函数其实就是执行了legacyRenderSubtreeIntoContainer这个方法,
下面来看下这个方法:
看一下这个root对象的生成过程!以下是react方法中的root对象生成的过程
legacyRenderSubtreeIntoContainer -> legacyCreateRootFromDOMContainer -> ReactRoot -> createContainer ->createFiberRoot -> createHostRootFiber -> createFiber -> FiberNode(生成一个FiberNode节点)
可以知道这个root其实是一个ReactRoot对象
再看下这个root对象有哪些属性和方法
root = {
current: uninitializedFiber, // fiberNode节点
containerInfo: containerInfo,
pendingChildren: null,
earliestPendingTime: NoWork,
latestPendingTime: NoWork,
earliestSuspendedTime: NoWork,
latestSuspendedTime: NoWork,
latestPingedTime: NoWork,
pendingCommitExpirationTime: NoWork,
finishedWork: null,
context: null,
pendingContext: null,
hydrate: hydrate,
remainingExpirationTime: NoWork,
firstBatch: null,
nextScheduledRoot: null
};
这个就是root对象,current就是 fiberNode节点