useTransition

核心概述

痛点: UI 阻塞问题

在 React 18 之前,所有状态更新都是"紧急"的(Urgent),这导致:

• 输入卡顿: 当用户在输入框打字时,如果同时有大量列表渲染, 会导致输入延迟(用户按键 → 字符显示在屏幕上有明显延迟)
• 点击无响应: 点击按钮后,如果触发重型计算或渲染, 界面会"冻结",用户无法看到点击反馈
• 动画掉帧: 正在进行的动画会因为其他高优先级更新而中断

解决方案: 并发渲染与 Transition

React 18 引入并发渲染(Concurrent Rendering), 允许 React 同时准备多个版本的 UI,根据优先级选择显示哪个版本。

useTransition 利用并发渲染能力,将状态更新标记为"非紧急"(Non-urgent):

• 优先级分级: 区分紧急更新(如打字、点击)和非紧急更新(如搜索结果、Tab 切换)
• 可中断渲染: 非紧急更新可以被更高优先级的更新打断,保持界面响应
• 并发特性: React 在浏览器空闲时计算 transition 更新,不影响用户交互

适用场景

• ✅ 搜索/过滤: 输入框立即更新,搜索结果延迟计算
• ✅ Tab 切换: 点击立即响应,内容延迟加载
• ✅ 列表展开: 展开/折叠图标立即变化,子节点延迟渲染
• ✅ 数据可视化: 过滤器立即应用,图表延迟重绘

技术规格

类型签名

function useTransition(): [
  boolean,
  (callback: () => void) => void
]

返回值

运行机制

useTransition 基于 React 18 的并发渲染特性,底层机制如下:

• 优先级调度: React 使用 Lane 模型管理更新优先级, transition 更新被分配较低的优先级
• 时间切片: React 将渲染工作分解成小单元, 在每个时间切片后检查是否有更高优先级的更新
• 可中断渲染: 如果在 transition 渲染过程中有紧急更新(如用户输入), React 会放弃当前的 transition 渲染,处理紧急更新后再重新开始 transition
• 并发协调: React 可以同时维护多个版本的 UI 树, 根据优先级选择显示哪个版本

实战演练

示例 1: 搜索输入框(基础用法)

最常见的场景:用户输入立即显示,搜索结果延迟计算。

import { useState, useTransition } from 'react';

function SearchInput({ items }: { items: string[] }) {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;

    // ✅ 紧急更新: 立即更新输入框(用户需要看到自己输入的字符)
    setQuery(value);

    // ⏳ 非紧急更新: 搜索结果可以延迟(用户可以接受短暂等待)
    startTransition(() => {
      const filtered = items.filter(item =>
        item.toLowerCase().includes(value.toLowerCase())
      );
      setFilteredItems(filtered);
    });
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="搜索..."
        className="border p-2 rounded"
      />
      {isPending && (
        <p className="text-sm text-gray-500 mt-2">搜索中...</p>
      )}
      <ul className="mt-4 space-y-1">
        {filteredItems.map(item => (
          <li key={item} className="text-sm">{item}</li>
        ))}
      </ul>
    </div>
  );
}

效果: 用户打字时,输入框立即响应,即使 items 数组很大(如 10,000 条), 也不会感到卡顿。搜索结果会在浏览器空闲时更新。

示例 2: Tab 切换(生产级,结合 Suspense)

Tab 切换是另一个典型场景:点击立即响应,内容延迟加载。

import { useState, useTransition, Suspense } from 'react';

// 模拟异步数据获取
async function fetchTabData(tabName: string): Promise<string[]> {
  // 假设这是一个 API 调用
  await new Promise(resolve => setTimeout(resolve, 1000));
  return [`${tabName} 数据 1`, `${tabName} 数据 2`, `${tabName} 数据 3`];
}

// Tab 内容组件(使用 Suspense)
function TabContent({ tabName }: { tabName: string }) {
  // 抛出 Promise 触发 Suspense
  const data = fetchTabData(tabName);
  throw data;

  // 实际项目中会用 use() Hook 或数据获取库
  // return <div>{data.map(...)}</div>;
}

