React Fiber 架构与并发模式

// React Scheduler 时间分片核心逻辑（简化版）
let deadline = 0;
const frameYieldMs = 5; // React 默认每个时间片约 5ms

function shouldYield() {
  const now = performance.now();
  // 当前时间片用完了，应该让出主线程
  return now >= deadline;
}

function workLoop() {
  // 每次进入循环重新计算这一片的截止时间
  deadline = performance.now() + frameYieldMs;

  // 只要还有工作、并且时间片没用完，就一直做
  while (nextUnitOfWork !== null && !shouldYield()) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }

  if (nextUnitOfWork !== null) {
    // 活没干完但时间到了：注册下一次回调，先把主线程还给浏览器
    scheduleCallback(workLoop);
  } else {
    // 全部完成，进入 commit 阶段
    commitRoot();
  }
}

// 处理单个 Fiber 节点，返回下一个要处理的节点
function performUnitOfWork(fiber) {
  // 1. beginWork：处理当前节点，创建子 Fiber
  const next = beginWork(fiber);
  if (next) return next; // 有子节点，深度优先向下

  // 2. 没有子节点，向上回溯，处理兄弟节点
  let node = fiber;
  while (node) {
    completeWork(node); // 完成当前节点，收集副作用
    if (node.sibling) return node.sibling;
    node = node.return;
  }
  return null;
}

// Fiber 节点结构示意（真实字段远比这多，这里挑核心的）
const fiber = {
  type: 'div',           // 元素类型：字符串标签 / 函数组件 / 类组件
  key: null,             // 列表 key，用于 diff 时精准匹配
  props: {               // 属性
    className: 'container',
    children: []
  },
  stateNode: null,       // 对应的真实 DOM 节点或组件实例

  // Fiber 树结构（三个指针构成链表树）
  return: parentFiber,    // 父节点
  child: firstChildFiber, // 第一个子节点
  sibling: nextFiber,     // 下一个兄弟节点

  // 双缓存
  alternate: currentFiber, // 指向另一棵树中对应的节点，复用内存

  // 状态和副作用
  memoizedState: null,   // 类组件为 state，函数组件为 Hooks 链表
  memoizedProps: null,   // 上一次的 props
  pendingProps: props,   // 本次待处理的 props
  effectTag: 0,          // 旧版副作用标记（Placement, Update, Deletion 等）
  flags: 0,              // 新版 React 使用 flags 表示副作用
  lanes: 0,              // 优先级标记（Lane 模型，用位运算表示）
};

// Lane 模型示意（用二进制位表示优先级）
const SyncLane =              0b0000000000000000000000000000001; // 最高：同步
const InputContinuousLane =   0b0000000000000000000000000000100; // 连续输入
const DefaultLane =           0b0000000000000000000000000010000; // 默认
const TransitionLane =        0b0000000000000000000000001000000; // 过渡
const IdleLane =              0b0100000000000000000000000000000; // 空闲

// 合并多条车道（一批更新可能属于多个优先级）
const pendingLanes = SyncLane | DefaultLane;

// 取最高优先级车道：分离出最低位的 1（值最小 = 优先级最高）
function getHighestPriorityLane(lanes) {
  return lanes & -lanes; // 位运算技巧，O(1) 取最高优先级
}

// 判断某批更新是否包含某条车道
function includesLane(set, lane) {
  return (set & lane) !== 0;
}

// useTransition 使用示例：区分"紧急更新"与"非紧急更新"
function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (e) => {
    const value = e.target.value;

    // 立即更新输入框（高优先级，紧急更新）
    setQuery(value);

    // 将搜索结果更新标记为低优先级（过渡更新，可被打断）
    startTransition(() => {
      const filtered = largeDataList.filter(item =>
        item.name.toLowerCase().includes(value.toLowerCase())
      );
      setResults(filtered);
    });
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleSearch}
        placeholder="Search..."
      />
      {isPending && <span>Searching...</span>}
      <ResultList results={results} />
    </div>
  );
}

