Now vibe coding, so learning hammer FE ?
《理解 React Fiber 存在的意义》
标签：#前端 #React #React_Fiber #性能优化 #并发渲染 #Virtual_DOM
总结（一段话概括）
React Fiber 是 React 16 对核心协调算法的彻底重写，旨在解决 React 15 中 Stack Reconciler 同步递归更新导致的主线程阻塞问题。通过将组件树重构为链表结构的 Fiber 节点，React 实现了可中断的异步更新、任务优先级调度和时间切片机制，使高优先级任务（如用户输入）能插队执行，避免页面卡顿，并为 Concurrent Mode、Suspense 等现代特性奠定基础。
文章要点：
- React 15 的瓶颈：Stack Reconciler 采用递归遍历，更新一旦开始无法中断，复杂组件树会导致主线程长时间阻塞，造成掉帧和交互卡顿
- Fiber 的本质：将同步更新改为可中断的异步更新，每个 Fiber 节点是一个执行单元，通过
- 时间切片（Time Slicing）：利用
- 优先级调度：引入 Lanes 机制，区分 Immediate（最高）、UserBlocking、Normal、Low、Idle 五级优先级，确保紧急更新优先处理
- 双缓冲机制：维护
- Phase 分离：将更新分为 Render 阶段（可中断，构建 Fiber 树）和 Commit 阶段（不可中断，同步执行 DOM 操作），支持错误边界（Error Boundaries）捕获
- 架构演进：从 React 15 的两层（Reconciler + Renderer）增至 React 16+ 的三层（Scheduler + Reconciler + Renderer），调度器负责任务分配和中断控制
文章URL：https://inside-react.vercel.app/blog/understanding-why-react-fiber-exists
标签：#前端 #React #React_Fiber #性能优化 #并发渲染 #Virtual_DOM
总结（一段话概括）
React Fiber 是 React 16 对核心协调算法的彻底重写，旨在解决 React 15 中 Stack Reconciler 同步递归更新导致的主线程阻塞问题。通过将组件树重构为链表结构的 Fiber 节点，React 实现了可中断的异步更新、任务优先级调度和时间切片机制，使高优先级任务（如用户输入）能插队执行，避免页面卡顿，并为 Concurrent Mode、Suspense 等现代特性奠定基础。
文章要点：
- React 15 的瓶颈：Stack Reconciler 采用递归遍历，更新一旦开始无法中断，复杂组件树会导致主线程长时间阻塞，造成掉帧和交互卡顿
- Fiber 的本质：将同步更新改为可中断的异步更新，每个 Fiber 节点是一个执行单元，通过
child、sibling、return 指针形成链表树，取代递归调用栈- 时间切片（Time Slicing）：利用
requestIdleCallback polyfill（基于 MessageChannel），在浏览器每帧（16.6ms）中预留时间（默认 5ms）给 React，超时即让出主线程控制权- 优先级调度：引入 Lanes 机制，区分 Immediate（最高）、UserBlocking、Normal、Low、Idle 五级优先级，确保紧急更新优先处理
- 双缓冲机制：维护
current Fiber 和 workInProgress Fiber 两棵树，通过 alternate 指针关联，渲染完成后直接切换指针指向，避免重复创建对象- Phase 分离：将更新分为 Render 阶段（可中断，构建 Fiber 树）和 Commit 阶段（不可中断，同步执行 DOM 操作），支持错误边界（Error Boundaries）捕获
- 架构演进：从 React 15 的两层（Reconciler + Renderer）增至 React 16+ 的三层（Scheduler + Reconciler + Renderer），调度器负责任务分配和中断控制
文章URL：https://inside-react.vercel.app/blog/understanding-why-react-fiber-exists
Inside React
Understanding Why React Fiber Exists
Understanding Why React Fiber Exists and how it lets React pause, prioritize
