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。使用条件渲染、childrenprop 等方式让组件更加灵活、能适配更多业务场景从而在面试中展示“工程意识”。3. 生命周期与 HooksLifecycle and Hooks掌握类组件时代的生命周期模型同时理解 Hook 出现后这些生命周期是怎么被“能力化”的。熟练使用核心 HookuseState、useEffect、useContext、useReducer能说清各自的适用场景。了解进阶 HookuseId、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什么是 JSXElement 与组件Component有什么区别什么是虚拟 DOMVirtual DOM它是如何工作的列表中的 key 属性是什么为什么它很重要什么是受控组件和非受控组件React.js 中的createRoot方法是什么它是如何运作的什么是 React.js 的 StrictMode严格模式React 中的 state 是什么应当如何使用React 中的 props 是什么如何向组件传递 props在 React.js 中state 和 props 有什么区别如何在 React 中“提升状态”lift state up在 React 中如何更新 stateReact 中函数组件和类组件有什么区别第2章 渲染与复用React 中的 Fragments 是什么为什么要用它们为什么 Fragments 比额外包一层 div 更好在 React 中如何进行条件渲染什么是childrenprop如何使用它如何在 JSX 中进行循环什么是可复用组件如何创建它们什么是高阶组件HOCs它们如何使用React.js 中的 Pure Component 是什么第3章 生命周期与 HookReact 组件的生命周期是什么什么是 React Hooks它们为什么被引入什么是useStateHook如何使用它什么是useEffectHook如何使用它useEffect和useLayoutEffect有什么区别什么是useIdHook如何使用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或classnamesTailwind CSS 如何处理响应式设计能否给出一个让按钮响应式的示例什么是 ShadCN它如何与 Tailwind CSS 集成以简化构建可访问、可定制的 React 组件与传统的工具类写法或 Material-UI 等其他组件库相比使用 ShadCN 在可扩展性和可维护性上有哪些优势第5章 事件处理HTML 与 React 的事件处理有什么区别React 中的合成事件Synthetic Events是什么什么是内联条件表达式它们在事件处理函数中如何使用如何在 React 中使用内联函数处理事件在 React 中优化事件处理函数有哪些最佳实践React.js 中的useRefHook 是什么第6章 表单与用户输入如何在 React 中处理表单表单元素中的onChange事件有什么作用在 React 中怎么用表单元素中的ref属性是做什么的在 React 中如何使用如何在同一个 React 组件中处理多个表单输入如何在 React 中校验表单输入如何在 React 中管理表单输入的焦点状态React 表单中的defaultValue属性是什么什么是 React.js 中的 form 组件React 中的useActionStateHook 是什么如何使用React 中的useFormStatusHook 是什么如何使用第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/:idLink和NavLink有什么区别如何在 React Router v7 中使用鉴权逻辑来保护路由什么是布局路由layout routes它们如何工作useParams()和useSearchParams()有什么区别第10章 全局状态管理什么是全局状态它与 React 组件的本地状态有什么区别在哪些情况下其实没必要使用全局状态管理方案使用useContext useReducer有哪些取舍与专门的状态管理库如 Redux、Zustand、Mobx 或 Recoil相比useContext useReducer有哪些权衡为什么推荐使用 Redux ToolkitRTK而不是原生 ReduxuseSelector是如何工作的在 Redux 中如何避免不必要的重新渲染1111