function TabContainer() {
  const [activeTab, setActiveTab] = useState<'home' | 'posts' | 'about'>('home');
  const [isPending, startTransition] = useTransition();

  const switchTab = (tab: 'home' | 'posts' | 'about') => {
    startTransition(() => {
      // ⏳ Tab 切换标记为 transition,内容加载不会阻塞点击反馈
      setActiveTab(tab);
    });
  };

  return (
    <div>
      {/* Tab 按钮 */}
      <div className="flex gap-2 mb-4">
        {(['home', 'posts', 'about'] as const).map(tab => (
          <button
            key={tab}
            onClick={() => switchTab(tab)}
            className={`px-4 py-2 rounded ${
              activeTab === tab
                ? 'bg-blue-500 text-white'
                : 'bg-gray-200 text-gray-700'
            }`}
          >
            {tab.charAt(0).toUpperCase() + tab.slice(1)}
            {isPending && activeTab === tab && (
              <span className="ml-2">加载中...</span>
            )}
          </button>
        ))}
      </div>

      {/* Tab 内容(带 Suspense) */}
      <Suspense fallback={<div className="p-4">加载中...</div>}>
        {activeTab === 'home' && <div>首页内容</div>}
        {activeTab === 'posts' && <div>文章内容</div>}
        {activeTab === 'about' && <div>关于内容</div>}
      </Suspense>
    </div>
  );
}

效果: 点击 Tab 按钮时,按钮样式立即变化(用户得到反馈), 内容区域显示加载状态,数据加载完成后显示内容。整个过程流畅,不会"卡住"界面。

示例 3: 树形列表展开(复杂场景)

树形结构展开时,可能需要渲染大量子节点。使用 transition 可以保持交互流畅。

import { useState, useTransition } from 'react';

interface TreeNode {
  id: string;
  name: string;
  children?: TreeNode[];
}

function TreeView({ data }: { data: TreeNode[] }) {
  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
  const [isPending, startTransition] = useTransition();

  const toggleNode = (nodeId: string) => {
    // ✅ 立即更新展开/折叠状态(视觉反馈)
    const nextExpandedIds = new Set(expandedIds);
    if (nextExpandedIds.has(nodeId)) {
      nextExpandedIds.delete(nodeId);
    } else {
      nextExpandedIds.add(nodeId);
    }

    // ⏳ 延迟渲染子节点(可能很大量)
    startTransition(() => {
      setExpandedIds(nextExpandedIds);
    });
  };

  return (
    <ul className="space-y-1">
      {data.map(node => (
        <TreeNode
          key={node.id}
          node={node}
          expandedIds={expandedIds}
          onToggle={toggleNode}
          isPending={isPending}
        />
      ))}
    </ul>
  );
}

function TreeNode({
  node,
  expandedIds,
  onToggle,
  isPending
}: {
  node: TreeNode;
  expandedIds: Set<string>;
  onToggle: (id: string) => void;
  isPending: boolean;
}) {
  const isExpanded = expandedIds.has(node.id);
  const hasChildren = node.children && node.children.length > 0;

  return (
    <li>
      <div
        onClick={() => onToggle(node.id)}
        className="flex items-center gap-2 cursor-pointer hover:bg-gray-100 p-1 rounded"
      >
        {hasChildren && (
          <span className="text-gray-500">
            {isExpanded ? '▼' : '▶'}
          </span>
        )}
        <span>{node.name}</span>
        {isPending && isExpanded && (
          <span className="text-xs text-gray-400">展开中...</span>
        )}
      </div>

      {isExpanded && hasChildren && (
        <ul className="ml-6 mt-1 space-y-1">
          {node.children!.map(child => (
            <TreeNode
              key={child.id}
              node={child}
              expandedIds={expandedIds}
              onToggle={onToggle}
              isPending={isPending}
            />
          ))}
        </ul>
      )}
    </li>
  );
}

// 使用示例
const treeData: TreeNode[] = [
  {
    id: '1',
    name: '根节点',
    children: [
      {
        id: '1-1',
        name: '子节点 1',
        children: Array.from({ length: 100 }, (_, i) => ({
          id: `1-1-${i}`,
          name: `深层节点 ${i}`
        }))
      },
      {
        id: '1-2',
        name: '子节点 2',
        children: Array.from({ length: 100 }, (_, i) => ({
          id: `1-2-${i}`,
          name: `深层节点 ${i}`
        }))
      }
    ]
  }
];

