React startTransition标记低优先级更新避免UI卡顿

在 React 18 中，处理大量数据渲染或复杂计算时，用户输入往往会出现明显的卡顿。这是因为默认的状态更新被视为“紧急”任务，阻塞了浏览器的渲染线程。startTransition API 的出现，正是为了解决这一痛点，它允许将某些更新标记为“低优先级”，从而让 UI 保持响应。

以下是利用 startTransition 优化 React 应用性能的完整实操指南。

1. 理解紧急更新与过渡更新的区别

在编写代码前，必须明确两类更新的界限，这决定了代码的拆分方式。

• 紧急更新：指直接的用户交互反馈，如打字、点击、拖拽。这些动作需要立即在屏幕上得到反馈，否则用户会感到应用“卡死”或“不跟手”。
• 过渡更新：指从一种视图转换到另一种视图的过程，例如搜索框输入后，根据关键词渲染长列表。列表的渲染可以稍微延迟几毫秒，只要输入框本身是流畅的，用户就不会察觉到延迟。

React 的并发渲染机制允许中断低优先级的渲染工作，优先处理高优先级的输入。

2. 编写一个存在性能问题的组件

首先，创建一个典型的搜索组件，模拟高负载场景。这个组件包含一个输入框和一个包含大量数据的列表。

执行以下步骤构建基础代码：

1. 定义一个包含 10,000 条数据的数组。
2. 创建 SearchComponent 组件，包含 input 输入框和状态变量。
3. 实现过滤逻辑，在输入框变化时重新计算列表。

import React, { useState, useMemo } from 'react';

const heavyData = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);

export default function SearchComponent() {
  const [query, setQuery] = useState('');
  
  // 这是一个昂贵的计算操作
  const filteredList = useMemo(() => {
    return heavyData.filter(item => item.toLowerCase().includes(query.toLowerCase()));
  }, [query]);

  return (
    <div>
      <input 
        type="text" 
        value={query} 
        onChange={(e) => setQuery(e.target.value)} 
        placeholder="输入关键词搜索..." 
      />
      <ul>
        {filteredList.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}
```

在这个代码中，每次 `setQuery` 被调用（即每敲击一次键盘），React 都会尝试同步完成这 10,000 条数据的过滤和渲染。如果设备性能一般，输入框会出现明显的输入延迟。

---

### 3. 使用 startTransition 标记低优先级更新

为了解决卡顿，需要将“更新输入框”和“更新列表”这两个动作拆分开。输入框的更新保持紧急，而列表的更新降级为过渡。

**修改**上述代码，引入 `startTransition`：

1.  **引入** `startTransition`。
2.  **拆分**状态：保留 `query` 用于输入框显示，新增 `pendingQuery` 用于列表过滤。
3.  **包装**列表更新逻辑。

```jsx
import React, { useState, useMemo, startTransition } from 'react';

const heavyData = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);

export default function OptimizedSearchComponent() {
  // 1. 紧急状态：直接控制输入框显示，必须立即响应
  const [query, setQuery] = useState('');
  // 2. 过渡状态：用于繁重的列表计算，可以延迟
  const [pendingQuery, setPendingQuery] = useState('');

  // 3. 使用 startTransition 包装状态更新
  const handleChange = (e) => {
    const value = e.target.value;

    // A. 紧急更新：用户输入立即上屏
    setQuery(value);

    // B. 过渡更新：告诉 React 这个更新是低优先级的
    startTransition(() => {
      setPendingQuery(value);
    });
  };

  // 4. 基于 pendingQuery 进行昂贵的计算
  const filteredList = useMemo(() => {
    return heavyData.filter(item => 
      item.toLowerCase().includes(pendingQuery.toLowerCase())
    );
  }, [pendingQuery]);

  return (
    <div>
      <input 
        type="text" 
        value={query} 
        onChange={handleChange} 
        placeholder="输入关键词搜索..." 
      />
      <ul>
        {filteredList.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

核心逻辑变化：

• 当用户输入字符时，setQuery(value) 立即执行，输入框瞬间显示新字符。
• startTransition 内部的 setPendingQuery(value) 会被标记为低优先级。如果此时又有新的输入进来，React 会中断上一次的列表渲染，优先处理最新的输入，从而保证界面的流畅度。

4. 使用 useTransition 提供视觉反馈

React 提供了 useTransition Hook，它不仅包含 startTransition 功能，还返回一个 isPending 状态。利用这个状态，可以在后台计算进行时给用户提示，避免用户以为应用卡死。

重构组件以集成加载状态：

1. 解构 isPending 和 startTransition。
2. 添加 UI 提示元素，根据 isPending 控制显隐。

import React, { useState, useMemo, useTransition } from 'react';

const heavyData = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);

export default function SearchWithFeedback() {
  const [query, setQuery] = useState('');
  const [pendingQuery, setPendingQuery] = useState('');

  // 获取过渡状态和启动函数
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value);

    startTransition(() => {
      setPendingQuery(value);
    });
  };

  const filteredList = useMemo(() => {
    return heavyData.filter(item => 
      item.toLowerCase().includes(pendingQuery.toLowerCase())
    );
  }, [pendingQuery]);

  return (
    <div style={{ padding: '20px' }}>
      <input 
        type="text" 
        value={query} 
        onChange={handleChange} 
        style={{ marginBottom: '10px', padding: '5px' }}
        placeholder="输入关键词搜索..." 
      />

      {/* 视觉反馈：当列表正在更新时显示 */}
      {isPending && <span style={{ color: 'blue' }}> 更新列表中...</span>}

      <ul>
        {filteredList.map(item => (
          <li key={item} style={{ opacity: isPending ? 0.5 : 1 }}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

此时，当输入速度超过计算速度时，界面会显示“更新列表中...”，且列表项可能会变得半透明，提示用户数据正在处理中，但输入框依然可以流畅操作。

5. 渲染流程对比分析

为了更直观地理解 startTransition 对渲染流程的影响，我们可以通过以下流程图对比普通更新与过渡更新的执行时序。

在左侧的普通更新中，由于繁重计算阻塞了主线程，步骤 F 会被推迟，导致输入框的显示也跟着变慢。在右侧的 Transition 更新中，步骤 I（输入框刷新）被优先执行，繁重计算被推迟到步骤 K，确保了交互的即时性。

6. 关键注意事项与最佳实践

在实际开发中，并非所有场景都适合使用 startTransition。

遵守以下使用规则：

1. 不要用于简单的数值更新。如果状态更新只涉及少量 DOM 变动，使用 startTransition 反而会增加调度开销。
2. 确保状态拆分正确。如上文示例，必须将“输入值”和“展示值”分为两个 State，否则 startTransition 会阻塞输入框的更新。
3. 配合 useDeferredValue 使用。如果你不想拆分 State，也可以使用 useDeferredValue(value) 来创建一个延迟版本的值用于渲染，其内部原理与 startTransition 类似。

// 使用 useDeferredValue 的替代方案
const deferredQuery = useDeferredValue(query);
// 使用 deferredQuery 进行过滤计算，但 UI 依然使用 query
const filteredList = useMemo(() => {
  return heavyData.filter(item => item.includes(deferredQuery));
}, [deferredQuery]);