add: 愿不负韶华

guimeisang · guimeisang · commit 46d7d694882e · 2021-06-16T23:47:07.000+08:00
diff --git a/README.md b/README.md
@@ -36,8 +36,14 @@ React 内部实现的一套状态更新机制，支持任务不同的优先级
 和遍历树一样
 
 - beginWork
+具体看src/Core/beginWork文件，并且是区别mount和update的
+更具不同的类型，创建fiber，并且遍历树，并且节点上可能会存在effectTag
 
 - completeWork
+给有effectTag的Fiber节点执行对应操作，根据fiber不同类型处理
+分为update和mount：mount会将fiber实例化成dom，并且两个过程都会处理属性，事件等
+最后，将有effectTag的fiber挂载在父级的fiber的effectList末尾，并返回一个workInProgress
+
 
 第四：commit阶段
 
diff --git a/src/Core/beginWork.ts b/src/Core/beginWork.ts
@@ -0,0 +1,44 @@
+function beginWork(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes
+) {
+  // update时：如果current存在可能存在优化路径，可以复用current（即上一次更新的Fiber节点）
+  if (current !== null) {
+    const oldProps = current.memoizedProps;
+    const newProps = workInProgress.pengingProps;
+
+    if(oldProps !=== newProps || hasLegacyContextChanged() || (__DEV__ ? workInProgress.type !== current.type : false)) {
+      didReceiveUpdate = true;
+    }else if(!includesSomeLane(renderLanes, updateLanes) {
+      didReceiveUpdate = false;
+      switch (workInProgress.tag) {
+        // 省略处理
+      }
+      return bailoutOnAlreadyFinishedWork(
+        current,
+        workInProgress,
+        renderLanes,
+      );
+    }
+  } else {
+    didReceiveUpdate = false
+  }
+
+  // mount 时：根据tag不同，创建不同的子Fiber节点
+  switch (workInProgress.tag) {
+    case IndeterminateComponent:
+    // ...省略
+    case LazyComponent:
+    // ...省略
+    case FunctionComponent:
+    // ...省略
+    case HostRoot:
+    // ...省略
+    case HostComponent:
+    // ...省略
+    case HostText:
+    // ...省略
+    // ...省略其他类型
+  }
+}
diff --git a/src/Core/completeWork.ts b/src/Core/completeWork.ts
@@ -0,0 +1,75 @@
+function completeWork(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+): Fiber | null {
+  const newProps = workInProgress.pendingProps;
+  switch (workInProgress.tag) {
+    case IndeterminateComponent:
+    case LazyComponent:
+    case SimpleMemoComponent:
+    case FunctionComponent:
+    case ForwardRef:
+    case Fragment:
+    case Mode:
+    case Profiler:
+    case ContextConsumer:
+    case MemoComponent:
+      return null;
+    case ClassComponent: {
+      // ...省略
+      return null;
+    }
+    case HostRoot: {
+      // ...省略
+      updateHostContainer(workInProgress);
+      return null;
+    }
+    case HostComponent: {
+      popHostContext(workInProgress);
+      const rootContainerInstance = getRootHostContainer();
+      const type = workInProgress.type;
+
+      if (current !== null && workInProgress.stateNode != null) {
+        // update的情况
+        updateHostComponent(
+          current,
+          workInProgress,
+          type,
+          newProps,
+          rootContainerInstance,
+        );
+      } else {
+        // mount的情况
+        // ...省略服务端渲染相关逻辑
+
+        const currentHostContext = getHostContext();
+        // 为fiber创建对应DOM节点
+        const instance = createInstance(
+          type,
+          newProps,
+          rootContainerInstance,
+          currentHostContext,
+          workInProgress,
+        );
+        // 将子孙DOM节点插入刚生成的DOM节点中
+        appendAllChildren(instance, workInProgress, false, false);
+        // DOM节点赋值给fiber.stateNode
+        workInProgress.stateNode = instance;  
+        // 与update逻辑中的updateHostComponent类似的处理props的过程
+        if (
+          finalizeInitialChildren(
+            instance,
+            type,
+            newProps,
+            rootContainerInstance,
+            currentHostContext,
+          )
+        ) {
+          markUpdate(workInProgress);
+        }
+      }
+      return null;
+    }
+  // ...省略
+}
diff --git a/src/Core/reconcileChildren.ts b/src/Core/reconcileChildren.ts
@@ -0,0 +1,24 @@
+export function reconcileChildren(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  nextChildren: any,
+  renderLanes: Lanes
+) {
+  if (current === null) {
+    // 对于mount的组件
+    workInProgress.child = mountChildFibers(
+      workInProgress,
+      null,
+      nextChildren,
+      renderLanes
+    )
+  } else {
+    // 对于update的组件
+    workInProgress.child = reconcileChildFibers(
+      workInProgress,
+      current.child,
+      nextChildren,
+      renderLanes
+    )
+  }
+}