// <TreeView data={treeData} />

效果: 点击展开图标时,图标立即旋转(用户得到反馈), 子节点在浏览器空闲时渲染。即使有数千个子节点,也不会阻塞界面。

示例 4: 数据可视化仪表板(生产级)

在数据可视化中,过滤器和图表都很"重",使用 transition 分离紧急和非紧急更新。

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

interface DataPoint {
  id: string;
  category: string;
  value: number;
  timestamp: number;
}

interface Filters {
  category?: string;
  dateRange?: [number, number];
  minValue?: number;
}

function Dashboard({ rawData }: { rawData: DataPoint[] }) {
  const [filters, setFilters] = useState<Filters>({});
  const [filteredData, setFilteredData] = useState<DataPoint[]>(rawData);
  const [isPending, startTransition] = useTransition();

  // 应用过滤器(可能在大量数据上执行复杂计算)
  const applyFilters = (newFilters: Filters) => {
    let result = rawData;

    if (newFilters.category) {
      result = result.filter(d => d.category === newFilters.category);
    }

    if (newFilters.dateRange) {
      const [start, end] = newFilters.dateRange;
      result = result.filter(d => d.timestamp >= start && d.timestamp <= end);
    }

    if (newFilters.minValue !== undefined) {
      result = result.filter(d => d.value >= newFilters.minValue!);
    }

    return result;
  };

  const handleFilterChange = (key: keyof Filters, value: any) => {
    const newFilters = { ...filters, [key]: value };

    // ✅ 立即更新过滤器 UI(选中状态、下拉框显示等)
    setFilters(newFilters);

    // ⏳ 延迟数据过滤和图表重绘(可能很耗时)
    startTransition(() => {
      const filtered = applyFilters(newFilters);
      setFilteredData(filtered);
    });
  };

  // 计算统计数据(也放在 transition 中)
  const stats = useMemo(() => {
    const total = filteredData.length;
    const sum = filteredData.reduce((acc, d) => acc + d.value, 0);
    const avg = total > 0 ? sum / total : 0;

    return { total, sum, avg };
  }, [filteredData]);

  return (
    <div className="p-4">
      {/* 过滤器面板 */}
      <div className="mb-6 p-4 bg-gray-50 rounded">
        <h3 className="font-semibold mb-3">过滤器</h3>

        <div className="space-y-3">
          <div>
            <label className="block text-sm mb-1">类别</label>
            <select
              value={filters.category || ''}
              onChange={(e) => handleFilterChange('category', e.target.value || undefined)}
              className="w-full border p-2 rounded"
            >
              <option value="">全部</option>
              <option value="A">类别 A</option>
              <option value="B">类别 B</option>
              <option value="C">类别 C</option>
            </select>
          </div>

          <div>
            <label className="block text-sm mb-1">最小值</label>
            <input
              type="number"
              value={filters.minValue || ''}
              onChange={(e) => handleFilterChange('minValue', Number(e.target.value) || undefined)}
              className="w-full border p-2 rounded"
              placeholder="输入最小值..."
            />
          </div>
        </div>
      </div>

      {/* 加载状态 */}
      {isPending && (
        <div className="mb-4 p-2 bg-yellow-50 text-yellow-700 text-sm rounded">
          更新图表中...
        </div>
      )}

      {/* 统计数据 */}
      <div className="mb-6 p-4 bg-blue-50 rounded grid grid-cols-3 gap-4">
        <div>
          <div className="text-sm text-gray-600">总记录数</div>
          <div className="text-2xl font-bold">{stats.total}</div>
        </div>
        <div>
          <div className="text-sm text-gray-600">总和</div>
          <div className="text-2xl font-bold">{stats.sum.toFixed(2)}</div>
        </div>
        <div>
          <div className="text-sm text-gray-600">平均值</div>
          <div className="text-2xl font-bold">{stats.avg.toFixed(2)}</div>
        </div>
      </div>

      {/* 图表区域 */}
      <div className="p-4 bg-white border rounded">
        <h3 className="font-semibold mb-3">数据可视化</h3>
        <div className="h-64 flex items-center justify-center text-gray-400">
          {/* 实际项目中这里会是图表库(如 Recharts、Chart.js 等) */}
          图表区域 ({filteredData.length} 条数据)
        </div>
      </div>
    </div>
  );
}

