系统梳理前端面试中最高频的三道手写题，从核心原理到完整实现，再到边界情况处理，逐一攻克

全面解读React 19的核心新特性，从React Compiler自动memoization到use() API和Server Components，揭示React框架的未来演进方向

深入剖析React Router的核心实现机制，从BrowserRouter到HashRouter、路由匹配算法到导航守卫，全面解读前端路由的本质

一句话概括 useReducer 是 React 复杂状态管理的利器——它通过 reducer 纯函数集中管理所有状态转换，内部和 useState 共享同一套 Fiber 更新链路。事实上 useState 就是预设了 basicStateReducer 的 useReducer 封装。 核心知识点 1. useState = useReducer + basicStateReduc...

一句话概括 useMemo 缓存计算结果，useCallback 缓存函数引用——两者底层完全相同（Hook 链表中存 [value, deps]，每次渲染用 Object.is 浅比较依赖），区别只在一个自动执行工厂函数、一个直接存传入的函数。useCallback(fn, deps) 本质是 useMemo(() => fn, deps) 的语法糖。 核心知识点 1. 为什么...

一句话概括 React Diff 是两次判断 + 三轮遍历的协作：先判断子元素是单个还是数组，单元素走两步（key → type），数组走三轮（线性扫描 → Map 匹配 → 删除残余），全程贯彻”能复用绝不重建”的最低 DOM 操作原则。 核心知识点 1. 入口分发：newChild 决定了走哪条路 function reconcileChildren(workInProgress...

一句话概括 React 不在每个 DOM 上绑定事件，而是在根容器上统一监听，通过 Fiber 树模拟事件的捕获-冒泡传播路径。这种”合成事件”机制统一了跨浏览器行为、减少了内存占用，并且天然与 Fiber 的并发渲染协调。 核心知识点 1. 事件委托：一个监听器管所有 // 你不会在每个 <button> 上 addEventListener // React 只在 r...

一句话概括 React 第一轮 Diff 按序匹配失败后进入第二轮——把剩余旧 Fiber 塞进 Map，用 lastPlacedIndex 算法判断每个节点该复用还是移动，复用不了的旧节点在第三轮删除。这套机制用 O(n) 时间解决了列表乱序更新的最小 DOM 操作问题。 核心知识点 1. 第一轮为什么会跳出？ // 旧: A B C D E // 新: A B D E C // ...

一句话概括 多节点 Diff 第一轮遍历是”从左到右、顺序对比”的快速路径——新旧 key+type 都匹配就复用并继续，一遇到不匹配立即跳出，把剩余节点交给第二轮（Map 查找）处理。 核心知识点 1. 第一轮遍历做了什么 // ReactChildFiber.js 简化 function reconcileChildrenArray(returnFiber, currentFir...

一句话概括 单节点 Diff 的规则很简单：先比 key（是不是同一个身份），再比 type（能不能复用 DOM）——两者都匹配就复用只改属性，有一项不匹配就销毁重建。最多一次 DOM 操作。 核心知识点 1. 判断流程：三次决策 // ReactFiberChild.js 源码简化 function reconcileSingleElement(returnFiber, curre...