精通 React 面试：从零到中高级

React.js 的面试往往不只是聊聊"会不会写组件"这么简单，它的覆盖面可以很广：从最基础的 JSX、虚拟 DOM、props/state，一直到状态管理、性能优化、路由、表单、错误边界、甚至团队实践的最佳范式。很多开发者真正"卡住"的地方，并不是不会写 React，而是没有按照面试官的深度来准备------也就是说，他们知道概念，但不知道面试官会怎么问、问到什么层级、要不要写代码、要不要结合项目场景说。

这本小册要解决的，正是这个"知道一点 React，但不知道怎样答得像一个成熟前端"的问题。

下面几点，是这本书的核心价值所在：

来自真实技术面试的一手洞察你会看到企业在招 React.js 开发时反复考察的几个模式：比如为什么老是问到组件复用、为什么会纠结 state 和 props 的区别、为什么会问受控/非受控组件、为什么会问你是不是用过 React DevTools。这些都不是偶然的，它们背后就是面试官的"判断模板"。
覆盖从基础到进阶的完整路径书里既有 JSX、组件、虚拟 DOM、生命周期这些"必问基础"，也有 Hooks、性能优化、路由保护、全局状态管理这些"进阶与工程化"内容，因此不管你是 0-1 还是 1-3 年，都能在对应的章节找到能补齐的点。
贴近实战的练习方式每一类知识点都会配合问题的问法，帮助你学会"怎么答、答多长、答到哪层、答到项目上怎样说"。很多人面试失败不是因为不会，而是不知道"应该这样说出来"。
结合真实业务场景的讲解面试官经常会说一句话："你说的都对，但是你做过吗？"------也就是说，理论答案不是全部，你需要能说出来"在什么场景下我真的用过它、为什么当时要这样设计、当时遇到过什么坑"。本书会给你这种"落地视角"。
帮你规避一些低级但致命的失误其实不少候选人并不是实力不行，而是：答题太发散、概念混用、分不清 React 和浏览器原生的职责、面试中临时想术语、没办法把 hook、性能和业务串起来。本书在每个大块里都会提醒这些常见误区。

一句话说，这不是一本"只讲 React 的书"，而是一份帮你通过 React 面试的策略型资料：它带你过知识点，也教你怎么答，最后让你能把这些回答变成职业上的下一步。

你会在这小册里学到什么？

这本书的目标，是让你在面试里既讲得清楚，又讲得像真的做过项目。读完后，你应该能做到：概念说得顺、原理说得通、场景说得上、代码写得出。

下面是全书的能力地图，对应你之前看到的 10 个大部分：

1. React 核心概念（Core React Concepts）

搞清楚 React.js 到底解决什么问题、JSX 为什么不是模板而是语法糖、虚拟 DOM 的价值点在哪里。
分辨 元素（Element） 和 组件（Component） 的差别，知道什么时候写函数、什么时候抽组件、什么时候只写一个简单结构。
理解列表渲染里 key 属性 为什么重要，它对性能、对 DOM diff、对组件状态的影响分别是什么。
学会用 state、props、生命周期/Hook 来构建真正"动起来"的界面，而不是只能写静态页面。

2. 渲染与复用（Rendering and Reusability）

了解为什么 Fragment 比多包一层 <div> 更好，尤其是在构建语义化结构、配合样式、减少无意义节点时。
学会设计可复用组件 、高阶组件（HOC），理解什么时候应该往上抽逻辑、什么时候用 children、什么时候用 render props。
使用条件渲染 、children prop 等方式，让组件更加灵活、能适配更多业务场景，从而在面试中展示"工程意识"。

3. 生命周期与 Hooks（Lifecycle and Hooks）

