Day 7：并发模式

Day 7：并发模式

核心概念

并发模式 = React 的"分身术"，同时处理多个任务

没有并发	有并发
一次只能干一件事	可以"同时"干多件事
渲染必须一口气完成	可以暂停、恢复
用户必须等待	用户感觉流畅

---

useTransition

把不紧急的更新"降级"

import { useTransition } from 'react';

function SearchApp() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  
  function handleChange(e) {
    // 紧急：更新输入框（立即）
    setQuery(e.target.value);
    
    // 不紧急：更新搜索结果（可以等等）
    startTransition(() => {
      setSearchResults(e.target.value);
    });
  }
  
  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending ? <Spinner /> : <Results results={results} />}
    </div>
  );
}

---

useDeferredValue

延迟更新不重要的东西

import { useDeferredValue } from 'react';

function SearchApp() {
  const [query, setQuery] = useState('');
  const queryDeferred = useDeferredValue(query); // "慢半拍"
  
  return <Results query={queryDeferred} />;
}

useTransition vs useDeferredValue：

特性	useTransition	useDeferredValue
用途	标记状态更新为非紧急	延迟某个值的响应
适用场景	状态 setter	已有的值

---

Lane 机制

React 18 用 Lane（车道）替代旧的 priority level

const Lanes = {
  SyncLane: 1,              // 同步：点击、输入
  InputContinuousLane: 2,  // 连续输入
  DefaultLane: 4,          // 默认：数据获取
  TransitionLane: 8,       // 过渡：useTransition
  IdleLane: 16,            // 空闲：预加载
};

为什么用 Lane？

• 二进制位运算，更清晰
• 可以同时存在多个优先级
• 更细粒度的优先级控制

---

面试高频问题

问题	答案要点
什么是 React 并发模式？	同时处理多个更新，可中断、可恢复
useTransition 用途？	标记非紧急更新，让紧急更新先完成
useDeferredValue 用途？	延迟更新次要内容，提升响应速度
Lane 是什么？	优先级管理机制，替代旧的 priority level

---

自测答案

1. 并发模式的核心优势是什么？

• 可中断：渲染可以暂停先去处理更紧急的事
• 可恢复：中断后可以接着干，不丢失进度
• 优先级：紧急的先做，不紧急的后做
• 批量处理：多个更新合并成一次渲染

2. useTransition 和 useDeferredValue 的区别？

• useTransition：包装状态更新函数 startTransition(() => setX())
• useDeferredValue：包装已有值 const xDeferred = useDeferredValue(x)

3. React 18 的 Lane 机制是什么？

• 二进制优先级车道系统
• 替代旧的 1-31 数字优先级
• 可以同时存在多个 Lane，细粒度控制

4. 为什么并发模式能提升用户体验？

不是真的变快，而是减少等待时间：

• 用户输入 → 立即响应（高优先级）
• 搜索结果 → 延迟更新（低优先级）
• 用户感觉：流畅、跟手