效果: 用户调整过滤器时,UI 立即响应(下拉框关闭、输入框显示值), 数据过滤、图表重绘在后台进行。即使数据量大、计算复杂,界面始终保持可交互。

避坑指南

// ❌ 错误: 文本输入不应该用 transition
function SearchInput() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    startTransition(() => {
      setQuery(e.target.value); // ❌ 会导致打字延迟!
    });
  };

  return <input value={query} onChange={handleChange} />;
}

// ✅ 正确: 文本输入立即更新,搜索结果延迟更新
function SearchInput({ items }: { items: string[] }) {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;

    // ✅ 立即更新输入框
    setQuery(value);

    // ✅ 搜索结果用 transition
    startTransition(() => {
      const filtered = items.filter(item =>
        item.toLowerCase().includes(value.toLowerCase())
      );
      setFilteredItems(filtered);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending ? <Spinner /> : <Results items={filteredItems} />}
    </div>
  );
}

// ❌ 错误: 在 transition 中执行副作用
function TabContainer() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  const switchTab = (newTab: string) => {
    startTransition(() => {
      setTab(newTab);
      // ❌ 不要在 transition 中做这些:
      document.title = newTab; // 直接修改 DOM
      console.log('Switched to', newTab); // 记录日志
      fetch('/api/track', { // API 调用
        method: 'POST',
        body: JSON.stringify({ tab: newTab })
      });
    });
  };

  return <div>...</div>;
}

// ✅ 正确: 副作用放在 useEffect 中
function TabContainer() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  const switchTab = (newTab: string) => {
    startTransition(() => {
      setTab(newTab); // ✅ 只包含状态更新
    });
  };

  // ✅ 副作用放在 useEffect 中
  useEffect(() => {
    document.title = tab;
  }, [tab]);

  useEffect(() => {
    console.log('Switched to', tab);
    fetch('/api/track', {
      method: 'POST',
      body: JSON.stringify({ tab })
    });
  }, [tab]);

  return <div>...</div>;
}

// ❌ 错误理解: 认为 transition 会"跳过"计算
function ExpensiveList({ items }: { items: Item[] }) {
  const [filter, setFilter] = useState('');
  const [filtered, setFiltered] = useState(items);
  const [isPending, startTransition] = useTransition();

  const handleChange = (value: string) => {
    setFilter(value);

    startTransition(() => {
      // ❌ 错误理解: 以为这样会"减少"计算
      // 实际上: 完整的过滤计算还是会执行,只是优先级较低
      const filtered = items.filter(item =>
        item.name.toLowerCase().includes(value.toLowerCase())
      );
      setFiltered(filtered);
    });
  };

  return <div>...</div>;
}

// ✅ 正确理解: Transition 保持响应性,不减少计算
// 如果真的要减少计算,应该用防抖、useMemo 或 Web Worker
function ExpensiveList({ items }: { items: Item[] }) {
  const [filter, setFilter] = useState('');
  const [filtered, setFiltered] = useState(items);
  const [isPending, startTransition] = useTransition();

  // 方案 1: 使用 useMemo 缓存计算结果
  const filteredMemo = useMemo(() => {
    return items.filter(item =>
      item.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [items, filter]);

  // 方案 2: 使用防抖减少计算频率
  const debouncedFilter = useDebounce(filter, 300);

  useEffect(() => {
    const filtered = items.filter(item =>
      item.name.toLowerCase().includes(debouncedFilter.toLowerCase())
    );
    setFiltered(filtered);
  }, [items, debouncedFilter]);

  // 方案 3: Transition + useMemo(推荐)
  const handleChange = (value: string) => {
    setFilter(value); // 立即更新

    startTransition(() => {
      // ⏳ 延迟更新,但计算量没变
      // 好处: 用户可以继续输入,不会感觉卡顿
      const filtered = items.filter(item =>
        item.name.toLowerCase().includes(value.toLowerCase())
      );
      setFiltered(filtered);
    });
  };

  return <div>...</div>;
}

// ❌ 错误: 简单更新也用 transition
function SimpleButton() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      // ❌ 这个更新很快,不需要 transition
      setCount(c => c + 1);
    });
  };

  return (
    <button onClick={handleClick}>
      {isPending ? '更新中...' : `点击了 ${count} 次`}
    </button>
  );
}

