React 高频面试题 MOC

使用方式

本页只做三件事：

1. 按面试题型找到对应稳定知识节点；
2. 给出推荐复习顺序；
3. 避免在“面试笔记”里复制第二份定义。

答题结构统一用：

Problem
→ Mechanism
→ Boundary
→ Failure / Trade-off
→ Real example

Hooks 的专项回答框架见 React Hooks 面试专题。

1. 基础心智模型

• React 定位：React
• JSX：JSX
• props / state / ref：React props、state 与 ref
• render / rerender：组件渲染与重渲染
• Virtual DOM：React Virtual DOM
• 列表 key：列表渲染与 key

复习目标：

能解释“状态变化怎样进入 render，再怎样影响真实 DOM”，而不是只背 API。

2. Hooks

• 总览：React Hooks
• 面试框架：React Hooks 面试专题
• useState：useState
• useRef：useRef
• useEffect：useEffect
• useLayoutEffect：useLayoutEffect
• useReducer：useReducer
• useMemo：useMemo
• useCallback：useCallback
• Custom Hook：自定义 Hook

高频关系：

• Effect 与外部系统：react-effects-and-external-systems
• state snapshot / update：react-event-handling-and-state-updates
• useEffect vs useLayoutEffect：react-useeffect-vs-uselayouteffect
• props identity 与 memo：react-prop-identity-and-rerender

3. 状态 ownership

• Context 与状态管理：react-context-and-state-management
• 状态上提 vs 下沉：react-state-lifting-vs-state-colocation
• 状态管理选型：react-state-management-selection
• Server State：tanstack-query-server-state

复习时优先问：

谁拥有这个 state？
它是 client state 还是 server state？
谁需要读？
谁需要写？
生命周期多长？

4. 表单

• controlled / uncontrolled：react-controlled-and-uncontrolled-components
• 表单性能：react-form-performance

不要只背“受控组件就是 value + onChange”，要能解释 authority 在哪一侧。

5. 渲染与性能

• 性能总览：react-performance-overview
• rerender 传播：react-render-propagation-and-state-boundaries
• memo：react-memo
• useMemo：react-use-memo
• useCallback：react-use-callback
• 长列表：react-list-performance-optimization

答题顺序：

先测量
→ 判断瓶颈是 render、计算、commit、list、effect 还是 network
→ 再选择优化手段

6. 副作用

• Effects：react-effects-and-external-systems
• useEffect：react-use-effect
• useEffect 与 SSR：react-use-effect-and-ssr
• useLayoutEffect 与 SSR：react-use-layout-effect-and-ssr

核心问题：

这是外部系统同步，还是本来就应该在 render/event 中完成的逻辑？

7. SSR / Hydration / Server Components

• Hydration：hydration
• Hydration mismatch：react-hydration-mismatch
• Server vs Client Components：react-server-vs-client-components
• SSR 数据获取：react-ssr-data-fetching
• Server render vs client request：react-server-render-vs-client-request-boundary
• SSR 架构边界：react-ssr-architecture-boundaries
• SSR / Hydration / RSC：react-ssr-vs-hydration-vs-server-components

8. 推荐复习顺序

React mental model
→ state / render
→ Hooks
→ Effect
→ state ownership
→ performance
→ SSR / hydration

遇到题目时回到实际知识节点做闭卷检查，不在 MOC 里维护 mastery。