React面试题

光影博客收录的React面试题高频题与参考解析，搜索时也会写成React八股、React Hooks面试。下面是站内已有题目，可继续在面试题里按这个词刷。

在面试题中打开共 7 道，本页展示 7 道

1. useEffect 和 useLayoutEffect 有什么区别？

   React · 中等

   useEffect 在浏览器绘制后异步执行不阻塞渲染；useLayoutEffect 在 DOM 更新后、绘制前同步执行。后者用于需要同步测量/修改 DOM 的场景，避免闪烁。

2. React 中 key 的作用是什么？

   React · 简单

   key 帮助 Diff 算法识别列表元素的增删移动。用 index 作 key 在排序/增删时导致状态错乱和性能问题。应使用数据唯一 ID。

3. 虚拟 DOM 与 Diff 算法如何工作？

   React · 中等

   虚拟 DOM 是 JS 对象描述 UI，状态变化时新旧树 Diff 比较后最小化 DOM 更新。策略：同层比较、不同类型直接替换、key 标识移动。Fiber 支持可中断调度。

4. React.memo 与 useMemo 的区别和用法？

   React · 中等

   React.memo 浅比较 props 避免不必要的组件渲染；useMemo 缓存计算结果。memo 用于组件级优化，useMemo 用于值级优化。避免过度使用。

5. useCallback 的使用场景是什么？

   React · 中等

   useCallback 缓存函数引用，避免子组件因父组件重渲染接收到新函数引用导致不必要渲染。配合 React.memo 使用效果最佳，依赖项未变化时返回同一引用。

6. Context 有什么性能问题？如何优化？

   React · 困难

   Context 值变化会导致所有消费者重渲染。优化：拆分 Context（读写分离）、useMemo 包裹 value、用状态管理库替代（Zustand/Jotai）、React.memo 消费组件。

7. React Fiber 架构原理是什么？

   React · 困难

   Fiber 将渲染拆分为可中断的小任务（时间切片），通过优先级调度（Lane 模型）区分紧急和非紧急更新。支持并发特性：Suspense、useTransition、useDeferredValue。