BlogTagsProjectsBaby
目录
  • basics
  • 如何阅读本仓库(学习路径与章节依赖)
  • React 渲染两阶段:Render vs Commit(总览)
  • 从“更新”到“页面变更”:一次 setState 的全链路鸟瞰
  • 基础入门(建议先读)
  • event loop
  • 浏览器多进程架构
  • 事件循环概述
  • 函数调用栈
  • 线程介绍
  • 刷新率与执行队列
  • setTimeout 原理详解
  • Promise 原理详解
  • 事件循环机制(综合)
  • 优先级队列
  • concurrent mode
  • 并发模式:概念
  • 案例演示并发模式
  • 高优先级插队
  • 插队的影响、与中断的区别
  • 中断条件:shouldYield
  • React 中的任务与队列
  • ensureRootIsScheduled
  • 合并多个更新触发
  • taskQueue 队列循环的启动与结束
  • 时间切片是如何实现的
  • workLoop 循环完整逻辑
  • React 中的优先级设计
  • lane 模型
  • fiber
  • 三种节点对象
  • FiberRootNode
  • Fiber 树
  • Fiber 树初始构建过程
  • workLoopConcurrent
  • 栈结构 与 workInProgress
  • 执行上下文 executionContext
  • update lanes
  • render lanes
  • fiber lanes
  • 附录:flags
  • hooks
  • hook 背景
  • hook 分类
  • hook 与闭包
  • hook 与 fiber
  • renderWithHooks
  • 初始化 State Hook
  • 初始化 effect Hook
  • 环形链表详解
  • useReducer 与 useState 的区别
  • update 链表
  • 初始阶段的状态更新
  • baseQueue 与 queue.pending
  • 更新阶段的 dispatch
  • commitRoot
  • diff
  • React 更新机制概述
  • diff 策略
  • 节点比较方式
  • reconcileChildFibers
  • reconcileSingleElement
  • reconcileChildrenArray
  • 为什么不建议使用数字作为 key
  • event system
  • 事件系统概述
  • 事件插件
  • 事件池
  • 根节点事件绑定
  • 事件触发
  • interview
  • useEffect 与 useLayoutEffect 的区别
  • 为什么 hook 不能写在条件判断里
  • 聊聊在 React 中,你对并发模式的理解
  • 聊聊 React 的更新机制原理
  • setState 是同步还是异步的?
  • 聊聊 useState 与 useReducer 的区别
  • 聊聊闭包陷阱问题,以及如何解决
  • 时间分片是如何实现的(任务拆分/中断/恢复)
  • 聊聊 useState 的批处理更新机制
  • JSX 是如何转变成为真实 DOM 的
  • useCallback 的实现原理是什么
  • 详细聊聊 React 的调度机制
  • 聊聊 React 的优先级机制(Lane 模型)
  • React 的 Diff 算法是什么样的
  • 详细聊聊 React 的事件系统是如何实现的
  • React Portals 上的事件是否会冒泡到父组件,原理是什么
  • useEffect 的实现原理是什么
  • 请聊聊 useContext 的实现原理
  • react 18 in practice
  • React 18 自动批处理(Automatic Batching)与 flushSync
  • React StrictMode:为什么会“双调用”?(源码/机制视角)
  • Transition:startTransition / useTransition / useDeferredValue(机制视角)
  • Suspense:加载态边界如何设计(机制/架构视角)
  • Error Boundary:兜底、重试与上报(自研 vs Sentry)(机制/架构视角)
  • React 18 实战(并发特性与默认行为)
  • routing and navigation
  • 路由与 URL State:统一心智模型(架构师视角)
  • TanStack Router(Vite / SPA):Route Tree / Search / Loader / Prefetch(落地篇)
  • Next.js App Router:Segments / Layouts / Loading-Error-NotFound / Prefetch(落地篇)
  • 路由与导航(TanStack Router / Next App Router)
  • data layer
  • 状态分层:UI / Server / URL / Global(架构师视角)
  • TanStack Query:缓存模型与失效策略(Caching & Invalidation)
  • TanStack Query:乐观更新与一致性(Optimistic Updates & Consistency)
  • 表单架构:React Hook Form 的受控/非受控、校验、性能与可测试性(架构师视角)
  • 数据层(Server State / 表单 / 状态分层)
  • rendering and delivery
  • Hydration mismatch(React / Next.js):成因、检测、排查清单与工程化规避
  • Next.js 缓存/重验证与一致性:避免「线上怎么不更新」事故(App Router)
  • CSR vs SSR vs SSG vs ISR:怎么选?边界是什么?(体验 + 成本 + 一致性)
  • Streaming SSR + Suspense:提升前端感知性能的利器
  • 渲染与交付(CSR/SSR/Streaming/Hydration/缓存)
  • production readiness
  • 前端可观测性体系:日志、指标与链路追踪
  • 鉴权与 Web 安全:OAuth, JWT, XSS, CSRF, CSP
  • 生产可用性(错误/可观测/鉴权/安全)
  • performance
  • 前端性能定位 Playbook:从指标到归因
  • React 渲染性能优化:Memo, Context, 与虚拟化
  • 资源与 Bundle 优化:代码分割、图片与 CDN
  • 性能体系(定位 → 优化 → 度量)
  • engineering and architecture
  • 组件体系与设计系统:构建规模化前端的基石
  • 前端测试体系:RTL, E2E 与可测性设计
  • Monorepo 与依赖治理:pnpm 和 Turborepo
  • CI/CD 与质量门禁:构建可靠的自动化流程
  • BFF 与 API 设计:前端架构师的视角
  • 工程与架构治理(规模化)
  • advanced
  • RSC/Server Actions 深水区:边界、约束与缓存一致性
  • 微前端治理:样式、路由与通信
  • 实时与离线:WebSocket, PWA 与 Service Worker
  • a11y, i18n 与合规:构建负责任的全球化应用
  • 进阶专题(按业务需要选做)
