从 0 实现 React 18：手写并发模式与 Fiber 架构核心

type FiberNode = {
  // 核心标识
  tag: 'host_root' | 'host_component' | 'function_component' | 'host_text';
  key: string | null;
  type: string | Function;  // 'div' 或组件函数
  
  // 状态与 props
  pendingProps: any;
  memoizedProps: any;
  memoizedState: any;       // 对于 FC，存储 Hook 链表
  
  // 链表结构
  return: FiberNode | null;
  child: FiberNode | null;
  sibling: FiberNode | null;
  index: number;
  
  // 双缓冲与副作用
  alternate: FiberNode | null;   // 指向另一棵树的对应节点
  flags: 'update' | 'delete' | 'placement' | 'layout_effect' | null;
  deletions: FiberNode[] | null;
  
  // 调度相关（React 18 核心）
  lanes: number;           // 优先级位掩码
  childLanes: number;
};

const DEADLINE = 5; // 毫秒
const channel = new MessageChannel();
let pendingCallback: (() => void) | null = null;

channel.port2.onmessage = () => {
  const callback = pendingCallback;
  pendingCallback = null;
  if (callback) callback();
};

function scheduleCallback(callback: () => void) {
  pendingCallback = callback;
  channel.port1.postMessage(null);
}

let nextUnitOfWork: FiberNode | null = null;
let workInProgressRoot: FiberNode | null = null;

function performUnitOfWork(fiber: FiberNode): FiberNode | null {
  // 1. 协调（reconcile）子节点
  reconcileChildren(fiber);
  // 2. 如果有子节点，返回子节点继续工作
  if (fiber.child) return fiber.child;
  // 3. 否则找兄弟节点，或向上回溯
  let next: FiberNode | null = fiber;
  while (next) {
    if (next.sibling) return next.sibling;
    next = next.return;
  }
  return null;
}

function workLoop(deadline: number) {
  let shouldYield = false;
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    shouldYield = performance.now() >= deadline;
  }
  if (nextUnitOfWork) {
    scheduleCallback(() => workLoop(performance.now() + DEADLINE));
  } else {
    // 所有工作完成，提交到 DOM
    commitRoot(workInProgressRoot!);
  }
}

export function render(element: JSX.Element, container: HTMLElement) {
  // 创建 root Fiber
  const rootFiber: FiberNode = {
    tag: 'host_root',
    type: null,
    key: null,
    pendingProps: element,
    memoizedProps: null,
    memoizedState: null,
    return: null,
    child: null,
    sibling: null,
    index: 0,
    alternate: null,
    flags: null,
    deletions: null,
    lanes: 0,
    childLanes: 0,
  };
  workInProgressRoot = rootFiber;
  nextUnitOfWork = rootFiber;
  scheduleCallback(() => workLoop(performance.now() + DEADLINE));
}

function reconcileChildren(workInProgress: FiberNode) {
  const children = workInProgress.pendingProps.children;
  // 简化版：仅处理单子节点
  if (typeof children === 'string' || typeof children === 'number') {
    // 文本节点
    const newFiber: FiberNode = {
      tag: 'host_text',
      type: null,
      key: null,
      pendingProps: children,
      memoizedProps: null,
      memoizedState: null,
      return: workInProgress,
      child: null,
      sibling: null,
      index: 0,
      alternate: null,
      flags: 'update',
      deletions: null,
      lanes: 0,
      childLanes: 0,
    };
    workInProgress.child = newFiber;
    return;
  }
  // 处理元素节点
  if (typeof children === 'object' && children !== null) {
    const newFiber: FiberNode = {
      tag: typeof children.type === 'function' ? 'function_component' : 'host_component',
      type: children.type,
      key: children.key ?? null,
      pendingProps: children.props,
      memoizedProps: null,
      memoizedState: null,
      return: workInProgress,
      child: null,
      sibling: null,
      index: 0,
      alternate: null,
      flags: 'placement',
      deletions: null,
      lanes: 0,
      childLanes: 0,
    };
    workInProgress.child = newFiber;
  }
}

type Hook = {
  memoizedState: any;
  queue: any[];
  next: Hook | null;
};

let currentlyRenderingFiber: FiberNode | null = null;
let hookIndex = 0;

function mountWorkInProgressHook(): Hook {
  const hook: Hook = {
    memoizedState: null,
    queue: [],
    next: null,
  };
  const fiber = currentlyRenderingFiber!;
  if (!fiber.memoizedState) {
    fiber.memoizedState = hook;
  } else {
    // 遍历到链表末尾
    let current = fiber.memoizedState;
    while (current.next) current = current.next;
    current.next = hook;
  }
  return hook;
}

export function useState<T>(initial: T): [T, (action: T | ((prev: T) => T)) => void] {
  const fiber = currentlyRenderingFiber!;
  const hook = mountWorkInProgressHook();
  
  // 读取 alternate 树中的历史状态
  const alternate = fiber.alternate;
  let state: T = initial;
  if (alternate && alternate.memoizedState) {
    // 真实场景需遍历到对应索引的 Hook
    state = (alternate.memoizedState as Hook).memoizedState ?? initial;
  }
  hook.memoizedState = state;
  
  const setState = (action: T | ((prev: T) => T)) => {
    const newState = typeof action === 'function' ? (action as (prev: T) => T)(state) : action;
    // 触发更新（重新调度渲染）
    // 实际实现需要标记 fiber 并触发 workLoop
    scheduleUpdate(fiber, newState);
  };
  
  return [state, setState];
}

// 在执行函数组件时设置当前 fiber
function renderFunctionComponent(fiber: FiberNode) {
  currentlyRenderingFiber = fiber;
  hookIndex = 0;
  const Component = fiber.type as Function;
  const props = fiber.pendingProps;
  const children = Component(props);
  fiber.memoizedProps = props;
  // 继续协调 children...
}

function commitRoot(root: FiberNode) {
  // 1. 递归遍历 fiber 树，执行 DOM 操作
  commitWork(root.child);
  // 2. 将 workInProgress 树变为 current 树
  root.alternate = root;
  // 3. 执行 useEffect（在浏览器绘制后异步执行）
  scheduleEffectCallbacks(root);
}

function commitWork(fiber: FiberNode | null) {
  if (!fiber) return;
  // 找到最近的 host_component 父节点
  let parent = fiber.return;
  while (parent && parent.tag !== 'host_component') parent = parent.return;
  const domParent = (parent as any).domInstance;
  
  if (fiber.tag === 'host_component' || fiber.tag === 'host_text') {
    if (fiber.flags === 'placement') {
      // 创建 DOM 并插入
      const dom = createDOM(fiber);
      domParent.appendChild(dom);
    } else if (fiber.flags === 'update') {
      updateDOM(fiber);
    }
  }
  commitWork(fiber.child);
  commitWork(fiber.sibling);
}