React 参考手册

最后更新：2026-10-28

React 参考手册

按字母序排列的 80 个 React 条目：核心概念、渲染与状态、组件模式、副作用与性能、路由与状态管理、数据与工程化、生态与进阶，每条配语法、可运行示例与在线编辑器。

A
AbortController	AbortController 是浏览器原生 API：把它的 signal 传给 fetch，调用 abort() 即可中途取消请求。组件卸载、参数变化、搜索防抖场景里，取消过期请...
Action Design	action 是「发生了什么」的描述对象：type 是唯一标识（常用大写常量），payload 携带数据。好的 action 设计让 reducer 像 switch 目录一样可读...
B
BrowserRouter	BrowserRouter 是 react-router-dom 的路由容器：监听地址变化，把当前 location 通过 Context 提供给整棵组件树。它必须包在应用最外层，...
C
Callback Props	props 不只能传数据，还能传函数。子组件在合适的时机调用父组件传入的回调，把自己的变化「上报」，实现子改父状态——这是 React 单向数据流下子父通信的常规方式。
children	children 是一个特殊的 prop：组件开闭标签之间的内容会自动成为 props.children。它让组件可以「包裹」任意内容，是布局组件、弹窗、卡片等通用容器的基础机制。
Cleanup Function	清理函数是 effect 返回的收尾函数：在下次 effect 执行前、组件卸载时各执行一次，用于取消定时器、退订事件、中断请求。没有清理，副作用会在组件消失后继续运行，造成泄漏。
Component	组件是 React 应用的最小复用单元：一个接收 props、返回 JSX 的函数。把界面拆成一个个组件后，各部分可以独立开发、测试与复用，像搭积木一样组合出完整页面。
Component Tree	React 应用由组件嵌套组成一棵树：根组件在顶部，子组件层层向下。数据沿树单向向下流动（通过 props），理解这棵树有助于规划组件拆分粒度和状态应该放在哪一层。
Composition	React 推荐用组合而非继承复用组件：父组件把 JSX 作为 children 或自定义 prop 传进来，由通用容器（Card、Layout、Modal）决定「放哪里」，调用方...
Conditional Rendering	React 里没有 if 标签：条件渲染就是把 if、三元、&& 等普通 JS 逻辑写进 JSX，根据状态决定渲染哪一块 UI 或返回 null。同一组件因此能在不同情况下呈现完全...
Controlled Components	受控组件指表单元素的值由 React state 驱动：value 绑定 state，onChange 里更新 state，形成「数据单向流 + 事件回写」的闭环。它是 React...
createContext	createContext 创建一个 Context 对象，用于跨层级传递数据而不必逐层写 props。它自带 Provider 组件向下广播 value，配套 useContex...
CSS Modules	CSS Modules 把普通 CSS 文件变成局部作用域：类名在构建时被编译成「文件名_类名_哈希」的唯一标识，组件之间天然隔离，告别全局样式污染。React 中以 styles...
Custom Hooks	自定义 Hook 是名字以 use 开头的普通函数，内部可以调用其他 Hook，把有状态的逻辑（请求、防抖、持久化、开关）抽成可复用单元。每次调用各自拥有独立的 state——复用...
D
Declarative UI	声明式 UI 指你只「描述界面在某个状态下长什么样」，不手写一步步的 DOM 操作；状态一变，React 自动把界面更新到位。相比命令式（jQuery 式查改 DOM），代码更可预...
Default Props	父组件没传某个 prop 时其值为 undefined，界面可能出现空白或报错。用解构默认值（或 ??）为可选 prop 提供兜底，能让组件在缺参时依然表现合理、接口更友好。
Dependency Array	依赖数组告诉 effect「为谁而跑」：空数组只跑一次，列出变量则在任一变化时重跑。心智模型是「effect 随依赖同步」——effect 里读取的响应式值，就应如实出现在数组里。
Dynamic Forms	字段数量不定时，用 state 里的数组驱动渲染：每个字段存一条记录，增删就是增删数组元素，更新某一字段时按 id map 替换。配合稳定 key，React 能正确复用各行的输入...
E
Effect Pitfalls	useEffect 的坑集中在依赖数组：漏写依赖读到旧值、在 Effect 里 setState 又被依赖触发造成死循环、依赖写成对象或函数每次都是新引用、忘记 cleanup 导...
Entry File	入口文件（通常是 src/main.jsx）是整个 React 应用的起点：它把根组件挂载到 index.html 里指定的 DOM 节点上。日常开发很少改动它，但理解挂载流程有助...
ErrorBoundary	ErrorBoundary 是组件级的安全网：子组件树抛错时接住异常、渲染兜底 UI，而不是让整页白屏。它是 class 组件（getDerivedStateFromError /...
Event Handling	React 用小驼峰的 onXxx 属性绑定事件（onClick、onChange 等），值为一个函数。事件触发时处理函数通常读取输入或调用 setState，让界面响应用户操作—...
Event Parameters	事件处理函数能拿到事件对象 e，从中读取 target.value、key 等信息。需要额外传参时用箭头函数包裹：onClick={() => fn(id)}，避免写成 fn(id...
Event Types	事件类型来自 @types/react：onClick 标 MouseEvent<HTMLButtonElement>，onChange 标 ChangeEvent<HTMLInp...
F
Filter & Sort Lists	列表的筛选与排序不在渲染时改原数组，而是用 filter、sort 等方法派生新数组再渲染。保持原始数据不变、展示时计算结果，是 React 处理列表的核心思路。
Form Inputs	text、checkbox、select、textarea 都走「value/checked + onChange」一套逻辑，但取值不同：文本读 e.target.value，勾选...
Form Validation	校验的本质是「从 state 推导错误」：用校验函数算出 errors 对象，提交前整体检查一遍，有错误就阻止提交并渲染提示。错误信息也是 UI，交给条件渲染即可，无需命令式操作 ...
forwardRef	函数组件默认不接收 ref。forwardRef 把父组件传入的 ref 转发给内部某个 DOM 节点，让「自定义输入框、按钮」这类封装组件也能像原生元素一样被聚焦、测量。Reac...
Framer Motion	Framer Motion（新包名 motion）是 React 最流行的动效库：用 motion.div 声明初始、目标与过渡参数即可自动补间；AnimatePresence 处...
Functional Updates	给 setState 传函数（如 setCount(c => c + 1)）表示「基于最新前值计算下一次状态」。同一事件里连续多次更新，或在定时器等异步闭包中使用状态时，必须用这种...
G
Generic Components	泛型组件让类型跟着数据走：function List<T> 渲染字符串数组时 T=string，渲染对象数组时 T=User。一次编写，任何元素类型都获得完整类型推导与提示，是通用...
J
JSX	JSX 是 JavaScript 的语法扩展，让你在 JS 里直接书写类似 HTML 的界面结构。它最终被编译成普通函数调用，用来描述「界面在当前状态下长什么样」。所有 React...
JSX vs HTML	JSX 看起来像 HTML，但有几处关键差异：属性用小驼峰命名、class 要写 className、style 接收对象、标签必须闭合。提前记住这些差异，能避开新手最常见的编译报...
K
key	key 是列表渲染时给每个元素的身份标识。React 靠它识别「哪些项变了、哪些项该移动或删除」，用错会导致状态错位、输入框串位等问题。key 必须在同列表内唯一且稳定。
L
List Rendering	React 用 map() 把数组转换成一组 JSX 元素实现列表渲染：准备一个数据数组，为每一项返回带唯一 key 的 JSX，就能把任意集合渲染成列表，数据一变列表自动更新。
M
Multi-Step Forms	分步表单 = 一个 step 状态 + 条件渲染当前步骤 + 各步数据统一放进一个表单 state。每步先做局部校验再前进，最后一步一次性提交全部数据，切步时数据不丢失。
N
NavLink	NavLink 是带「激活态」的 Link：当前地址匹配其 to 时，自动给渲染出的 a 标签加 active 类名（或调用 className 函数）。导航栏、侧边栏用它实现当前...
Nested Lists	当数据是「分类里套条目」的多层结构时，用 map 中再 map 或递归组件渲染嵌套列表。每一层各自维护 key，层层缩进展示层级关系，常见于菜单、评论树、文件树等场景。
Nested Routes	嵌套路由把「布局 + 子页面」表达成父子 Route：父 Route 内再写子 Route，父组件里用 Outlet 画一个「坑位」，命中的子路由页面就渲染进坑位。侧边栏固定、内容...
Next.js App Router	App Router 是 Next.js 13+ 的文件约定路由：app/ 下每个文件夹即一个 URL 片段，page.tsx 定义页面，layout.tsx 是不重渲染的共享布局...
Next.js Data Fetching	Next.js 服务端组件可直接 await fetch 取数，并用 next.revalidate 控制缓存策略：SSG、ISR 与 SSR 由同一套 API 表达。缓存是默认行...
Next.js Deploy	Next.js 部署首选 Vercel（零配置支持 ISR、图片优化与边缘函数），也可自托管 Node 或静态导出。上线前通用清单：环境变量、生产构建、SEO 元数据与域名 HTT...
O
Object & Array State	state 必须替换成「新对象 / 新数组」才能触发更新：改对象用展开运算符覆盖字段，改数组用展开、map、filter 创建新数组。直接原地修改，React 察觉不到变化，界面不...
P
preventDefault	e.preventDefault() 阻止事件的浏览器默认动作，最典型的是表单提交导致的整页刷新。React 表单几乎都在 onSubmit 里先调用它，再用受控状态处理数据，实现...
Props	props 是父组件传给子组件的数据，像函数参数一样只读。子组件通过 props 接收文本、数字、对象甚至组件，从而在不同场景渲染不同内容——这是 React 数据流的基础机制。
ProtectedRoute	路由守卫是「进入页面前先检查权限」的模式：包一层 ProtectedRoute，未登录就重定向到 /login 并记录来源页，登录后回跳。React 没有内置守卫，靠条件渲染 + ...
Provider Pattern	Provider 模式把「数据 + 修改方法」封装成有状态的 Provider 组件和配套 Hook：内部用 useState/useReducer 管状态，经 Context 向...
R
React DevTools	React DevTools 是官方浏览器扩展：能像检查 DOM 一样检查组件树，查看每个组件的 props、state 与 hooks 值，还能用 Profiler 分析哪次渲染...
React.lazy	React.lazy(() => import('./Page')) 把组件变成「用到才加载」的代码块，配合 Suspense 的 fallback 显示占位 UI。首屏只打包首页...
React.memo	React.memo 包裹组件后，props 浅比较不变即跳过重渲染，直接复用上次输出。适合「渲染贵、props 常稳定」的子组件；父组件频繁刷新（输入、鼠标移动）时收益最明显。
Reducer Patterns	reducer 的几个惯用模式：惰性初始化（第三参传 init 函数）、对象/数组状态的不可变更新、派生值渲染时现算不冗余存储、用 reset action 或换 key 重置整棵...
Redux Toolkit	Redux Toolkit（RTK）是 Redux 官方推荐写法：createSlice 一步生成 reducer 与 action，configureStore 自动配好 dev...
Render Props	render props 指「把要渲染的 JSX 当函数 prop 传给组件」：组件负责逻辑与状态，调用方用函数参数拿到数据决定渲染什么。它把逻辑复用和 UI 定制彻底解耦，是 H...
Rendering Model	React 的更新分两步：先执行组件函数得到新的 JSX（render），再把与上一次的差异提交到真实 DOM（commit）。触发条件包括状态更新、订阅的 Context 变化或...
Rules of Hooks	Hooks 只有两条铁律：只在函数组件或自定义 Hook 的最顶层调用，不要放进循环、条件或嵌套函数；只在 React 函数中调用，不要在普通 JS 函数里调用。React 靠「调...
S
styled-components	styled-components 是 CSS-in-JS 的代表：用模板字符串把 CSS 写进 JS，样式化组件自带唯一类名与作用域，可通过 props 做条件样式，主题经 Th...
T
Tailwind in React	Tailwind CSS 是原子化 CSS 框架：把样式拆成单一用途的类名直接写进 className。React 中配合条件拼接可在 JSX 内完成全部样式表达，无需切换文件；J...
Three-State Fetching	任何数据请求都有三种状态：loading（请求中）、success（拿到数据）、error（失败）。UI 必须为三态各准备一帧，缺任何一态都会出现白屏、死等或无声失败。这是手写 f...
Typed Props	TypeScript 下用 interface/type 给 props 建类型契约：编译期就抓出「传错名、漏传、类型不符」，编辑器还有自动补全。定义一个类型形状标在组件参数上即可...
U
UI Libraries	React 组件库分两类思路：完整库（Ant Design、MUI、shadcn/ui）开箱即用，视觉行为由库统一；无头库（Radix、Headless UI）只给逻辑与可访问性，...
useCallback	useCallback 缓存函数引用：依赖不变时返回同一个函数。把回调传给 memo 优化过的子组件时，它能阻止「父组件一渲染、子组件白渲染」——因为每次新建的函数引用会让 mem...
useContext	useContext 接收 createContext 创建的 Context 对象，返回最近上游 Provider 的 value；无 Provider 时返回默认值。它让深层组...
useDebounce	useDebounce 接收一个高频变化的值（如搜索框输入），延迟 N 毫秒后才返回「稳定版」值：期间值再变就重新计时。用它驱动请求可以大幅减少无效调用，是搜索、联想、窗口缩放场景...
useEffect	useEffect 把「渲染之外的事」——数据请求、订阅、定时器、直接操作 DOM——收进一个声明式入口。它在渲染完成后执行，并可通过返回的清理函数在下次执行前或卸载时收尾。
useFetch Pattern	把三态请求逻辑抽成 useFetch(url) 自定义 Hook：组件一行调用拿到 { data, loading, error }，请求状态不再散落各处。这是「逻辑复用」的经典案...
useLocalStorage	useLocalStorage 把 useState 的读写同步到 localStorage：初始化时惰性读取已存值，更新时自动写回磁盘，刷新页面后状态仍在。它是「自定义 Hook...
useMemo	useMemo 缓存计算结果：依赖不变时直接返回上次结果，跳过昂贵的过滤、排序、映射，也用于保持对象/数组的引用稳定（配合依赖数组和 memo 子组件）。它是性能优化手段，不是语义...
useMutation	useMutation 管理写操作（POST/PUT/DELETE）的异步状态：mutate 触发请求，isPending/isError 反馈进度，onSuccess 失效相关查...
useNavigate	useNavigate 返回跳转函数 navigate：登录后进首页、提交后回列表、拦截未登录用户——这些「代码触发的跳转」都用它。navigate(to) 前进，navigate...
useParams	useParams 返回当前匹配路由的动态段对象：路由写成 /users/:id 时，访问 /users/42 就能拿到 { id: '42' }。详情页、编辑页读取「这一条数据是...
useQuery	TanStack Query 的 useQuery 管理整个「请求生命周期 + 缓存」：自动去重、后台刷新，staleTime 控制数据多久算新鲜，invalidateQuerie...
useReducer	useReducer 把「状态怎么变」集中到一个纯函数 reducer 里：dispatch(action) 触发，reducer 依 action 算出新状态。状态迁移多、逻辑复...
useRef	useRef 返回一个 { current } 容器：跨渲染持久保存任意值，修改它不会触发重渲染。最常见用途是拿到 DOM 节点（聚焦、测量、滚动），其次是存放定时器 id 等不参...
useRef as Container	useRef 不只挂 DOM：它是跨渲染的「便签盒」，适合存定时器 id、上一次的值、是否已挂载等「变了但不想引起重渲染」的数据。比 state 轻量，比模块级变量安全（组件实例间...
useState	useState 为函数组件添加状态变量：返回「当前值」与「更新函数」，状态变化即触发组件重渲染。任何随交互变化的界面数据——输入框内容、开关、计数——都由它管理。
V
Virtual DOM	虚拟 DOM 是 React 在内存里维护的一棵轻量 JS 对象树，用来描述真实界面。状态变化时先「算出」新树、与旧树比对差异，再把差异提交到真实 DOM，用最小的代价完成界面更新...
Vite Setup	Vite 是目前创建 React 项目的主流脚手架：一条命令生成带热更新的开发环境，启动与构建速度远快于旧方案 CRA。无论是学习还是新项目上线，都推荐从它开始。
Vitest + RTL	Vitest 是跑得飞快的测试运行器（与 Vite 共用配置），React Testing Library 让你「像用户一样」测组件：render 挂载、getByRole 查询、...
W
When Not to Memo	memo/useMemo/useCallback 不是免费午餐：比较与缓存有成本，代码也更难读。多数组件渲染本来就便宜，直接重渲染反而更快。掌握「什么时候不用」，比到处加 memo...
Z
Zustand	Zustand 是极简全局状态库：create 定义一个 store，组件里像自定义 Hook 一样调用，跨组件共享且天然绕开 Provider。核心只有 set/get 两个函数...

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们

React 参考手册

React 参考手册

🙏 帮我们做得更好