// ✅ 正确: 简单更新直接更新
function SimpleButton() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // ✅ 简单的计数器更新,不需要 transition
    setCount(c => c + 1);
  };

  return <button>点击了 {count} 次</button>;
}

// ✅ 正确: 只有复杂的、可能阻塞的更新才用 transition
function ComplexButton({ items }: { items: Item[] }) {
  const [selectedItem, setSelectedItem] = useState<Item | null>(null);
  const [details, setDetails] = useState<Details | null>(null);
  const [isPending, startTransition] = useTransition();

  const handleItemClick = (item: Item) => {
    // ✅ 立即更新选中状态(视觉反馈)
    setSelectedItem(item);

    // ✅ 延迟计算详细信息(可能很耗时)
    startTransition(() => {
      const details = calculateExpensiveDetails(item);
      setDetails(details);
    });
  };

  return (
    <div>
      {items.map(item => (
        <div
          key={item.id}
          onClick={() => handleItemClick(item)}
          className={selectedItem === item ? 'selected' : ''}
        >
          {item.name}
        </div>
      ))}
      {isPending && <Spinner />}
      {details && <DetailsPanel details={details} />}
    </div>
  );
}

最佳实践

✅ 推荐模式

const handleInput = (value: string) => {
  // ✅ 紧急更新: 用户需要立即看到
  setInputValue(value);

  // ✅ 非紧急更新: 可以延迟
  startTransition(() => {
    setFilteredData(filterData(value));
  });
};

function TabContainer() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  const switchTab = (newTab: string) => {
    startTransition(() => {
      setTab(newTab);
    });
  };

  return (
    <div>
      <button onClick={() => switchTab('posts')}>文章</button>
      {isPending && <Spinner />}

      <Suspense fallback={<div className="p-4">加载中...</div>}>
        {tab === 'home' && <Home />}
        {tab === 'posts' && <Posts />}
      </Suspense>
    </div>
  );
}

function SearchInput({ items }: { items: string[] }) {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);
  const [isPending, startTransition] = useTransition();

  const handleChange = (value: string) => {
    setQuery(value);
    startTransition(() => {
      const filtered = items.filter(item =>
        item.toLowerCase().includes(value.toLowerCase())
      );
      setFilteredItems(filtered);
    });
  };

  return (
    <div>
      <input value={query} onChange={(e) => handleChange(e.target.value)} />
      {/* ✅ 显示加载状态 */}
      {isPending && (
        <div className="mt-2 text-sm text-gray-500 flex items-center gap-2">
          <Spinner className="w-4 h-4" />
          <span>搜索中...</span>
        </div>
      )}
      <ul className="mt-2">
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

function OptimizedSearch({ items }: { items: Item[] }) {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);
  const [isPending, startTransition] = useTransition();

  // ✅ 使用防抖减少计算频率
  const debouncedQuery = useDebounce(query, 300);

  // ✅ 防抖后再用 transition 保持响应性
  useEffect(() => {
    startTransition(() => {
      const filtered = items.filter(item =>
        item.name.toLowerCase().includes(debouncedQuery.toLowerCase())
      );
      setFilteredItems(filtered);
    });
  }, [items, debouncedQuery]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // ✅ 立即更新输入框
    setQuery(e.target.value);
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <Results items={filteredItems} />
    </div>
  );
}

⚠️ 使用建议

• 先确保正确,再考虑性能: 不要一开始就用 useTransition, 先实现功能,如果发现卡顿再优化
• 测量性能: 使用 React DevTools Profiler 测量渲染时间, 确认瓶颈确实是由渲染导致的
• 渐进式优化: 一次只优化一个部分, 观察 effect,避免过度优化
• 设备测试: 在不同性能的设备上测试, 确保在低端设备上也有改善

📊 useTransition vs useDeferredValue

React 提供了两个类似的并发特性工具,使用场景略有不同:

延伸阅读

• useDeferredValue - 延迟值的更新
• Suspense - 声明式加载状态
• 并发特性 - 并发渲染介绍
• Render and Commit - React 渲染流程