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,

React源码解析(一)

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

相关推荐