基本概念：

用于处理用户界面更新时的性能优化。它帮助开发者延迟某些昂贵计算或渲染的更新，从而保持界面的响应性。

当你在 React 应用中进行状态更新时，通常所有依赖该状态的组件都会立即重新渲染。然而，在某些情况下，这种立即渲染可能会影响用户体验，特别是在需要处理大量数据或复杂计算的场景下。

useDeferredValue 允许你延迟某些非紧急的更新，以避免在输入或交互时出现卡顿。这种延迟的更新将在主线程空闲时进行，从而使得更重要的交互（如文本输入）能够优先得到处理。

使用场景：

1. 延迟昂贵的计算或渲染：当状态更新导致了需要大量计算或渲染的变化时，你可以使用 useDeferredValue 来延迟这些变化。
2. 提高交互响应速度：在需要处理用户输入并进行复杂更新时，可以使用 useDeferredValue 确保用户的输入或其他交互操作不会因为复杂的计算或渲染而卡顿。

基本用法：

useDeferredValue(value, initialValue?)

import { useState, useDeferredValue } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  // ...
}

参数：

• value：想要延迟的值，可以为任意类型
• ⚠️Canary only optional initialValue: 组件初始渲染时候使用到的值，如果没有设置这个值，useDeferredValue不会延迟首次渲染

返回值：

• 初次渲染：在组件初次渲染时，useDeferredValue 返回的值与传入的值相同。这意味着，第一次渲染时，你传给 useDeferredValue 的值是什么，返回的就是什么。
• 更新：当传入的值发生变化时，React 会先尝试用旧值进行一次重新渲染（此时useDeferredValue 返回的仍然是旧值），以确保界面保持响应速度。随后，React 会在后台启动另一次重新渲染，使用最新的传入值进行更新。这次更新完成后，useDeferredValue 才会返回新值。

注意事项：