React 19 Concurrent Rendering.

并发渲染核心本质：可中断的渲染任务

传统同步渲染（React 17 及更早）是一次性阻塞主线程的递归过程：从根组件到叶子组件一次性完成调和、提交，中途无法暂停，长列表、复杂组件渲染会造成页面卡顿、输入延迟。

并发渲染的核心是时间分片调度，React 将一次完整渲染拆分为多个微型任务单元（Fiber 节点），借助浏览器 requestIdleCallback / requestAnimationFrame 分割主线程时间片：

1. 渲染任务可随时中断高优先级交互（点击、输入）到来时，暂停当前组件渲染，优先执行交互更新；
2. 渲染任务可恢复主线程空闲后，从中断的 Fiber 节点继续完成剩余渲染逻辑；
3. 双缓冲提交机制调和阶段完全在内存中完成，全部 Fiber 节点计算完毕后，一次性批量更新 DOM，避免频繁回流重绘。

React 19 取消同步根节点 API，所有应用默认启用并发调度，createRoot 成为唯一根渲染入口，不存在关闭并发渲染的开关，整套组件生命周期、Hooks 执行顺序全部基于并发模型重构。

并发架构下传统数据流方案的致命缺陷

在 use() 出现前，开发者依靠 useState + useEffect 处理异步数据，这套方案与并发渲染存在底层冲突，四大核心痛点无法根治：

1. 瀑布式请求（Waterfall Fetch）组件串行执行 useEffect，父组件请求完成渲染子组件，子组件再发起新请求，网络请求串行阻塞，页面加载耗时成倍增加。
2. 竞态条件（Race Condition）快速切换参数时，旧请求晚于新请求返回，覆盖最新状态，出现数据错乱，开发者必须手动增加 AbortController、请求标识判断。
3. 渲染与副作用完全割裂渲染阶段无法读取异步数据，必须等待组件挂载完成后再触发请求，加载状态、异常处理需要额外维护多份 state 变量。
4. 并发中断带来状态不一致风险并发渲染中断重启时，useEffect 执行时机不可控，容易出现重复请求、重复订阅，需要大量清理逻辑兜底。

use() 核心定位：渲染阶段可直接消费 Promise 的原生 API

React 19 官方定义：use() 是唯一允许在组件渲染函数、其他 Hook 顶层直接读取 Promise 的内置钩子，它接收三类合法数据源：Promise 对象、React 缓存的 fetch 资源、React.cache 包装的异步函数返回值。

// 直接消费 Promise
const data = use(fetchUserInfo(userId));

// 配合缓存函数，消除重复请求
const getUser = React.cache(async (id) => await fetch(`/api/user/${id}`));
const user = use(getUser(uid));

关键特性：use() 仅能在组件渲染执行阶段调用，不能放在事件处理器、useEffect 内部；当传入的 Promise 处于 pending 状态时，当前 Fiber 渲染任务会主动抛出 Promise，触发并发调度的挂起（Suspense）逻辑，等待 Promise resolve 后，从当前组件 Fiber 节点恢复渲染。

源码层面完整执行流程（并发渲染联动逻辑）

1. 渲染阶段调用 use(promise)组件调和过程中执行 use()，React 内部读取当前 Promise 的内部状态：若 Promise 已 resolved，直接返回结果，继续向下渲染；若 Promise rejected，向上冒泡匹配最近的 ErrorBoundary 错误边界；若 Promise pending，抛出当前 Promise 对象，中断当前 Fiber 渲染任务。
2. 并发调度捕获抛出的 Promise，触发 Suspense 挂起Fiber 调度器捕获渲染抛出的 Promise，标记当前组件子树为 Suspense 挂起状态，保存当前已完成调和的 Fiber 上下文，让出主线程执行高优先级任务。
3. Promise 状态变更，调度恢复渲染任务当网络请求完成、Promise 进入 resolved 状态，调度器将该渲染任务标记为就绪，在下一个浏览器时间片恢复中断的 Fiber，重新执行当前组件渲染，此时 use() 直接读取缓存完成的数据，不再重复发起请求。
4. 双缓存数据存储，避免重复请求React.cache 为异步函数建立全局缓存映射，相同入参的 Promise 只会发起一次网络请求，所有调用 use() 的组件共享同一份响应数据，从底层杜绝瀑布请求与重复接口调用。

use() 与 Suspense 深度绑定：并发渲染的配套数据流基础设施

很多开发者存在认知误区：Suspense 只是加载占位 UI 组件；在 React 19 并发底层中，Suspense 是 use() 实现可中断异步渲染的核心载体：

• 当子组件 use() 抛出 pending Promise，最近一层 <Suspense fallback={加载组件}> 会拦截挂起信号，渲染 fallback 占位，不会直接卸载整个组件树；
• Promise 完成后，并发调度自动重启子树渲染，无缝切换真实内容；
• 并发优先级调度可在 Suspense 挂起期间，正常响应页面输入、弹窗、路由跳转等高优先级更新，彻底解决传统接口请求阻塞交互的问题。

同步/异步代码边界彻底消失