掌握类组件时代的生命周期模型，同时理解 Hook 出现后这些生命周期是怎么被"能力化"的。
熟练使用核心 Hook：useState、useEffect、useContext、useReducer，能说清各自的适用场景。
了解进阶 Hook：useId、useRef、useCallback 等，知道它们是在解决性能、标识、引用稳定性这类更细粒度的问题。
会用 React Developer Tools 来排查渲染、观察 props/state 变化，这在"现场手写/调试"型面试中很加分。

4. React 中的样式处理（Styling in React）

掌握几种主流写法：行内样式 、CSS Modules 、工具类优先（Tailwind CSS），知道各自的优劣和面试官可能的追问点。
学会在大型界面下管理 class（比如用 clsx、classnames），避免 className 一条长到没法维护。
了解 ShadCN 这类基于 Tailwind 的组件体系，知道怎么在面试中说"我们团队是怎么做可访问性和主题化的"。

5. 事件处理（Event Handling）

分清楚 React 事件 和 原生 HTML 事件 的区别，知道 React 有一层 合成事件（Synthetic Events）。
能写出内联事件处理 、条件事件处理，并说出它们的性能注意点。
会用 useRef 做更精细的事件交互控制。

6. 表单与用户输入（Forms and User Input）

正确处理受控组件、非受控组件，知道什么时候用哪一种，知道文件上传、第三方 UI 组件为什么经常要用 ref。
能在一个组件里处理多个表单字段，并保持状态清晰。
掌握表单校验、focus 管理，以及 React 里比较新的如 useActionState、useFormStatus 这类和交互状态有关的 Hook。

7. 性能与优化（Performance and Optimization）

会用 React.memo、useMemo、useCallback 来做渲染层面的优化，并且能说清楚"什么时候不要乱用"。
会用 React.lazy 和 Suspense 做按需加载 / 懒加载，让面试官看到你有前端性能的意识。
懂得用 React Profiler 来定位性能瓶颈，这点在资深/中级面试里经常被问。

8. 错误处理与调试（Error Handling and Debugging）

能解释什么是 错误边界（Error Boundary），在哪些情况下必须用。
会讲 React 应用的调试路径：浏览器 DevTools → React DevTools → 网络/接口 → 渲染错误。
能说出表单、接口请求、渲染失败这几类错误分别怎么兜底。

9. 路由与导航（Routing / React Router）

熟悉 React Router 的核心用法，能写带参数的路由（例如 /users/:id）。
知道怎么做受保护路由 、怎么接入鉴权逻辑。
能分清 useParams 和 useSearchParams 的适用场景。

10. 全局状态管理（Global State Management）

能说清楚什么时候不需要 上 Redux / Zustand / Recoil，直接用本地状态和 useContext 就够了。
能比较 useContext + useReducer 和"专用状态库"的取舍。
知道为什么现在大家都推荐 **Redux Toolkit (RTK)**，而不是手撸原生 Redux：因为它把很多样板代码都收敛了，写法更规范。

React.js 面试指南目录

第1章 React 核心概念

什么是 ReactJS？
什么是 JSX？
Element 与组件（Component）有什么区别？
什么是虚拟 DOM（Virtual DOM），它是如何工作的？
列表中的 "key" 属性是什么？为什么它很重要？
什么是受控组件和非受控组件？
React.js 中的 createRoot 方法是什么？它是如何运作的？
什么是 React.js 的 StrictMode（严格模式）？
React 中的 state 是什么，应当如何使用？
React 中的 props 是什么？如何向组件传递 props？
在 React.js 中，state 和 props 有什么区别？
如何在 React 中"提升状态"（lift state up）？
在 React 中如何更新 state？
React 中函数组件和类组件有什么区别？

第2章渲染与复用

React 中的 Fragments 是什么？为什么要用它们？
为什么 Fragments 比额外包一层 div 更好？
在 React 中如何进行条件渲染？
什么是 children prop？如何使用它？
如何在 JSX 中进行循环？
什么是可复用组件？如何创建它们？
什么是高阶组件（HOCs）？它们如何使用？
React.js 中的 Pure Component 是什么？

