commit

demos/v1/main.tsx

@@ -8,8 +8,6 @@ function App() {
 
 const element = <div>222</div>
 
-console.log(element)
-
 // ReactDOM.render(<div>222</div>, document.getElementById('root'))
 
 // import ReactDOM from 'react-dom/client'

packages/react-reconciler/src/ReactFiber.ts

@@ -0,0 +1,44 @@
+import { HostRoot } from './ReactWorkTags'
+import { Key, Props } from 'shared/ReactTypes'
+import { Flags, NoFlags } from './ReactFiberFlags'
+
+/**
+ * tag fiber 的类型， 函数组件 0、类组件 1、根节点 3、原生组件span、div  5 ...
+ * pendingProps 新属性，等待处理或者生效的属性
+ * 唯一标识
+ */
+export class FiberNode {
+  tag: any = null
+  key: Key
+  stateNode: any = null // fiber 对应真实的 dom 节点
+  type: any = null // 虚拟 dom 节点的 type
+  return: any = null // 指向父节点
+  child: any = null // 指向第一个子节点
+  sibling: any = null // 指向弟弟
+  pendingProps: Props
+  memoizedProps: Props = null // 已经生效的属性
+  // 每个 fiber 会有自己的状态，每一种 fiber 存的类型是不一样的
+  // 类组件对应的fiber 存的就是类实例的状态， hostRoot 存的就是要渲染的元素
+  memoizedState: any = null
+  updateQueue: any = [] // 每个 fiber 身上可能还有更新队列
+  // 副作用的标识，表示要针对此 fiber 节点进行何种操作
+  flags: Flags = NoFlags
+  // 子节点对应的副作用标识
+  // 会将节点的 flags 冒泡的父级 的 subtreeFlags，这样 如果父节点 的 flag 和 subtreeFlags 都是 0， 那么就表示不需要更新
+  subtreeFlags: Flags = NoFlags
+  // 轮替
+  alternate: any = null
+  constructor(tag: any, pendingProps: Props, key: Key) {
+    this.tag = tag
+    this.key = key
+    this.pendingProps = pendingProps
+  }
+}
+
+export function createFiber(tag: any, pendingProps: Props, key: Key) {
+  return new FiberNode(tag, pendingProps, key)
+}
+
+export function createHostRootFiber() {
+  return createFiber(HostRoot, null, null)
+}

packages/react-reconciler/src/ReactFiberClassUpdateQueue.ts

@@ -0,0 +1,9 @@
+export function initialUpdateQueue(fiber: any) {
+  // 创建一个新的更新队列
+  const queue: any = {
+    shared: {
+      pending: null
+    }
+  }
+  fiber.updateQueue = queue
+}

packages/react-reconciler/src/ReactFiberFlags.ts

@@ -0,0 +1,6 @@
+export type Flags = number
+
+export const NoFlags = /*                      */ 0b000000000000000000000000
+export const PerformedWork = /*                */ 0b000000000000000000000001
+export const Placement = /*                    */ 0b000000000000000000000010
+export const Update = /*                       */ 0b000000000000000000000100

packages/react-reconciler/src/ReactFiberRoot.ts

@@ -1,14 +1,25 @@
 import { Container } from 'shared/ReactTypes'
+import { createHostRootFiber } from './ReactFiber'
+import { initialUpdateQueue } from './ReactFiberClassUpdateQueue'
 
 class FiberRootNode {
-  container: Container
+  containerInfo: Container
+  current: any
   constructor(container: Container) {
-    console.log(11112)
-    this.container = container
+    this.containerInfo = container
   }
 }
 
 export function createFiberRoot(containerInfo: Container) {
   const root = new FiberRootNode(containerInfo)
+
+  // 创建根节点的 fiber
+  const uninitializedFiber = createHostRootFiber()
+  // 根容器的 current 指向当前的根 fiber
+  root.current = uninitializedFiber
+  // 根fiber 的 stateNode （也就是真实的dom 节点），指向 fiberRootNode
+  uninitializedFiber.stateNode = root
+
+  initialUpdateQueue(uninitializedFiber)
   return root
 }

packages/react-reconciler/src/ReactWorkTags.ts

@@ -0,0 +1,2 @@
+// 根 fiber 的 tag 类型
+export const HostRoot = 3