startTransition

把非紧急更新标记为 transition，提升交互流畅度。

StableConcurrent

类型签名

TypeScript

function startTransition(scope: () => void): void

参数与返回

scope：一个函数，内部放入你希望标记为 transition 的更新（通常是 setState）。
返回值：void。

版本与稳定性

稳定性：稳定。
适用场景：更新较重、希望输入/点击保持流畅时。

关键用法

用法 1：输入保持即时响应

TypeScript

import { startTransition, useState } from 'react';

export default function Search() {
  const [query, setQuery] = useState('');
  const [filter, setFilter] = useState('');

  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    const next = e.target.value;
    setQuery(next);
    startTransition(() => {
      setFilter(next);
    });
  }

  return <input value={query} onChange={onChange} placeholder="搜索..." />;
}

用法 2：结合 useTransition 展示 pending 状态

TypeScript

import { useState, useTransition } from 'react';

export default function Example() {
  const [isPending, startTransition] = useTransition();
  const [filter, setFilter] = useState('');

  function apply(next: string) {
    startTransition(() => setFilter(next));
  }

  return (
    <>
      <button onClick={() => apply('react')}>筛选</button>
      {isPending ? <p>更新中...</p> : <p>filter: {filter}</p>}
    </>
  );
}

类型签名

参数与返回

版本与稳定性

关键用法

用法 1：输入保持即时响应

用法 2：结合 useTransition 展示 pending 状态

相关链接