源码调试

1. 从React仓库拉取最新代码,并安装依赖

   # 拉取代码
   git clone https://github.com/facebook/react.git
   
   # 如果拉取速度很慢，可以考虑如下2个方案：
   
   # 1. 使用cnpm代理
   git clone https://github.com.cnpmjs.org/facebook/react
   
   # 2. 使用码云的镜像（一天会与react同步一次）
   git clone https://gitee.com/mirrors/react.git
   
   cd react
   
   yarn
   
   

2. 打包react、scheduler、react-dom三个包为dev环境可以使用的cjs包。

   需要先安装java

       yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE
   

3. 生成的包文件在 build/node_modules中, 创建 yarn link

       cd ./build/node_modules/react
       yarn link
       
       success Registered "react".
       info You can now run `yarn link "react"` in the projects where you want to use this package and it will be used instead.
       
       cd ./build/node_modules/react-dom
       yarn link
       
       success Registered "react-dom".
       info You can now run `yarn link "react-dom"` in the projects where you want to use this package and it will be used instead.
   

4. 使用create-react-app创建项目

5. yarn link react react-dom, 将项目中react, react-dom依赖指向react项目中build后的包

PS: yarn unlink, yarn unlink xxx 可以解除链接

Fiber

作为FiberNode

    function FiberNode(tag, pendingProps, key, mode){
      this.tag = tag; // WorkTag (见下图)
      this.key = key;
      this.elementType = null; // 大部分情况同type
      this.type = null; // 对于 FunctionComponent，指函数本身，对于ClassComponent，指class，对于HostComponent，指DOM节点tagName
      this.stateNode = null; // Fiber

      this.return = null; // 指向父fiberNode
      this.child = null; // 指向子fiberNode
      this.sibling = null; // 指向兄弟fiberNode
      this.index = 0;
      
      this.ref = null;
      this.pendingProps = pendingProps;
      this.memoizedProps = null;
      this.updateQueue = null;
      this.memoizedState = null;
      this.dependencies = null;
      this.mode = mode; // Effects

      this.flags = NoFlags; // v18版本：The name of this field changed from "effectTag" to "flags"
      this.subtreeFlags = NoFlags;
      this.deletions = null;
      
      this.alternate = null; // 树指针，用于构建缓存树
      
      // 调度优先级相关
      this.lanes = NoLanes; 
      this.childLanes = NoLanes;
    }

WorkTag

作为FiberTree

通过 return, child, sibling连接fiberNode

FiberTree出现的名词

 1. fiberRootNode(源码中为fiberRoot): 整个fiber应用的根, 在首次ReactDom.render时创建（可以理解为：首先是一个根，然后是整个fiber tree的根）
 2. rootFiber: 整个组件树的根fiber （可以理解为：首先是一个fiber，然后它是组件树的起点fiber）
 3. current fiber： 当前页面展示的fiber tree
 4. workInProgress fiber：存在于缓存中的fiber tree

作为FiberReconciler

解析FiberTree，使用双缓存技术，通过diff算法打上flags。并且支持异步可中断