这份清单汇总了我会问候选人、以及我经常被问到的 React 面试题。既可自测，也能作为面试前速览。
目录
什么是 React？
React 的优势有哪些？
React 的劣势是什么？
什么是 JSX？
组件之间如何传递数据？
函数组件与类组件有何区别？
什么是虚拟 DOM？
Shadow DOM 和虚拟 DOM 一样吗？
什么是 “React Fiber”？
state 与 props 有何不同？
受控组件与非受控组件的区别？
React 存在哪些生命周期方法？
如何提升 React 应用性能？
React 中的 key 是做什么的？
什么是高阶组件（HOC）？
什么是错误边界（Error Boundaries）？
为什么引入 Hooks？
useEffect 的用途是什么？
什么是合成事件（SyntheticEvent）？
ref 有什么用？
1) 什么是 React？
React 是一个用于构建用户界面的 JavaScript 库，最初由 Facebook 于 2011 年推出。它只关注 MVC 中的 V（视图层），因此更接近开源 UI 库而非“全家桶”框架。
2) React 的优势有哪些？
性能不错：依托虚拟 DOM 与高效的更新策略（见 #7/#9）。
上手门槛低：懂 JS 就能开干；相比之下，Angular 通常需要配合 RxJS、TypeScript、DI 等概念。
单向数据流：父 → 子的自上而下数据传递，调试与定位问题更直观。
组件可复用：组件在项目内外都能低成本复用。
生态/社区大：可选的第三方库极其丰富。
开发者偏爱：就业面与学习资源都很充足。
3) React 的劣势是什么？
只管视图：其他能力（路由、状态管理、数据层）往往要自行选型，导致项目间差异较大。
部分人不适应 JSX：语法混合 HTML 与 JS，需要适应期。
文档质量参差：尤其是第三方库，资料更新和一致性可能不稳定。
4) 什么是 JSX？
JSX（JavaScript XML）是 JS 的语法扩展，允许在 JS 中直写类 HTML 的结构。官方推荐使用，但不用 JSX 也能写 React。
示例：
const element =

Hello, world!

;
5) 组件之间如何传递数据？
父 → 子：用 props 传值。
子 → 父：通过 回调函数上抛数据。
兄弟组件：
由最近公共父组件中转（props/回调组合）；
使用 Redux 等状态管理；
使用 React Context 共享状态。
6) 函数组件与类组件有何区别？
自 React 16.8 起，Hooks 赋予函数组件完整的状态与副作用能力；类组件不会被移除，但官方推荐函数组件为主。
声明与 props：
函数组件：本质是函数，props 作为参数使用。
const Card = (props) =>

Title: {props.title}

;

function Card(props) {
return

Title: {props.title}

;
}
类组件：用 class 声明，通过 this.props 访问。
class Card extends React.Component {
render() {
return

Title: {this.props.title}

;
}
}
状态管理：
函数组件：使用 useState。
const Counter = () => {
const [count, setCount] = React.useState(0);
const increment = () => setCount(c => c + 1);
return (

Count: {count}Increment
);
};
类组件：用 this.state 与 this.setState。
class Counter extends React.Component {
state = { count: 0 };
increment = () => {
this.setState(prev => ({ count: prev.count + 1 }));
};
render() {
return (

Count: {this.state.count}Increment
);
}
}
7) 什么是虚拟 DOM（Virtual DOM）？
虚拟 DOM 是真实 DOM 的轻量 JS 描述。React 通过对比新旧虚拟 DOM，计算最小变更并应用到真实 DOM。
真实 DOM
虚拟 DOM
频繁操作成本高
先比对再批量更新，开销可控
可直接更新
不能直接改 HTML，需要交给 React
内存使用更多
JS 对象更轻量
8) Shadow DOM 和虚拟 DOM 一样吗？
不一样。
Shadow DOM：浏览器原生技术，服务于 Web Components 的样式/结构隔离。
虚拟 DOM：库层概念，由 React 等框架实现的 UI 更新机制。
9) 什么是 “React Fiber”？
Fiber 是 React 16 引入的新调和（reconciliation）引擎。核心是可中断的、增量的渲染：把渲染拆成小块，跨帧执行，提升响应性。

10) state 与 props 有何不同？
二者都是普通 JS 对象：
props：父组件传入，组件自身不可修改（只读）。
state：组件内部自行管理，在组件生命周期内变化。
（详见 Kent C. Dodds 的相关文章）
11) 受控组件 vs 非受控组件？
受控组件：表单元素的值由 React state 驱动。
非受控组件：表单元素的值由 DOM 自身管理，通常配合 ref 读取。
12) React 的生命周期方法有哪些？
类组件常用：
componentDidMount()：初次渲染后执行。
componentDidUpdate()：更新后执行。
componentWillUnmount()：卸载前清理资源。
函数组件使用 Hooks：useEffect 可覆盖 DidMount/DidUpdate/WillUnmount 的能力。

13) 如何提升 React 应用性能？
React.PureComponent / memo：基于浅比较减少无效渲染。
useMemo / useCallback：缓存昂贵计算或稳定回调引用。
状态下沉（State Colocation）：把状态放到真正需要的最近组件，减少级联更新。
按需加载（Lazy/Suspense）：降低首屏包体，路由/模块拆分。
14) React 中的 key 是做什么的？
key 用于标识列表项的稳定身份，帮助 React 判断增删改，避免错误复用与多余渲染。
不建议使用 数组索引作为 key（顺序变化会引发性能与状态问题）。未显式提供时，React 可能退化为索引 key。
15) 什么是高阶组件（HOC）？
高阶组件是“以组件为输入、返回新组件”的函数。它不是 React API，而是基于组合的模式，用于复用组件逻辑。
const Enhanced = higherOrderComponent(Wrapped);
16) 什么是错误边界（Error Boundaries）？
错误边界是在其子树中捕获 JS 运行时错误的组件。它会捕获异常、记录日志，并展示兜底 UI，以免整棵树崩溃。 捕获范围包括：渲染阶段、生命周期方法、构造函数（子树）。

17) 为什么引入 Hooks？
Hooks 解决了长期痛点：
复用有状态逻辑，无需调整组件层级。
按逻辑拆分代码（如订阅/请求），而非按生命周期切块。
不需要类也能使用 React 能力，避开 this 的复杂性。
18) useEffect 的用途是什么？
在函数组件中执行副作用（请求数据、订阅、手动操作 DOM、定时器等）。它把类组件里分散在 DidMount/DidUpdate/WillUnmount 的逻辑，集中成一处并按依赖控制执行时机。
19) 什么是合成事件（SyntheticEvent）？
合成事件是 React 对浏览器原生事件的跨浏览器封装，API 与原生一致（如 stopPropagation、preventDefault），保证不同行为的一致性。
20) ref 有什么用？
ref 是能挂到任意组件/元素上的特殊属性：
可以是 React.createRef() 创建的对象、回调函数，或（旧 API）字符串。
常用于直接访问 DOM 或类组件实例。
谨慎使用：大多数场景应通过数据流与 props 解决。
结语
希望这份 React 面试题清单能帮你更有底气地拿下下一份工作。如果你觉得还应该加入哪些关键题目，欢迎留言补充。

最后：
20个前端开发者必备的响应式布局
深入React:从基础到最佳实践完整攻略
python 技巧精讲
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集