React高频面试题索引

以高频面试问法组织 React 核心概念、Hooks、状态管理与性能主题的索引页。

#tech / dev / frame #resource / react #type / synthesis #status / growing

[!info] related notes

所属 MOC: React MOC

学习路径: react-learning-roadmap

主题入口: react

Hooks 相关: react-hooks-overview

前端总入口: 前端八股文 MOC

React高频面试题索引

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

回答 React 面试题的推荐顺序

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

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

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

基础心智模型

React 的定位和主线：react
JSX 到底是什么：jsx
props、state、ref 怎么区分：React中的props、state和ref
列表为什么一定要有稳定 key：react-list-rendering-and-key
key 为什么不只是为了解警告：key-attribute-interview-question, react-list-rendering-and-key
useRef 和 state 的边界：react-use-ref-interview-question, react-use-ref, react-use-state

Hooks 高频题

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

状态管理高频题

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

表单高频题

受控组件和非受控组件怎么选：react-controlled-vs-uncontrolled-components-interview-question, react-controlled-and-uncontrolled-components
React 表单性能优化一般怎么做：react-form-performance-interview-question, react-form-performance

渲染与性能高频题

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

副作用高频题

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

SSR 与接管高频题

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

回答这类题时的主线

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

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