第3章生命周期与 Hook

React 组件的生命周期是什么？
什么是 React Hooks？它们为什么被引入？
什么是 useState Hook？如何使用它？
什么是 useEffect Hook？如何使用它？
useEffect 和 useLayoutEffect 有什么区别？
什么是 useId Hook？如何使用？
useContext 是如何工作的？
什么是 use，如何使用？
在函数组件中如何使用多个 state 变量？
什么是 React Developer Tools？

第4章 React 中的样式处理

如何在 React 中使用行内样式（inline styles）？
什么是 CSS Modules？如何在 React 中使用它们？

如何合并多个行内样式对象？

如果一个 React 应用大量使用行内样式，如何做性能优化？
什么是 Tailwind CSS？它与传统 CSS 或诸如 Bootstrap 之类的框架有什么不同？
在使用 Tailwind CSS 时，如何处理很长的 className 字符串以提升可读性？
在多个项目中使用 Tailwind CSS 时，如何做主题（如品牌色）？
在 React + Tailwind 中，哪些工具或库可以帮助管理条件 className（如 clsx 或 classnames）？
Tailwind CSS 如何处理响应式设计？能否给出一个让按钮响应式的示例？
什么是 ShadCN？它如何与 Tailwind CSS 集成以简化构建可访问、可定制的 React 组件？
与传统的工具类写法或 Material-UI 等其他组件库相比，使用 ShadCN 在可扩展性和可维护性上有哪些优势？

第5章事件处理

HTML 与 React 的事件处理有什么区别？
React 中的合成事件（Synthetic Events）是什么？
什么是内联条件表达式？它们在事件处理函数中如何使用？
如何在 React 中使用内联函数处理事件？
在 React 中优化事件处理函数有哪些最佳实践？
React.js 中的 useRef Hook 是什么？

第6章表单与用户输入

如何在 React 中处理表单？
表单元素中的 onChange 事件有什么作用？在 React 中怎么用？
表单元素中的 ref 属性是做什么的？在 React 中如何使用？
如何在同一个 React 组件中处理多个表单输入？
如何在 React 中校验表单输入？
如何在 React 中管理表单输入的焦点状态？
React 表单中的 defaultValue 属性是什么？
什么是 React.js 中的 form 组件？
React 中的 useActionState Hook 是什么？如何使用？
React 中的 useFormStatus Hook 是什么？如何使用？

第7章性能与优化

什么是 React.lazy？它是如何工作的？
什么是 Suspense？它是如何工作的？
什么是 React.memo？它是如何运作的？
什么是 React.useMemo？它是如何运作的？
什么是 React.useCallback？它是如何运作的？
如何对一个 React 应用做性能优化？
什么是 React Profiler？如何使用它？
React 中的 reconciliation（协调）是什么？
在 React 中如何避免 prop drilling（属性层层下传）？

第8章错误处理与调试

如何在 React 组件中处理错误？
如何调试一个 React 应用？
在 React 中处理表单校验错误的最佳方式是什么？
开发者在 React 中进行错误处理时常见的错误有哪些？

第9章路由与导航

什么是 React Router？
如何在 React Router 中通过 URL 传参（例如 /users/:id）？
<Link> 和 <NavLink> 有什么区别？
如何在 React Router v7 中使用鉴权逻辑来保护路由？
什么是布局路由（layout routes），它们如何工作？
useParams() 和 useSearchParams() 有什么区别？

第10章全局状态管理

什么是全局状态？它与 React 组件的本地状态有什么区别？
在哪些情况下其实没必要使用全局状态管理方案？
使用 useContext + useReducer 有哪些取舍？
与专门的状态管理库（如 Redux、Zustand、Mobx 或 Recoil）相比，useContext + useReducer 有哪些权衡？
为什么推荐使用 Redux Toolkit（RTK），而不是原生 Redux？
useSelector 是如何工作的？在 Redux 中如何避免不必要的重新渲染？

1111