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