React

React 面试主线：JSX → 组件 → Hooks → 状态管理 → Fiber 架构。能讲清 Hooks 规则和 Fiber 原理基本过关。

Q1: React 的组件通信方式？ 「🟢 校招/初级」

考察点：组件化开发的基本功。

参考答案：

• 父 → 子：props。
• 子 → 父：回调函数（父组件传函数给子组件）。
• 兄弟组件：状态提升（共同父组件管理状态）。
• 跨层级：Context API（适合全局主题、用户信息等）。
• 全局状态：Redux / Zustand / Jotai / Recoil。

追问延伸：

• Context 的性能问题怎么解决？（拆分 Context、memo 优化）
• Redux 和 Zustand 的核心区别？

Q2: React Hooks 的规则？ 「🟡 中级」

考察点：Hooks 的使用规范，必问题。

参考答案：

• 只在顶层调用：不能在循环、条件、嵌套函数中调用（React 靠调用顺序关联 Hook 状态）。
• 只在 React 函数中调用：不能在普通 JS 函数中使用。
• 原因：React 用链表按顺序存储每个 Hook 的状态，调用顺序变化会导致状态错乱。

// 错误示例
if (condition) {
  const [value, setValue] = useState(0); // ❌ 违反规则
}

追问延伸：

• 为什么 React 要用链表存储 Hook 状态？
• 自定义 Hook 怎么设计？

Q3: useState 和 useEffect 的原理？ 「🟡 中级」

考察点：最常用的两个 Hook。

参考答案：

• useState：返回 [state, setState]，setState 触发重新渲染；状态更新是异步的（批量更新）。
• useEffect：处理副作用（数据请求、订阅、DOM 操作），在组件渲染后执行；依赖数组控制执行时机：
  • 无依赖：每次渲染后执行。
  • 空数组 []：只在挂载/卸载时执行。
  • 有依赖：依赖变化时执行。
• 清理函数：useEffect 返回的函数在下次执行前或卸载时调用（清理定时器/取消订阅）。

追问延伸：

• useLayoutEffect 和 useEffect 的区别？
• useState 的函数式更新怎么用？

Q4: React 的 Fiber 架构是什么？ 「🔴 高级」

考察点：React 16+ 的核心架构。

参考答案：

• Fiber 是 React 16 引入的新的协调（reconciliation）引擎，把渲染工作拆分成多个小单元（Fiber 节点），可中断、可恢复。
• 每个 Fiber 节点对应一个组件/DOM 元素，包含：类型、状态、副作用、子/兄弟/父指针。
• 工作循环：渲染阶段（可中断，构建 Fiber 树）→ 提交阶段（不可中断，同步更新 DOM）。
• 优势：优先级调度（高优先级更新可打断低优先级）、时间切片、Suspense。

追问延伸：

• Fiber 是怎么实现可中断的？（requestIdleCallback / MessageChannel）
• Concurrent Mode 是什么？

Q5: React 的性能优化手段？ 「🟡 中级」

考察点：实战优化能力。

参考答案：

• React.memo：包裹组件，props 不变时跳过渲染（浅比较）。
• useMemo / useCallback：缓存计算结果/函数引用，避免不必要的子组件渲染。
• key：列表渲染时正确设置 key，帮助 React 复用/移动节点。
• 代码分割：React.lazy + Suspense 按需加载组件。
• 虚拟列表：长列表只渲染可视区域（react-window、react-virtualized）。

追问延伸：

• React.memo 的第二个参数怎么用？
• 怎么检测不必要的渲染？（React DevTools Profiler）

Q6: Redux 的工作流程？ 「🟡 中级」

考察点：状态管理的经典方案。

参考答案：

• 三大原则：单一数据源、状态只读、纯函数修改状态。
• 流程：组件 dispatch action → reducer 根据 action 计算新状态 → store 更新状态 → 组件订阅的状态变化触发重新渲染。
• 中间件：处理异步（redux-thunk、redux-saga）、日志（redux-logger）。
• Redux Toolkit（RTK）：官方推荐，简化配置（createSlice、configureStore）。

追问延伸：

• Redux 和 React Context 怎么选？
• 为什么 Redux 要用纯函数 reducer？

Q7: React 的合成事件（SyntheticEvent）是什么？ 「🟡 中级」

考察点：React 事件系统的理解。

参考答案：

• React 实现了一套自己的事件系统，把原生事件包装成 SyntheticEvent，抹平浏览器差异。
• 事件委托：所有事件都委托到 document（React 17+ 是 root container），而不是直接绑定到具体元素。
• 优势：统一事件接口、减少内存占用、便于优化。
• 注意：e.stopPropagation() 只能阻止合成事件冒泡，不影响原生事件。

追问延伸：

• React 17 的事件委托从 document 改到 root 有什么意义？
• 怎么在 React 里绑定原生事件？