add: 看源码是真的很枯燥

guimeisang · guimeisang · commit a4d30d263264 · 2021-06-15T23:41:31.000+08:00
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
+理念：
+
+第一：
+
 1. 使用reconciler（协调器）实现了一个reactDOM
 感觉很多都不太理解吧
 
@@ -11,3 +15,19 @@ React 内部实现的一套状态更新机制，支持任务不同的优先级
 其中每个任务更新单元为react element 对应的Fiber节点
 
 2.2 Fiber架构的实现原理
+主要是讲解了下FiberNode的结构
+
+2.3 Fiber架构的工作原理
+- 双缓存，和GPU原理差不多
+即：curren Fiber Tree 和 workInProgress Fiber Tree
+并且关于两个棵之前替换，非常精彩
+
+第二：前置知识
+- 源码的文件结构
+- 调试源码
+- 深入理解JSX
+
+架构篇
+
+
+
diff --git a/src/Core/FiberNode.ts b/src/Core/FiberNode.ts
@@ -5,11 +5,11 @@ function FiberNode(
   mode: TypeOfMode
 ) {
   // 做为静态数据结构的属性
-  this.tag = tag
-  this.key = key
-  this.elementType = null
-  this.type = null
-  this.stateNode = null
+  this.tag = tag // Fiber对应的组件类型 Function、Class、Host
+  this.key = key // key 属性
+  this.elementType = null // 大部分情况同type，某些情况不同，比如FunctionComponent使用React.memo包裹
+  this.type = null // 对于 FunctionComponent，指函数本身，对于ClassComponent，指class，对于HostComponent，指DOM节点tagName
+  this.stateNode = null // Fiber对应真实的DOM节点
 
   // 用于连接其他Fiber节点形成Fiber树
   this.return = null
@@ -19,7 +19,7 @@ function FiberNode(
 
   this.ref = null
 
-  // 做为动态的工作单元的属性
+  // 做为动态的工作单元的属性，保存本次更新造成的状态改变相关信息
   this.pendingProps = pendingProps
   this.memoizedProps = null
   this.updateQueue = null