// useDeferredValue 使用示例：延迟派生值的更新
function DeferredList({ query }) {
  // deferredQuery 会"滞后"于 query，输入时先用旧值渲染，保证输入流畅
  const deferredQuery = useDeferredValue(query);

  const results = useMemo(() => {
    return largeDataList.filter(item =>
      item.name.toLowerCase().includes(deferredQuery.toLowerCase())
    );
  }, [deferredQuery]);

  // 通过对比判断是否处于"陈旧"状态，可以给个视觉提示
  const isStale = query !== deferredQuery;

  return (
    <div style={{ opacity: isStale ? 0.6 : 1 }}>
      {results.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

// Suspense 数据获取示例：嵌套 Suspense 实现细粒度加载
function ProfilePage() {
  return (
    <Suspense fallback={<Loading />}>
      <ProfileDetails />
      {/* 内层 Suspense 独立控制照片区域的加载状态 */}
      <Suspense fallback={<PhotosSkeleton />}>
        <ProfilePhotos />
      </Suspense>
    </Suspense>
  );
}

// 配合 Suspense 的资源封装（简化版，生产环境请用 React Query / use 等成熟方案）
function fetchProfileData(id) {
  let status = 'pending';
  let result;
  const suspender = fetchUser(id).then(
    (data) => {
      status = 'success';
      result = data;
    },
    (error) => {
      status = 'error';
      result = error;
    }
  );

  return {
    read() {
      if (status === 'pending') throw suspender; // 抛出 Promise，触发 Suspense
      if (status === 'error') throw result;      // 抛出错误，触发错误边界
      return result;
    }
  };
}

// React 18 启用并发能力：使用 createRoot 而非 legacy 的 ReactDOM.render
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

// 自动批处理示例（React 18 的默认行为）
function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  // 同步事件里，React 17 和 18 都会批处理这两次更新
  const handleReset = () => {
    setFirstName('');
    setLastName('');
    // 只触发一次重新渲染
  };

  // 关键区别：异步回调里
  const handleAsyncReset = async () => {
    await fetchData();
    setFirstName('');
    setLastName('');
    // React 17：触发两次渲染；React 18：自动批处理，只触发一次
  };

  // 如果确实需要立即渲染，用 flushSync 退出批处理
  const handleImmediate = () => {
    flushSync(() => setFirstName('A')); // 立即渲染
    flushSync(() => setLastName('B'));  // 再次立即渲染
  };

  return (
    <form>
      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
      <input value={lastName} onChange={e => setLastName(e.target.value)} />
      <button type="button" onClick={handleReset}>Reset</button>
    </form>
  );
}

// 万级列表搜索：并发特性前后对比
function BigTableSearch({ rows }) { // rows.length ≈ 20000
  const [keyword, setKeyword] = useState('');
  const [visibleRows, setVisibleRows] = useState(rows);
  const [isPending, startTransition] = useTransition();

  const onInput = (e) => {
    const value = e.target.value;
    setKeyword(value); // 紧急：输入框立即回显

    startTransition(() => { // 非紧急：大列表过滤，可被打断
      setVisibleRows(
        rows.filter(r => r.name.toLowerCase().includes(value.toLowerCase()))
      );
    });
  };

  return (
    <>
      <input value={keyword} onChange={onInput} />
      {isPending && <Spinner />}
      <VirtualTable data={visibleRows} />
    </>
  );
}

// 简化的 WorkTag 枚举（对应 react-reconciler/src/ReactWorkTags.js）
export const FunctionComponent = 0;
export const ClassComponent = 1;
export const HostRoot = 3;       // 应用挂载的根 Fiber
export const HostComponent = 5;  // 原生标签，如 <div>
export const HostText = 6;       // 纯文本
export const Fragment = 7;
export const SuspenseComponent = 13;
export const OffscreenComponent = 22; // Offscreen / Activity 的底层实现

// 深度优先遍历一棵 Fiber 树（等价于 React 的遍历顺序）
function traverse(root: Fiber) {
  let node: Fiber | null = root;
  while (node !== null) {
    visit(node);
    if (node.child) {
      node = node.child;          // 优先向下
      continue;
    }
    while (node && !node.sibling) {
      node = node.return;         // 回溯到有兄弟的祖先
    }
    node = node ? node.sibling : null; // 走兄弟
  }
}

// 函数组件的 memoizedState 是一条 Hook 链表
type Hook = {
  memoizedState: any;   // 当前 hook 存的值，如 useState 的 state
  baseState: any;
  queue: any;           // 更新队列（dispatch 往这里塞）
  next: Hook | null;    // 指向下一个 hook，形成链表
};

// 之所以 Hooks 必须固定顺序调用：React 靠"第几个被调用"来定位对应 Hook
// 条件语句里写 Hook 会让链表错位，取到别的 hook 的值

// 常见 flags（对应 react-reconciler/src/ReactFiberFlags.js，值为简化示意）
export const NoFlags   = 0b0000000000000000000000000000;
export const Placement = 0b0000000000000000000000000010; // 需要插入/移动
export const Update    = 0b0000000000000000000000000100; // 需要更新属性
export const Deletion  = 0b0000000000000000000000001000; // 需要删除
export const Ref       = 0b0000000000000001000000000000; // 需要处理 ref
export const Passive   = 0b0000000000000100000000000000; // 有 useEffect

// commit 阶段判断：这个 Fiber 是否需要处理 ref
function needCommitRef(fiber: { flags: number }) {
  return (fiber.flags & Ref) !== NoFlags;
}

// beginWork 的骨架（大幅简化）
function beginWork(current: Fiber | null, workInProgress: Fiber, renderLanes: number) {
  if (current !== null) {
    const oldProps = current.memoizedProps;
    const newProps = workInProgress.pendingProps;
    // props 与 context 都没变，且这棵子树没有待处理优先级 -> 尝试 bailout
    if (oldProps === newProps && !hasContextChanged() &&
        !includesSomeLane(renderLanes, workInProgress.lanes)) {
      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
    }
  }
  // 按 tag 分发
  switch (workInProgress.tag) {
    case FunctionComponent:
      return updateFunctionComponent(current, workInProgress, renderLanes);
    case ClassComponent:
      return updateClassComponent(current, workInProgress, renderLanes);
    case HostComponent:
      return updateHostComponent(current, workInProgress, renderLanes);
    case HostRoot:
      return updateHostRoot(current, workInProgress, renderLanes);
    // ... 其余 tag
  }
}

// completeWork 的骨架（简化）
function completeWork(current: Fiber | null, workInProgress: Fiber) {
  const newProps = workInProgress.pendingProps;
  switch (workInProgress.tag) {
    case HostComponent: {
      if (current !== null && workInProgress.stateNode != null) {
        // 更新：diff 新旧 props，算出需要变更的属性数组，打 Update 标记
        updateHostComponent(current, workInProgress, newProps);
      } else {
        // 首次：创建真实 DOM，把已完成的子 DOM 追加进来
        const instance = createInstance(workInProgress.type, newProps);
        appendAllChildren(instance, workInProgress);
        workInProgress.stateNode = instance;
      }
      bubbleProperties(workInProgress); // 冒泡 subtreeFlags
      return null;
    }
    // ... HostText / 其它
  }
}

// 多节点 diff 第二轮的核心：用 Map 做 key 匹配，lastPlacedIndex 判断移动
function reconcileByKey(existing: Map<string, Fiber>, newChildren: Element[]) {
  let lastPlacedIndex = 0;
  for (let i = 0; i < newChildren.length; i++) {
    const el = newChildren[i];
    const matched = existing.get(el.key);
    if (matched) {
      if (matched.index < lastPlacedIndex) {
        markPlacement(el);              // 旧位置在已放置点左边 -> 需要右移
      } else {
        lastPlacedIndex = matched.index; // 保持相对顺序，无需移动
      }
      existing.delete(el.key);
    } else {
      markPlacement(el);               // 新增节点
    }
  }
  existing.forEach((fiber) => markDeletion(fiber)); // 剩下的旧节点删除
}

// createWorkInProgress：从 current 派生 workInProgress，靠 alternate 复用
function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
  let wip = current.alternate;
  if (wip === null) {
    // 首次：新建一个 Fiber，双向挂 alternate
    wip = createFiber(current.tag, pendingProps, current.key);
    wip.stateNode = current.stateNode;
    wip.alternate = current;
    current.alternate = wip;
  } else {
    // 复用：重置属性，避免重新分配内存
    wip.pendingProps = pendingProps;
    wip.flags = NoFlags;
    wip.subtreeFlags = NoFlags;
  }
  wip.child = current.child;
  wip.memoizedProps = current.memoizedProps;
  wip.memoizedState = current.memoizedState;
  wip.lanes = current.lanes;
  return wip;
}

// commit 阶段三个子阶段的调用顺序（大幅简化）
function commitRoot(root: FiberRootNode, finishedWork: Fiber) {
  // 1. before mutation：读快照、调度 passive effect
  commitBeforeMutationEffects(finishedWork);

  // 2. mutation：改 DOM、执行 useLayoutEffect 的清理、detach 旧 ref
  commitMutationEffects(root, finishedWork);

  // 关键：此刻切换双缓存树，current 指向新树
  root.current = finishedWork;

  // 3. layout：执行 useLayoutEffect 创建、componentDidMount/Update、attach 新 ref
  commitLayoutEffects(finishedWork, root);

  // useEffect 之前已被调度，浏览器绘制后异步执行
}

// 1. 合并优先级：一批更新可能横跨多条车道，用按位或叠加
const combined = SyncLane | DefaultLane | TransitionLane;

// 2. 取最高优先级：分离出最低位的 1（数值越小优先级越高）
// 原理：负数在补码下是"取反加一"，x & -x 恰好只保留最低位的 1
function getHighestPriorityLane(lanes: number): number {
  return lanes & -lanes;
}
// 例：lanes = 0b0110 -> -lanes = 0b...1010 -> lanes & -lanes = 0b0010

// 3. 判断交集：某批 renderLanes 里是否包含目标车道
function includesSomeLane(set: number, subset: number): boolean {
  return (set & subset) !== 0;
}

// 4. 从集合中移除已完成的车道
function removeLanes(set: number, toRemove: number): number {
  return set & ~toRemove;
}

// 5. 统计有多少条车道（popcount，用于 entanglement 等场景）
function countLanes(lanes: number): number {
  let count = 0;
  while (lanes !== 0) {
    lanes &= lanes - 1; // 每次消掉最低位的 1
    count++;
  }
  return count;
}

// Scheduler 用 MessageChannel 实现"让出后尽快恢复"（简化版）
const channel = new MessageChannel();
const port = channel.port2;
let scheduledCallback: ((hasTimeRemaining: boolean, now: number) => boolean) | null = null;

const frameInterval = 5; // 每个时间片 5ms
let startTime = -1;

function shouldYieldToHost(): boolean {
  const elapsed = performance.now() - startTime;
  return elapsed >= frameInterval; // 超过 5ms 就让出
}

const performWorkUntilDeadline = () => {
  if (scheduledCallback !== null) {
    startTime = performance.now();
    const hasMoreWork = scheduledCallback(true, startTime);
    if (hasMoreWork) {
      port.postMessage(null); // 还有活：再投递一个宏任务，先让浏览器绘制
    } else {
      scheduledCallback = null;
    }
  }
};

channel.port1.onmessage = performWorkUntilDeadline;

function schedulePerformWorkUntilDeadline() {
  port.postMessage(null);
}

// Scheduler 核心循环 workLoop（简化）
function workLoop(hasTimeRemaining: boolean, initialTime: number): boolean {
  let currentTask = peek(taskQueue); // 取堆顶
  while (currentTask !== null) {
    if (currentTask.expirationTime > initialTime &&
        (!hasTimeRemaining || shouldYieldToHost())) {
      break; // 时间片用完且任务未过期 -> 让出
    }
    const callback = currentTask.callback;
    if (typeof callback === 'function') {
      currentTask.callback = null;
      const didUserCallbackTimeout = currentTask.expirationTime <= initialTime;
      const continuation = callback(didUserCallbackTimeout);
      if (typeof continuation === 'function') {
        currentTask.callback = continuation; // 任务未完成，保留以便下次续跑
      } else {
        pop(taskQueue);
      }
    } else {
      pop(taskQueue);
    }
    currentTask = peek(taskQueue);
  }
  return currentTask !== null; // 返回是否还有剩余工作
}

// startTransition 的本质（简化）
function startTransition(scope: () => void) {
  const prevTransition = ReactCurrentBatchConfig.transition;
  ReactCurrentBatchConfig.transition = { }; // 打开 transition 上下文
  try {
    scope(); // 这里面的 setState 会被标记为 TransitionLane
  } finally {
    ReactCurrentBatchConfig.transition = prevTransition; // 还原
  }
}

// 因此：startTransition 的回调必须是同步的！
// 若在回调里 await，await 之后的 setState 已脱离 transition 上下文，不再是低优先级

// 三者选型：改变来源用 useTransition，无法改来源用 useDeferredValue
function App() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  // 场景一：你能控制触发点（点击切 tab），用 useTransition
  const selectTab = (next: string) => {
    startTransition(() => setTab(next)); // 切换重组件时不阻塞点击反馈
  };

  return (
    <>
      <TabBar onSelect={selectTab} activeOpacity={isPending ? 0.6 : 1} />
      <TabContent tab={tab} />
    </>
  );
}

