React 面试题：核心原理与实战

1. React 的虚拟 DOM 是什么？

• React 使用虚拟 DOM 表示 UI 结构。
• 更新时先在虚拟 DOM 上进行 diff，再批量更新真实 DOM。
• 减少 DOM 操作成本，提高性能。

2. 说说 React 的调和过程（Reconciliation）。

• React 对比新旧虚拟 DOM，找出最小变更。
• 使用 key 帮助识别列表元素。
• 通过 Fiber 架构实现增量渲染和优先级调度。

3. Hooks 与类组件的主要区别是什么？

• Hooks 允许在函数组件中使用状态和副作用。
• useState、useEffect 取代类组件中的 state 和生命周期方法。
• 代码更简洁，更易复用逻辑。

4. useEffect 的执行时机是什么？

• 默认在组件渲染后执行副作用。
• 返回函数用于清理（类似 componentWillUnmount）。
• 依赖数组控制执行频率。

5. useMemo 和 useCallback 有何区别？

• useMemo 缓存计算结果。
• useCallback 缓存函数引用。
• 都可减少重复计算和避免不必要子组件重新渲染。

6. 为何要使用 key？

• key 帮助 React 识别列表中元素的身份。
• 不正确的 key 会导致元素重用错误、状态错乱或性能问题。

7. 受控组件与非受控组件的区别是什么？

• 受控组件：表单值由 React state 控制。
• 非受控组件：通过 DOM 引用读取表单值。
• 受控组件更易于验证和统一管理。

8. 如何在 React 中优化性能？

• 使用 React.memo 复用组件。
• 使用 useMemo、useCallback 缓存值和函数。
• 避免在渲染中创建新对象。
• 代码分割和懒加载路由。

9. React Concurrent Mode 和 Suspense 的意义是什么？

• Concurrent Mode 提高 UI 响应能力，允许 React 中断渲染任务。
• Suspense 用于处理异步数据加载，简化加载态管理。
• 需要配合数据获取库或框架支持。

10. 你会如何组织 React 项目的状态管理？

• 组件本地 state 适合局部状态。
• Context 提供跨组件共享数据。
• Redux/Pinia/MobX 适合复杂全局状态。
• 采用“最小必要状态”原则，避免过度状态管理。