在旧版 React 中存在严格的代码分层：渲染顶层仅允许同步代码、同步 Hooks（useState/useMemo/useCallback）；异步逻辑必须后置到 useEffect、事件函数中执行。

React 19 + use() 打破分层限制：渲染函数本身成为一条连续数据流，同步变量、异步接口数据、缓存资源可以串行书写在同一渲染流中，代码逻辑完全贴合业务数据依赖关系：

// 新版 use() 统一数据流，数据依赖直观自上而下
function UserPage({ userId }) {
  // 1. 同步路由参数
  const params = useParams();

  // 2. 异步读取用户基础信息（渲染原生执行，无需 useEffect）
  const user = use(getUser(userId));

  // 3. 依赖 user 数据，二次请求关联订单
  const orders = use(getUserOrderList(user.id));

  return <UserView user={user} orders={orders} />;
}

整套代码自上而下构成完整数据流，数据依赖关系一目了然，不再需要维护 loading、error、data 三组状态变量。

渲染作为统一调度载体，解决传统数据流全部痛点

数据流调度与渲染调度完全统一

React 19 之前，数据请求由浏览器 microtask 调度，组件渲染由 React Fiber 调度，两套调度系统互不感知，产生时序冲突；use() 将异步数据读取嵌入 Fiber 并发调度链路：

1. 数据 pending 直接中断渲染让出主线程，不阻塞高优先级交互；
2. 数据就绪后主动触发渲染恢复调度器在下一时间片重启 Fiber；
3. 页面交互高优先级更新可抢占数据渲染流程数据流、渲染、交互全部由同一套并发调度器管控。

时序冲突、阻塞问题从底层架构层面消除，真正实现「渲染本身就是数据流」。

传统 useEffect 数据请求方案（React 18 及更早）

function UserOld({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState(null);

  useEffect(() => {
    let abortCtrl = new AbortController();
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await fetch(`/api/user/${userId}`, {
          signal: abortCtrl.signal
        });
        setUser(await res.json());
        setErr(null);
      } catch (e) {
        setErr(e);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
    // 切换参数时中断旧请求，规避竞态
    return () => abortCtrl.abort();
  }, [userId]);

  if (loading) return <Loading />;
  if (err) return <ErrorTip err={err} />;
  if (!user) return null;
  return <UserView data={user} />;
}

缺陷：样板代码量大、瀑布请求、并发场景易出现竞态、挂载后才发起请求，首屏加载慢、状态维护繁琐。

React 19 use() 并发数据流方案

// 全局缓存请求函数，全局复用响应
const getUser = React.cache(async (uid) => {
  const res = await fetch(`/api/user/${uid}`);
  if (!res.ok) throw new Error("接口请求失败");
  return res.json();
});

function UserNew({ userId }) {
  // 渲染阶段直接读取异步数据，无多余状态
  const user = use(getUser(userId));
  return <UserView data={user} />;
}

// 页面入口统一托管加载与异常
export default function UserPage({ userId }) {
  return (
    <Suspense fallback={<PageLoading />}>
      <ErrorBoundary fallback={(e) => <ErrorPage error={e} />}>
        <UserNew userId={userId} />
      </ErrorBoundary>
    </Suspense>
  );
}

优势：业务组件无状态样板、缓存消除重复请求、并发调度自动处理中断/竞态、数据流自上而下清晰分层、加载异常统一集中管理。

性能基准实测数据（官方 benchmark）

在同等网络环境、并发交互压力下，四组关键指标的对比如下：

use() 严格使用约束（源码底层强制校验）

1. 调用位置限制use() 仅允许在组件顶层、自定义 Hook 顶层调用，禁止嵌套在 if、循环、事件函数、useEffect 内部，否则 React 抛出运行时错误；原因：并发渲染恢复时，必须保证 Hook 调用顺序完全一致，分支内调用会破坏 Fiber Hook 链表结构。
2. 仅支持可缓存异步资源直接传入无缓存的裸 Promise 会在每次重渲染重复发起请求，生产环境必须搭配 React.cache 包装异步函数，实现全局数据缓存。
3. 不支持同步阻塞逻辑use() 设计目标是异步数据流处理，无法用于同步复杂计算；同步 heavy 计算仍需使用 useMemo 缓存结果。

Suspense 与 ErrorBoundary 分层落地规范

1. Suspense 分层粒度控制不要全局仅一层 Suspense，建议按页面模块拆分：侧边栏、主内容、弹窗分别包裹独立 Suspense，单个模块加载仅替换自身 fallback，不影响页面其他区域交互，最大化并发渲染的交互流畅度。
2. ErrorBoundary 就近捕获异常接口异常优先在业务模块外层增加错误边界，区分模块异常与全局页面崩溃，实现局部错误兜底，无需整页刷新。

服务端渲染（SSR/RSR）适配要点

React 19 的 use() 在服务端渲染流程完全兼容并发渲染：

• 服务端渲染时，use() 会串行等待 Promise 执行完成，生成完整 HTML；
• 客户端水合阶段复用服务端缓存数据，不会重复发起接口请求，彻底解决传统 SSR 水合双请求问题；
• 服务端异步资源缓存与客户端共享，大幅降低服务端接口调用压力。

高频踩坑场景与解决方案