跳到主要内容

React 知识体系概览

什么是 React？​

React 是由 Meta（Facebook）开发的 JavaScript UI 库，用于构建用户界面。它的核心理念可以用一个公式概括：

UI=f(state)UI = f(state)

界面（UI）是状态（state）的函数——状态变了，界面自动更新。你只需要关心"数据是什么样的"，React 帮你把数据映射到 DOM 上。

React 不是一个大而全的框架（像 Angular 那样），而是专注于视图层。它引入了几个革命性的概念：

  • JSX：在 JavaScript 中直接写"HTML"，让组件的结构和逻辑放在一起
  • 组件化：把页面拆分成一个个独立可复用的组件
  • 虚拟 DOM：先在内存中计算出 DOM 的变化，再批量更新真实 DOM，提升性能
  • 单向数据流：数据从父组件流向子组件，使数据变化可预测
// 一个最简单的 React 组件
function Welcome({ name }) {
  return <h1>你好，{name}！</h1>;
}

为什么 React 面试如此重要？​

React 是目前全球使用最广泛的前端框架之一，国内外大厂（字节、阿里、腾讯、Meta、Google、Netflix）都在广泛使用。面试不仅考察"会用 React"，更考察你对底层原理的理解：

  • Hooks 原理：useState 底层是怎么存储状态的？为什么不能在 if 里调用 Hook？
  • Fiber 架构：React 16 为什么要重写核心算法？时间切片和优先级调度是怎么实现的？
  • Diff 算法：React 是怎么高效对比新旧虚拟 DOM 的？key 为什么这么重要？
  • 性能优化：什么时候该用 useMemo、useCallback、React.memo？

核心知识点概览​

Hooks——函数组件的"超能力"​

React 16.8 引入了 Hooks，让函数组件拥有了状态管理和副作用处理能力，基本取代了 Class 组件。useState 管理状态、useEffect 处理副作用、useRef 获取 DOM 引用——这些是最基础的 Hooks。面试中最常考的是 Hooks 的底层实现（链表结构）和闭包陷阱（在 useEffect 中拿到旧的 state 值）。

虚拟 DOM 与 Diff 算法​

React 不会每次状态变化都直接操作真实 DOM（那样性能太差），而是先在内存中构建一棵虚拟 DOM 树（Plain JavaScript Object），状态更新后构建新的虚拟 DOM 树，然后对比新旧两棵树的差异（Diff），最后只把差异的部分更新到真实 DOM。

React 的 Diff 算法做了三个关键假设来将复杂度从 O(n3)O(n^3) 降到 O(n)O(n)：不同类型的元素产生不同的树、列表通过 key 标识每一项、同层比较不跨级。

Fiber 架构——可中断的渲染​

React 16 之前的渲染是同步的——一旦开始就必须一气呵成完成整棵组件树的渲染，如果组件树很大，会阻塞浏览器的其他工作（比如用户交互），造成界面卡顿。

Fiber 是 React 16 引入的新架构，核心思想是将渲染工作拆分成小任务，每完成一个小任务就检查一下是否有更高优先级的工作（如用户点击），如果有就先去处理，处理完再回来继续——这就是时间切片（Time Slicing）和可中断渲染。

状态管理​

当应用规模变大，组件之间的状态共享变得复杂。React 生态有多种状态管理方案：React Context（简单的全局状态）、Redux（经典的 Flux 架构）、Zustand（轻量代替 Redux）、Jotai/Recoil（原子化状态）。面试中常考各方案的优劣势和适用场景。

React 18/19 新特性​

React 18 引入了并发模式（Concurrent Mode），包括 useTransition（低优先级更新）、useDeferredValue（延迟值）、<Suspense> 增强等。React 19 更进一步：React Compiler（自动优化）、Server Actions、use() 等。了解最新特性是展示技术前瞻性的加分项。

Next.js 与 Server Components​

Next.js 是最流行的 React 全栈框架，提供了 SSR（服务端渲染）、SSG（静态生成）、App Router 等能力。React Server Components（RSC） 是一种新的组件类型——在服务端运行、不发送 JavaScript 到客户端，能大幅减少客户端 bundle 体积。这两者在面试中越来越高频。

学习建议​

推荐学习路径
  1. Hooks 原理 + 虚拟 DOM + Diff → React 核心三件套，面试必考
  2. Fiber 架构 + 渲染流程 → 理解 React 底层工作原理
  3. 性能优化 + 列表渲染 → 实际项目高频问题
  4. 状态管理 + 组件通信 → 架构设计能力
  5. React 18/19 新特性 → 展示技术前瞻性
  6. Next.js + Server Components → 全栈 React 生态

相关链接​