react源码解读(1)

通过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节点

猜你喜欢

转载自blog.csdn.net/w123452222/article/details/82804352