框架核心 —— 组件化开发（React 主线）

1.1 原生 JS 开发的三座大山

• 手动操作 DOM：数据变了要自己找元素、改属性，代码又长又容易漏。
• 状态同步难：多个地方显示同一份数据，一处改了别处忘更新，bug 频出。
• 代码复用差：相似 UI 只能复制粘贴，改一处要改多处。

React 的核心思路：「你只告诉我数据是什么样（状态），界面长什么样我自动算出来」。开发者从「操作 DOM」解放为「声明 UI」。这就是声明式编程——UI = f(state)。

// 声明式：UI 是状态的函数，状态变，UI 自动变
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      点击了 {count} 次
    </button>
  );
}

1.2 组件层级设计

• 单向数据流：数据从父组件流向子组件（props），子组件通过回调通知父级——方向清晰，好调试。
• 组件单一职责：一个组件只做一件事，做大了就拆。

2.1 JSX 的本质：语法糖

// 你写的 JSX：
const el = <h1 className="title">你好</h1>;

// 编译后（babel/编译器转换）：
const el = React.createElement("h1", { className: "title" }, "你好");

// createElement 返回一个普通对象（虚拟 DOM）：
// { type: "h1", props: { className: "title", children: "你好" } }

2.2 JSX 高频语法

// 表达式：用 {} 包裹 JS 表达式
const name = "张三";
<p>你好，{name}</p>

// 条件渲染：三目运算符
{isLogin ? <LogoutButton /> : <LoginButton />}

// 列表渲染：map 必须有 key
{items.map(item => (
  <li key={item.id}>{item.name}</li>   // key 是 diff 的标识，别用 index 当 key
))}

// 事件：驼峰命名，传函数引用（不是调用）
<button onClick={handleClick}>点击</button>

3.1 五步流程

1. 触发：setState / useState 的 setter / 父组件重新渲染。
2. 调度：React 把更新排队，按优先级（紧急/过渡）安排处理。
3. 渲染：执行组件函数，重新生成虚拟 DOM 树。注意：渲染阶段不碰真实 DOM。
4. 协调：新虚拟 DOM 与旧树 diff，找出需要增删改的节点。
5. 提交：把 diff 结果一次性应用到真实 DOM（可中断部分只在此阶段落盘）。

3.2 diff 算法核心（背下来）

React 的 diff 不是暴力对比整棵树，而是基于三个「合理假设」的启发式算法：

• 同层对比：只对比同一层的节点，不跨层比较（跨层移动 = 先删后建，成本高）。
• 同类型节点：type 相同则复用（只更新 props）；type 不同直接重建（旧树整个扔掉）。
• key 定位：列表通过 key 识别「谁移动了」，避免误删误建。

4.1 useState 与不可变更新

// 基本用法
const [count, setCount] = useState(0);   // 解构出 值 和 修改函数

// 修改对象/数组：永远用「新值」替换，不能直接改原对象！
const [user, setUser] = useState({ name: "张三", age: 25 });
setUser({ ...user, age: 26 });           // ✅ 展开运算符合成新对象
// user.age = 26; setUser(user); ❌ 直接改对象，React 无法感知变化

// 依赖上一次值：传函数形式
setCount(c => c + 1);                    // 多次调用都基于最新值

4.2 useEffect：副作用处理（最容易写错）

// 副作用：数据请求、订阅、定时器、DOM 操作——不能直接写在渲染里
useEffect(() => {
  // 1. 组件挂载后执行
  fetchData();

  // 2. 返回清理函数：组件卸载前 或 依赖变化重新执行前 调用
  return () => clearTimer();
}, [deps]);   // 3. 依赖数组：依赖变了才重新执行

// 依赖数组的三种写法（必须背下来）
useEffect(fn);          // 每次渲染都执行（几乎没有场景该用）
useEffect(fn, []);      // 只在挂载时执行一次（模拟生命周期）
useEffect(fn, [a, b]);  // a 或 b 变化时执行（常用）

4.3 useMemo / useCallback：缓存

// useMemo：缓存计算结果（昂贵的计算 + 给子组件传稳定引用）
const sortedList = useMemo(() => {
  return list.sort((a, b) => a.value - b.value);  // 只有 list 变了才重算
}, [list]);

// useCallback：缓存函数引用（配合 memo 子组件使用）
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);   // id 不变，函数引用不变 → 子组件不用重新渲染

4.4 useRef：跨渲染的记忆

// useRef 返回一个对象 { current: 初始值 }，它在整个生命周期保持不变，
// 修改 current 不触发重新渲染 —— 适合存「不需要渲染的值」
const timerRef = useRef(null);
timerRef.current = setTimeout(() => {}, 1000);

// 经典应用：拿 DOM 元素（如聚焦输入框）
const inputRef = useRef(null);
inputRef.current.focus();

4.5 Hooks 的两条铁律（为什么不能条件调用）

1. 只在最顶层调用：不能放在 if、循环、嵌套函数里。
2. 只在 React 函数组件/自定义 Hook 里调用。

4.6 自定义 Hook：逻辑复用的终极方案

// 自定义 Hook = 以 use 开头的函数，内部可调用其他 Hooks
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved !== null ? JSON.parse(saved) : initialValue;
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];
}

