React面试题精选

2025年阅读约 13 分钟面试指南 · 前端面试

React 前端面试

精选React面试高频题目，涵盖Hooks、虚拟DOM、状态管理、性能优化等核心知识点，附详细解答。

一句话总结

React 是前端面试的核心框架，核心考点：Hooks（useState/useEffect/useMemo/useCallback 规则和时机）、虚拟DOM与Diff（同层比较+key作用）、状态管理（Context/Redux/Zustand 选型）、性能优化（memo/lazy/虚拟列表）。

React Hooks

Q：常用Hooks有哪些？useEffect的执行时机？

useState：状态管理，返回[state, setState]。

useEffect：副作用处理。组件挂载后、更新后、卸载前执行。依赖数组为空时只在挂载时执行一次。

useCallback/useMemo：性能优化，缓存函数/计算结果。

useRef：获取DOM引用或保存可变值（不触发重渲染）。

注意：不要在条件语句中使用Hooks，必须保持在组件顶层调用。

虚拟DOM与Diff

Q：虚拟DOM的原理和Diff算法？

虚拟DOM是用JavaScript对象描述真实DOM的树形结构。状态变化时先在虚拟DOM上计算差异（Diff），再批量更新真实DOM。

Diff算法策略：
1. 树级别：只比较同一层级的节点
2. 组件级别：同类型组件继续比较，不同类型直接替换
3. 元素级别：通过key标识节点，减少不必要的移动

key的作用：帮助Diff算法识别节点身份，使用index作为key在列表增删时会导致性能问题和状态错乱。

状态管理

Q：React状态管理方案有哪些？

1. Context + useReducer：React内置方案，适合中小型应用。

2. Redux：单一数据源、纯函数Reducer、中间件生态丰富。适合大型应用。

3. Zustand：轻量级状态管理，API简洁，基于Hooks。

4. Jotai/Recoil：原子化状态管理，细粒度更新。

选择原则：项目规模和团队熟悉度，避免过度设计。

性能优化

Q：React性能优化有哪些手段？

渲染优化：React.memo、useMemo、useCallback避免不必要的重渲染。

代码分割：React.lazy + Suspense实现路由级别懒加载。

虚拟列表：react-window/react-virtualized处理大数据列表。

其他：合理使用key、避免内联函数、使用Production构建、图片懒加载。

实战场景

场景：自定义 Hook——useDebounce

// 防抖 Hook：延迟执行，常用于搜索输入 import { useState, useEffect } from 'react'; function useDebounce(value, delay = 300) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const timer = setTimeout(() => setDebouncedValue(value), delay); return () => clearTimeout(timer); // 清理定时器 }, [value, delay]); return debouncedValue; } // 使用示例 function SearchBox() { const [keyword, setKeyword] = useState(''); const debouncedKeyword = useDebounce(keyword, 500); useEffect(() => { if (debouncedKeyword) fetchResults(debouncedKeyword); }, [debouncedKeyword]); return <input value={keyword} onChange={e => setKeyword(e.target.value)} />; }