React源码解析（一）

ReactDom.render做了什么

首先react代码分为react和react-dom两个包，react中代码量特别的少，基本就是API的定义，调用react-dom中的实现。调用的第一个API就是：

  ReactDom.render(App,<div></div>)

这个方法做的事情其实很简单，就是创建了根节点，并做了应用更新前的一系列准备工作，流程是这样的：创建reactRoot—————>创建FiberRoot————>创建RootFiber，Update———>把update加到更新队列Fiber.updateQueue中；
虽然这个过程很简单，但是创建的每一个对象都很重要。
1.reactRoot: 其实没太多实际的意义，被创建以后，创建了FeberRoot对象。
2.FiberRoot: 是整个应用的起点，包含应用挂载的目标节点，记录整个应用更新过程的各种信息FiberRoot.currents是一个Fiber对象,是当前应用对应的Fiber对象，即Root Fiber。

3.Fiber：每个reactElement节点会对应一个Fiber对象，记录节点的各种状态，比如state，props，这些状态更新完成后Fiber.stateNode会被更新，Fiber.stateNode是Fiber所对应节点的实际的实例，比如fiber对应一个classComponent,Fiber.stateNode就是一个Class。Fiber串联整个应用形成树结构。Fiber树是单向链表结构连接起来的。主要靠以下几个字段：

// 指向他在Fiber节点树中的`parent`，用来在处理完这个节点之后向上返回
      return: Fiber | null,
    
      // 单链表树结构
      // 指向自己的第一个子节点
      child: Fiber | null,
      // 指向自己的兄弟结构
      // 兄弟节点的return指向同一个父节点
      sibling: Fiber | null,
  

3：Update对象，用于记录组件状态的改变，由ReactRoot创建，存放于Fiber.updateQueue中。
updateQueue依然为单向列表结构，依靠update.next连接起来。updateQueue会根据所有update计算出新的state。