Notes
react
  • basics
  • 如何阅读本仓库(学习路径与章节依赖)
  • React 渲染两阶段:Render vs Commit(总览)
  • 从“更新”到“页面变更”:一次 setState 的全链路鸟瞰
  • 基础入门(建议先读)
  • event loop
  • 浏览器多进程架构
  • 事件循环概述
  • 函数调用栈
  • 线程介绍
  • 刷新率与执行队列
  • setTimeout 原理详解
  • Promise 原理详解
  • 事件循环机制(综合)
  • 优先级队列
  • concurrent mode
  • 并发模式:概念
  • 案例演示并发模式
  • 高优先级插队
  • 插队的影响、与中断的区别
  • 中断条件:shouldYield
  • React 中的任务与队列
  • ensureRootIsScheduled
  • 合并多个更新触发
  • taskQueue 队列循环的启动与结束
  • 时间切片是如何实现的
  • workLoop 循环完整逻辑
  • React 中的优先级设计
  • lane 模型
  • fiber
  • 三种节点对象
  • FiberRootNode
  • Fiber 树
  • Fiber 树初始构建过程
  • workLoopConcurrent
  • 栈结构 与 workInProgress
  • 执行上下文 executionContext
  • update lanes
  • render lanes
  • fiber lanes
  • 附录:flags
  • hooks
  • hook 背景
  • hook 分类
  • hook 与闭包
  • hook 与 fiber
  • renderWithHooks
  • 初始化 State Hook
  • 初始化 effect Hook
  • 环形链表详解
  • useReducer 与 useState 的区别
  • update 链表
  • 初始阶段的状态更新
  • baseQueue 与 queue.pending
  • 更新阶段的 dispatch
  • commitRoot
  • diff
  • React 更新机制概述
  • diff 策略
  • 节点比较方式
  • reconcileChildFibers
  • reconcileSingleElement
  • reconcileChildrenArray
  • 为什么不建议使用数字作为 key
  • event system
  • 事件系统概述
  • 事件插件
  • 事件池
  • 根节点事件绑定
  • 事件触发
  • interview
  • useEffect 与 useLayoutEffect 的区别
  • 为什么 hook 不能写在条件判断里
  • 聊聊在 React 中,你对并发模式的理解
  • 聊聊 React 的更新机制原理
  • setState 是同步还是异步的?
  • 聊聊 useState 与 useReducer 的区别
  • 聊聊闭包陷阱问题,以及如何解决
  • 时间分片是如何实现的(任务拆分/中断/恢复)
  • 聊聊 useState 的批处理更新机制
  • JSX 是如何转变成为真实 DOM 的
  • useCallback 的实现原理是什么
  • 详细聊聊 React 的调度机制
  • 聊聊 React 的优先级机制(Lane 模型)
  • React 的 Diff 算法是什么样的
  • 详细聊聊 React 的事件系统是如何实现的
  • React Portals 上的事件是否会冒泡到父组件,原理是什么
  • useEffect 的实现原理是什么
  • 请聊聊 useContext 的实现原理
  • react 18 in practice
  • React 18 自动批处理(Automatic Batching)与 flushSync
  • React StrictMode:为什么会“双调用”?(源码/机制视角)
  • Transition:startTransition / useTransition / useDeferredValue(机制视角)
  • Suspense:加载态边界如何设计(机制/架构视角)
  • Error Boundary:兜底、重试与上报(自研 vs Sentry)(机制/架构视角)
  • React 18 实战(并发特性与默认行为)
  • routing and navigation
  • 路由与 URL State:统一心智模型(架构师视角)
  • TanStack Router(Vite / SPA):Route Tree / Search / Loader / Prefetch(落地篇)
  • Next.js App Router:Segments / Layouts / Loading-Error-NotFound / Prefetch(落地篇)
  • 路由与导航(TanStack Router / Next App Router)
  • data layer
  • 状态分层:UI / Server / URL / Global(架构师视角)
  • TanStack Query:缓存模型与失效策略(Caching & Invalidation)
  • TanStack Query:乐观更新与一致性(Optimistic Updates & Consistency)
  • 表单架构:React Hook Form 的受控/非受控、校验、性能与可测试性(架构师视角)
  • 数据层(Server State / 表单 / 状态分层)
  • rendering and delivery
  • Hydration mismatch(React / Next.js):成因、检测、排查清单与工程化规避
  • Next.js 缓存/重验证与一致性:避免「线上怎么不更新」事故(App Router)
  • CSR vs SSR vs SSG vs ISR:怎么选?边界是什么?(体验 + 成本 + 一致性)
  • Streaming SSR + Suspense:提升前端感知性能的利器
  • 渲染与交付(CSR/SSR/Streaming/Hydration/缓存)
  • production readiness
  • 前端可观测性体系:日志、指标与链路追踪
  • 鉴权与 Web 安全:OAuth, JWT, XSS, CSRF, CSP
  • 生产可用性(错误/可观测/鉴权/安全)
  • performance
  • 前端性能定位 Playbook:从指标到归因
  • React 渲染性能优化:Memo, Context, 与虚拟化
  • 资源与 Bundle 优化:代码分割、图片与 CDN
  • 性能体系(定位 → 优化 → 度量)
  • engineering and architecture
  • 组件体系与设计系统:构建规模化前端的基石
  • 前端测试体系:RTL, E2E 与可测性设计
  • Monorepo 与依赖治理:pnpm 和 Turborepo
  • CI/CD 与质量门禁:构建可靠的自动化流程
  • BFF 与 API 设计:前端架构师的视角
  • 工程与架构治理(规模化)
  • advanced
  • RSC/Server Actions 深水区:边界、约束与缓存一致性
  • 微前端治理:样式、路由与通信
  • 实时与离线:WebSocket, PWA 与 Service Worker
  • a11y, i18n 与合规:构建负责任的全球化应用
  • 进阶专题(按业务需要选做)
Notes
Notes /react/09-react-18-in-practice

React 18 实战(并发特性与默认行为)

目标:把 React 18 在真实业务中的“默认行为变化”和“并发能力的正确用法”讲清楚,避免线上时序/体验/第三方库集成问题。

目录

  • 自动批处理(Automatic Batching)与 flushSync
  • StrictMode:为什么会“双调用”?(源码/机制视角)
  • Transition:startTransition / useTransition / useDeferredValue(机制视角)
  • Suspense:加载态边界如何设计(机制/架构视角)
  • Error Boundary:兜底、重试与上报(自研 vs Sentry)(机制/架构视角)
← Error Boundary:兜底、重试与上报(自研 vs Sentry)(机制/架构视角)路由与 URL State:统一心智模型(架构师视角) →
cd ..
本页目录
  • 目录