// 场景二：值来自外部 props，你改不了触发点，用 useDeferredValue
function SlowList({ text }: { text: string }) {
  const deferredText = useDeferredValue(text); // text 变化被降级为过渡
  const items = useMemo(() => buildHugeList(deferredText), [deferredText]);
  return <List items={items} stale={text !== deferredText} />;
}

// 用 transition 让 Suspense 切换时保留旧内容，而非闪回 fallback
function Router() {
  const [page, setPage] = useState('/home');
  const [isPending, startTransition] = useTransition();

  function navigate(to: string) {
    // 包在 transition 里：新页面数据加载期间，旧页面继续显示（不闪 fallback）
    startTransition(() => setPage(to));
  }

  return (
    <Suspense fallback={<FullPageSpinner />}>
      <div style={{ opacity: isPending ? 0.7 : 1 }}>
        <Page path={page} />
      </div>
    </Suspense>
  );
}

import { Profiler, type ProfilerOnRenderCallback } from 'react';

const onRender: ProfilerOnRenderCallback = (
  id, phase, actualDuration, baseDuration, startTime, commitTime,
) => {
  // actualDuration：本次渲染实际耗时；baseDuration：无优化时的预估耗时
  // phase：'mount' | 'update' | 'nested-update'
  console.log(`[${id}] ${phase} 实际 ${actualDuration.toFixed(2)}ms / 基准 ${baseDuration.toFixed(2)}ms`);
};

function App() {
  return (
    <Profiler id="ProductList" onRender={onRender}>
      <ProductList />
    </Profiler>
  );
}