1
import { useTransition } from 'react';
2

3
function Component() {
4
  // startTransition：用于包裹非紧急状态更新的函数
5
  // isPending：布尔值，标记过渡更新是否正在进行中
6
  const [isPending, startTransition] = useTransition({
7
    // 可选：设置超时时间（毫秒），若超时则强制执行更新
8
    timeoutMs: 1000
9
  });
10

11
  // 触发非紧急更新
12
  const handleNonUrgentUpdate = () => {
13
    startTransition(() => {
14
      // 这里的状态更新会被标记为非紧急更新
15
      setSomeState(newValue);
16
    });
17
  };
18

19
  // 渲染逻辑
20
  return (
21
    <div>
22
      {isPending && <div>加载中...</div>}
23
      <button onClick={handleNonUrgentUpdate}>触发非紧急更新</button>
24
    </div>
25
  );
26
}

1
import { useState, useTransition } from 'react';
2

3
function BigListFilter() {
4
  // 紧急状态：输入框的值（必须实时响应）
5
  const [inputValue, setInputValue] = useState('');
6
  // 非紧急状态：筛选后的列表数据
7
  const [filteredList, setFilteredList] = useState([]);
8
  const [isPending, startTransition] = useTransition();
9

10
  // 模拟 1 万条原始数据
11
  const originalList = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
12

13
  // 处理输入变化（紧急更新）
14
  const handleInputChange = (e) => {
15
    const value = e.target.value;
16
    setInputValue(value); // 紧急更新，实时响应输入
17

18
    // 非紧急更新：筛选列表（耗时操作，标记为过渡更新）
19
    startTransition(() => {
20
      const filtered = originalList.filter(item =>
21
        item.toLowerCase().includes(value.toLowerCase())
22
      );
23
      setFilteredList(filtered);
24
    });
25
  };
26

27
  return (
28
    <div>
29
      <input
30
        type="text"
31
        value={inputValue}
32
        onChange={handleInputChange}
33
        placeholder="筛选列表..."
34
      />
35
      {isPending && <div style={{ color: 'blue' }}>筛选中，请稍候...</div>}
36
      <ul>
37
        {filteredList.map((item, index) => (
38
          <li key={index}>{item}</li>
39
        ))}
40
      </ul>
41
    </div>
42
  );
43
}

1
import { useState, useTransition } from 'react';
2

3
function FormWithTransition() {
4
  const [formData, setFormData] = useState({ name: '', age: '' });
5
  const [isSubmitted, setIsSubmitted] = useState(false);
6
  const [isPending, startTransition] = useTransition({ timeoutMs: 1500 });
7

8
  const handleSubmit = (e) => {
9
    e.preventDefault();
10
    // 紧急：先标记提交中，给用户反馈
11
    setIsSubmitted(true);
12

13
    // 非紧急：处理提交后的状态更新（如清理表单、跳转前准备）
14
    startTransition(() => {
15
      // 模拟耗时的状态处理
16
      setFormData({ name: '', age: '' });
17
      // 可结合 react-router 实现跳转：navigate('/success')
18
    });
19
  };
20

21
  return (
22
    <form onSubmit={handleSubmit}>
23
      <div>
24
        <label>姓名：</label>
25
        <input
26
          type="text"
27
          value={formData.name}
28
          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
29
        />
30
      </div>
31
      <div>
32
        <label>年龄：</label>
33
        <input
34
          type="number"
35
          value={formData.age}
36
          onChange={(e) => setFormData({ ...formData, age: e.target.value })}
37
        />
38
      </div>
39
      <button type="submit" disabled={isPending}>
40
        {isPending ? '提交中...' : '提交'}
41
      </button>
42
      {isSubmitted && !isPending && <div>提交成功！</div>}
43
    </form>
44
  );
45
}