1
import { useDeferredValue } from 'react';
2

3
function Component() {
4
  const [value, setValue] = useState('');
5
  // 延迟更新 deferredValue，直到主线程空闲
6
  const deferredValue = useDeferredValue(value);
7

8
  return (
9
    // 高优先级渲染：输入框（即时响应）
10
    <input
11
      value={value}
12
      onChange={(e) => setValue(e.target.value)}
13
      placeholder="输入内容..."
14
    />
15
    // 低优先级渲染：使用延迟值，避免阻塞输入
16
    <ExpensiveComponent value={deferredValue} />
17
  );
18
}

1
import { useState, useDeferredValue, memo } from 'react';
2

3
// 耗时的子组件：仅在 deferredValue 真正变化时重渲染
4
const ExpensiveList = memo(({ value }) => {
5
  // 模拟大数据过滤/渲染的耗时操作
6
  const items = Array.from({ length: 10000 }).map((_, i) => (
7
    <div key={i}>{value} - {i}</div>
8
  ));
9
  return <div>{items}</div>;
10
});
11

12
function SearchBox() {
13
  const [search, setSearch] = useState('');
14
  const deferredSearch = useDeferredValue(search);
15

16
  return (
17
    <>
18
      <input
19
        value={search}
20
        onChange={(e) => setSearch(e.target.value)}
21
      />
22
      <ExpensiveList value={deferredSearch} />
23
    </>
24
  );
25
}

1
import { useState, useDeferredValue, memo } from 'react';
2

3
// 模拟10万条数据
4
const bigDataList = Array.from({ length: 100000 }).map((_, i) => ({
5
  id: i,
6
  content: `Item ${i} - ${Math.random().toString(36).slice(2)}`
7
}));
8

9
// 耗时的列表组件（memo 优化）
10
const BigList = memo(({ filterText }) => {
11
  console.log('列表重渲染：', filterText);
12
  // 过滤大数据（模拟耗时操作）
13
  const filteredList = bigDataList.filter(item =>
14
    item.content.includes(filterText)
15
  );
16

17
  return (
18
    <div style={{ maxHeight: '500px', overflow: 'auto' }}>
19
      {filteredList.map(item => (
20
        <div key={item.id}>{item.content}</div>
21
      ))}
22
    </div>
23
  );
24
});
25

26
export default function DeferredValueDemo() {
27
  const [inputValue, setInputValue] = useState('');
28
  // 延迟搜索关键词，优先保证输入框响应
29
  const deferredInput = useDeferredValue(inputValue);
30

31
  return (
32
    <div>
33
      <h3>大数据列表搜索</h3>
34
      <input
35
        type="text"
36
        value={inputValue}
37
        onChange={(e) => setInputValue(e.target.value)}
38
        placeholder="搜索内容..."
39
        style={{ padding: '8px', width: '300px' }}
40
      />
41
      <BigList filterText={deferredInput} />
42
    </div>
43
  );
44
}

1
import { useState, useDeferredValue, memo } from 'react';
2
import ReactMarkdown from 'react-markdown'; // 第三方 markdown 解析库
3

4
// 预览组件（memo 优化）
5
const MarkdownPreview = memo(({ content }) => {
6
  // 解析 markdown 是耗时操作
7
  return (
8
    <div style={{ border: '1px solid #eee', padding: '16px', marginTop: '10px' }}>
9
      <ReactMarkdown>{content}</ReactMarkdown>
10
    </div>
11
  );
12
});
13

14
export default function RichTextEditor() {
15
  const [content, setContent] = useState('# 请输入Markdown内容');
16
  // 延迟预览内容，优先保证输入框流畅
17
  const deferredContent = useDeferredValue(content);
18

19
  return (
20
    <div>
21
      <textarea
22
        value={content}
23
        onChange={(e) => setContent(e.target.value)}
24
        style={{ width: '100%', height: '200px', padding: '8px' }}
25
      />
26
      <MarkdownPreview content={deferredContent} />
27
    </div>
28
  );
29
}