startTransition

startTransition是一个函数，用于包裹哪些可能会导致 UI 阻塞的高成本状态更新。它告诉 React “这个更新不那么紧急，你可以先处理其他更重要的事情”。

import { startTransition } from "react";

// 紧急更新（默认行为）
setInputValue(e.target.value);

// 非紧急更新（使用 startTransition）
startTransition(()=>{
  setSearchQuery(e.target.value);	// 比如出发搜索或过滤大量数据
})

当用户输入时，如果同步执行复杂计算（比如过滤 10,000 条数据），主线程会被阻塞，导致输入框卡顿、界面无响应。

提升用户体验

React 可以：

• 先立即更新输入框（高优先级），

• 再在后台异步处理搜索结果（低优先级），

• 如果用户中途又输入了新内容，旧的 transition 可以被中断（自动取消），避免做无用功。

使用场景

搜索/过滤大量数据

function App() {
  const [input, setInput] = useState('');
  const [results, setResults] = useState([]);

  const handleChange = (e) => {
    const value = e.target.value;
    setInput(value);
    startTransition(() => {
      setResults(filterData(value)); // 假设 filterData 很耗时
    });
  };

  return (
    <>
      <input value={input} onChange={handleChange} />
      <List items={results} />
    </>
  );
}

用户打字流畅，即使 filterData 很慢，也不会卡住输入框。

切换标签页或路由（带数据加载）

function TabSwitcher() {
  const [tab, setTab] = useState('home');

  const switchTab = (newTab) => {
    startTransition(() => {
      setTab(newTab); // 切换 tab 可能会触发子组件的复杂渲染
    });
  };

  return (
    <div>
      <button onClick={() => switchTab('home')}>Home</button>
      <button onClick={() => switchTab('profile')}>Profile</button>
      <Content tab={tab} />
    </div>
  );
}

切换时 UI 不会“冻结”，过渡更平滑。

场景 3：与 Suspense 结合的数据获取（React 19 推荐方式）

React 19 更深度整合了 startTransition 和 Suspense，用于声明式数据获取：

function ProfilePage({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    startTransition(() => {
      fetchUser(userId).then(setUser);
    });
  }, [userId]);

  if (!user) throw promise; // 或配合 use 搭配 Suspense

  return <UserProfile user={user} />;
}

虽然 React 19 推出了新的 use Hook 和更简洁的数据获取模型，但 startTransition 仍用于“启动”非紧急的导航或数据加载。