术语表

按主题分组的 React 关键术语速查。括号内为出处知识点。

心智模型与渲染

• 声明式（Declarative）：描述目标状态而非操作步骤的编程范式，React 的世界观。（kp-001）
• UI = f(state)：界面是状态的纯函数；f 的输入是 props 与 state。（kp-001）
• 虚拟 DOM（Virtual DOM）：组件函数产出的 UI 描述对象树，真实 DOM 的轻量投影。（kp-008）
• 协调（Reconciliation）：新旧虚拟 DOM 树的 diff 过程，产出最小变更集。（kp-008）
• Fiber：React 内部的可中断工作单元架构，支撑并发渲染。（kp-008/022）
• 渲染阶段（Render Phase）：调用组件函数构建新树的阶段，可中断、可丢弃。（kp-008）
• 提交阶段（Commit Phase）：把变更一次性写入真实 DOM 的阶段，同步不可中断。（kp-008）
• 触发（Trigger）：引发重渲染的三类来源——自身 state、父组件渲染、context 变化。（kp-008/019）

状态与数据流

• Props：父传子的只读输入，组件的"函数参数"。（kp-004）
• State（状态）：组件私有记忆，经 setter 更新。（kp-005）
• 快照（Snapshot）：每次渲染定格的 state 值；异步回调读到的可能是旧快照。（kp-005/014）
• 函数式更新：setX(prev => ...) 基于排队时最新值计算。（kp-005）
• 不可变更新（Immutable Update）：创建新引用而非修改原值，React 靠 Object.is 判断变化。（kp-005）
• 状态提升（Lifting State Up）：把共享状态移到最近的共同父组件。（kp-004）
• Prop Drilling：props 穿过多层不关心它的组件，改用 Context 的信号。（kp-004/012）
• 受控组件（Controlled）：表单值由 React state 驱动。（kp-011）
• 非受控组件（Uncontrolled）：值留在 DOM，用 ref 读取。（kp-011/017）
• Reducer：纯函数 (state, action) => state，集中管理状态转移。（kp-016）
• Action / Dispatch：描述意图的对象 / 发出意图的函数。（kp-016）
• 服务端状态（Server State）：远端数据的本地快照，会过期，应交给数据层管理。（kp-021）

Hooks

• Hook：让函数组件获得状态与副作用的函数；只能在 React 函数顶层调用。（kp-014）
• Hooks 链表：React 按调用顺序记录每个 Hook 的状态，顺序不可变。（kp-014）
• useState / useReducer / useRef / useContext：四大基础 Hook。（kp-005/016/017/012）
• useEffect：与外部系统同步的副作用钩子，提交并绘制后异步执行。（kp-010）
• useLayoutEffect：提交后、绘制前同步执行的 effect，用于测量与防闪烁。（kp-010）
• 依赖数组（Dependency Array）：effect 的"同步触发器"，必须诚实完整。（kp-010/014）
• 清理函数（Cleanup）：effect 返回的回收函数，先于重跑、用于卸载。（kp-010）
• stale closure（过期闭包）：异步回调捕获了旧渲染的变量值。（kp-014）
• 自定义 Hook（Custom Hook）：use 前缀、复用行为逻辑的函数；每次调用状态独立。（kp-015）
• useSyncExternalStore：并发安全地订阅外部 store 的官方 API。（kp-022）

并发与性能

• 并发渲染（Concurrent Rendering）：可中断、分优先级、可重放的渲染模式。（kp-022）
• 时间切片（Time Slicing）：把长渲染拆成小片段让路给输入事件。（kp-022）
• 过渡更新（Transition）：标记为非紧急的更新，可被抢占但保证最终呈现。（kp-022/023）
• useTransition：把一组 setState 标记为过渡，并提供 isPending。（kp-023）
• useDeferredValue：让某个值的下游渲染延后一拍。（kp-023）
• 记忆化（Memoization）：useMemo（缓存计算）/ useCallback（缓存函数引用）/ memo（缓存组件渲染）。（kp-018）
• 浅比较（Shallow Compare）：memo 的 props 对比方式，内联对象/函数会击穿。（kp-018）
• 虚拟化（Virtualization）：只渲染视口内的列表行，长列表第一杠杆。（kp-019）
• 代码分割（Code Splitting）：React.lazy + Suspense 按需加载组件。（kp-019/020）

边界与加载

• Suspense：声明「子树未就绪时显示什么」的边界组件。（kp-020）
• Error Boundary：捕获渲染期错误并显示降级 UI 的类组件（或库包装）。（kp-020）
• Fallback：Suspense/Boundary 的占位 UI。（kp-020）
• 竞态（Race Condition）：并发请求乱序返回导致旧数据覆盖新数据；用 ignore 守卫或 AbortController。（kp-010）

服务端与新范式

• RSC（React Server Components）：只在服务端运行、产物序列化下发的组件。（kp-024）
• Client Component：'use client' 标注、拥有状态与浏览器 API 的组件（仍会做 SSR）。（kp-024）
• RSC 载荷（RSC Payload）：服务端产出的序列化组件树流。（kp-024）
• Server Action：'use server' 标注、可从客户端调用的服务端函数。（kp-025）
• Actions：React 19 的表单异步提交范式：action + useActionState + useOptimistic。（kp-025）
• useActionState：[state, formAction, isPending] 三件套。（kp-025）
• useOptimistic：乐观显示、失败自动回滚的 Hook。（kp-025）
• use()：渲染期间读取 Promise/Context 的 API。（kp-025）
• React Compiler：自动记忆化编译器（状态以官方发布为准）。（kp-018/025）
• 元框架（Meta-framework）：Next.js/Remix 等，为 React 补齐路由/构建/渲染策略。（kp-026）
• App Router：Next.js 的文件约定路由体系（page/layout/loading/error）。（kp-026）
• Hydration：客户端为服务端产出的 HTML 绑定事件与状态的过程。（kp-024/026）

工程与测试

• 组件树（Component Tree）：组件嵌套形成的树，渲染沿树自顶向下。（kp-003）
• 组合（Composition）：用 children/slot 让使用者定制内容的设计方式。（kp-013）
• children：承载 JSX 子内容的特殊 prop。（kp-013）
• useImperativeHandle：向父组件暴露受控的命令式 API 子集。（kp-017）
• StrictMode：开发模式故意双调用以暴露不纯与副作用问题。（kp-003/010）
• Testing Library：按用户可见行为测试组件的库。（kp-027）
• MSW（Mock Service Worker）：在网络边界 mock API 的工具。（kp-027）