// 使用：任何组件都能复用这套逻辑
const [theme, setTheme] = useLocalStorage("theme", "light");

5.1 Context 的用法与陷阱

// 1. 创建 Context
const ThemeContext = createContext("light");

// 2. Provider 提供值（放组件树顶层）
<ThemeContext.Provider value={theme}>
  <App />
</ThemeContext.Provider>

// 3. 消费：useContext 钩子
function Button() {
  const theme = useContext(ThemeContext);   // 拿到最近的 Provider 的值
  return <button className={theme}>按钮</button>;
}

6.1 memo：跳过重复渲染

// React.memo：props 没变就跳过渲染（浅比较）
const ExpensiveList = React.memo(function List({ items }) {
  // 只有 items 引用变了才重新渲染
  return <ul>{items.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
});

// 注意：配合 useCallback 使用才有效（见 4.3）
// 注意：只做浅比较，嵌套对象变化可能感知不到 → 用 useMemo 保证引用稳定

6.2 常见优化手段一览

// 代码分割：路由级懒加载
const Home = React.lazy(() => import("./pages/Home"));
<Suspense fallback={<Loading />}>
  <Home />
</Suspense>

// 错误边界：class 组件才能做（Hooks 暂不支持）
class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    return this.state.hasError ? <h1>出错了</h1> : this.props.children;
  }
}

7.1 并发渲染：可中断的渲染

• React 18 的核心是「并发特性」：渲染可以被更高优先级的工作打断，保证用户交互始终流畅。
• 渲染不再是「一口气做完」，而是分片、可暂停、可恢复。

// useTransition：把非紧急更新标记为「过渡」，可被紧急更新打断
const [isPending, startTransition] = useTransition();
startTransition(() => {
  setFilterText(newText);   // 大列表过滤这种重活，让给空闲时间做
});

// useDeferredValue：延迟某个值的更新
const deferredQuery = useDeferredValue(query);  // 输入不卡，结果稍后跟上

7.2 Suspense 与 Server Components

• Suspense：数据加载的「等待态」声明式处理——渲染遇到异步依赖时显示 fallback。
• Server Components（RSC）：组件可以在服务器上渲染再发给浏览器，减少客户端 JS 体积、直接访问数据库。这是 React 19 时代的大方向——「把计算留在服务器，浏览器只拿结果」。

8.1 为什么需要 Fiber：从「一次干完」到「分片干活」

旧版 React 的协调（diff）是递归的、一次做完的——组件树很大时，这一口气会卡住主线程几百毫秒，用户输入没反应。Fiber 的诞生就是为了解决这个：把渲染工作拆成一个个小任务（Fiber 节点），能随时暂停、让位给用户交互，再继续。

• Fiber 是什么：一个描述组件的普通对象，包含类型、props、state、父/子/兄弟指针——它把树变成链表，链表可以遍历中断、恢复。
• 双缓冲：同时存在 current（已提交的树）和 workInProgress（正在构建的树），构建完成一次性切换——用户永远看到完整的 UI，不会看到半渲染状态。

8.2 两大阶段：渲染阶段与提交阶段

8.3 学习路径建议

读源码别从头读到尾，按「问题驱动」读关键路径：

1. 从 useState 的实现出发（Hooks 链表怎么存储）
2. 从 setState 出发（调度怎么排队、优先级怎么分）
3. 从「首次渲染」出发（createRoot → render → 挂载到真实 DOM）
4. 从「更新渲染」出发（重新执行组件 → diff → 提交）

9.1 Vue 3 响应式：Proxy + 依赖收集

// Vue 3 用 Proxy 代理对象，读取时收集依赖，修改时触发更新
const state = reactive({ count: 0 });

// 原理（简化版）：
// 读取 state.count → 把当前副作用（渲染函数）记入依赖表
// 修改 state.count → 找到依赖表里的副作用 → 重新执行（更新界面）

// 对比 React：React 是「手动指定」——useState 返回 setter，调用就更新；
// Vue 是「自动追踪」——数据变了，用到它的地方自动更新。

项目一：用 React 重写 Todo 应用

要求：① 组件拆分合理（App / TodoList / TodoItem / AddTodo / Filter）；② 状态提升到 App 统一管理；③ 自定义 Hook 封装 localStorage 持久化；④ 列表用稳定 id 做 key；⑤ 实现过滤功能。

项目二：实现一个虚拟滚动表格

渲染 10 万行数据不卡顿。核心思路：只渲染可视区 + 上下缓冲区的行，滚动时计算偏移。用 useMemo 优化计算、memo 优化行组件。完成后用 React DevTools 观察渲染次数。

项目三：封装一个自定义 Hook 库

至少实现：useLocalStorage、useDebounce（防抖值）、useClickOutside（点击外部关闭）、useToggle、useFetch（带取消与 loading 状态）。发布到你自己的 npm 包（可选）。

项目四：画「setState 后发生了什么」的流程图

从点击事件 → setState → 调度 → 渲染 → diff → 提交 → DOM 更新 → useEffect 执行，画出完整链路并标注每步可否中断。这张图是你面试 React 岗位的底气。