[!info] related notes

• 所属 MOC: React MOC
• 学习路径: react-learning-roadmap
• 主题入口: React
• Hooks 相关: react-hooks-overview
• 前端总入口: 前端八股文 MOC

React高频面试题索引

这页的目标不是堆问题清单，而是把 React 面试里高频出现的主题按心智模型重新组织起来。回答时越能说清边界，越不像背题。

回答 React 面试题的推荐顺序

大多数 React 题目都可以按这个顺序回答：

1. 先说这个机制要解决什么问题
2. 再说它的核心边界和相邻概念区别
3. 再补一个最常见的坑
4. 最后补一个工程场景或代码例子

比起背定义，面试官更想确认你有没有“数据流 + 渲染 + 副作用”的整体感。

基础心智模型

• React 的定位和主线：React
• JSX 到底是什么：jsx
• props、state、ref 怎么区分：React中的props、state和ref
• 列表为什么一定要有稳定 key：react-list-rendering-and-key
• key 为什么不只是为了解警告：为什么列表渲染一定要加 key, react-list-rendering-and-key
• useRef 和 state 的边界：React 里 useRef 有什么用，和 state 有什么区别, useRef, useState

Hooks 高频题

• 为什么需要 Hooks：React Hooks, react-hooks-overview
• Hooks 底层为什么必须顶层调用：React Hooks, react-hooks-interview-deep-dive
• useState 和 useReducer 怎么选：useState, react-use-reducer
• React 的 state 为什么像“快照”：useState, react-state-model-vs-vue3-reactivity-model
• 状态更新为什么不能简单说同步或异步：React 里 setState useState 更新是同步还是异步, react-event-handling-and-state-updates
• useRef 为什么不会触发重渲染：useRef, React组件渲染与重渲染
• useEffect 和 useLayoutEffect 的区别：useEffect, react-use-layout-effect
• 自定义 Hook 解决什么问题：react-custom-hooks

状态管理高频题

• Context 能不能替代状态管理：React中的Context与状态管理边界
• Context 能不能替代完整状态管理：React Context 能不能替代状态管理, React中的Context与状态管理边界
• 状态到底该放哪里：react-component-design-principles
• 状态应该上提还是下沉：React 里状态应该上提还是下沉, react-state-lifting-vs-state-colocation
• Zustand、Redux Toolkit、TanStack Query 怎么选：react-state-management-selection

表单高频题

• 受控组件和非受控组件怎么选：React 里受控组件和非受控组件的区别, react-controlled-and-uncontrolled-components
• React 表单性能优化一般怎么做：React 表单性能优化一般怎么做, react-form-performance

渲染与性能高频题

• React 为什么会重渲染：React组件渲染与重渲染
• React 重渲染什么时候值得优化：React 为什么会重渲染，怎么判断有没有优化价值, React组件渲染与重渲染
• useMemo、useCallback、memo 的边界：useMemo, useCallback, react-memo
• React.memo 什么时候值得用：React.memo 什么时候值得用，什么时候不值得用, react-memo
• 为什么不要滥用 useCallback：为什么不要滥用 useCallback, useCallback
• 为什么对象或函数 props 会影响优化效果：为什么对象函数作为 props 会影响 React.memo, react-prop-identity-and-rerender
• 父组件更新为什么常会带动子组件一起 rerender：React 里父组件更新为什么会带动子组件重渲染, react-render-propagation-and-state-boundaries
• 长列表性能优化一般怎么答：React 里长列表性能优化一般怎么做, react-list-performance-optimization
• 性能优化应该按什么顺序做：react-performance-overview

副作用高频题

• 什么逻辑该进 effect：React副作用与外部系统同步总览
• 依赖数组为什么容易出错：useEffect
• useEffect 会不会在服务端执行：React 里 useEffect 会在服务端执行吗, react-use-effect-and-ssr
• useLayoutEffect 会不会在服务端执行：React 里 useLayoutEffect 会在服务端执行吗, react-use-layout-effect-and-ssr

SSR 与接管高频题

• SSR 页面为什么还要 hydration：Hydration 是什么，为什么 SSR 页面还需要它, Hydration 水合
• hydration mismatch 是什么：React 里 hydration mismatch 是什么，为什么会出现, react-hydration-mismatch
• 服务端组件和客户端组件有什么区别：React 服务端组件和客户端组件有什么区别, react-server-vs-client-components
• 怎么理解首次可见和可交互时间的区别：怎么理解首次可见和可交互时间的区别, first-paint-vs-time-to-interactive
• SSR 里数据一般放在哪个阶段获取：React SSR 里数据一般放在哪个阶段获取, react-ssr-data-fetching
• 哪些内容适合服务端直出，哪些适合客户端再请求：React 里哪些内容适合服务端直出，哪些适合客户端再请求, react-server-render-vs-client-request-boundary
• 服务端组件、客户端组件和数据获取该怎么整体分工：React SSR 里服务端组件、客户端组件和数据获取该怎么分工, react-ssr-architecture-boundaries
• SSR、hydration 和服务端组件有什么区别：React 里 SSR、hydration 和服务端组件有什么区别, react-ssr-vs-hydration-vs-server-components

回答这类题时的主线

1. 先说这个 API 或机制要解决什么问题
2. 再说它和相邻概念的边界
3. 最后补一个真实工程场景或常见误区

这样会比单纯背定义更像有实践经验。

Related notes

• React MOC
• React Hooks 面试专题深度解析