useDeferredValue

const deferredValue = useDeferredValue(value)

• 参考
  • useDeferredValue(value, initialValue?)
• 用法
  • 在新鲜内容加载时显示陈旧内容
  • 指示内容已陈旧
  • 延迟 UI 的一部分重新渲染

参考

useDeferredValue(value, initialValue?)

在组件的顶层调用 useDeferredValue 以获取该值的延迟版本。

import { useState, useDeferredValue } from 'react';

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

请参阅以下更多示例。

参数

• value: 您要延迟的值。它可以是任何类型。
• Canary only optional initialValue: A value to use during the initial render of a component. If this option is omitted, useDeferredValue will not defer during the initial render, because there’s no previous version of value that it can render instead.

返回

• currentValue: 在初始渲染期间，返回的延迟值将与您提供的值相同。在更新期间，React 将首先尝试使用旧值重新渲染（因此它将返回旧值），然后在后台尝试使用新值进行另一次重新渲染（因此它将返回更新的值）。

注意事项

• 当更新位于过渡中时，useDeferredValue 始终返回新 value 并且不会产生延迟渲染，因为更新已经延迟。

• 传递给 useDeferredValue 的值应为基本值（如字符串和数字）或在渲染之外创建的对象。如果在渲染期间创建新对象并立即将其传递给 useDeferredValue，则每次渲染时它都会不同，从而导致不必要的后台重新渲染。

• 当 useDeferredValue 接收不同值（与 Object.is 相比）时，除了当前渲染（它仍使用前一个值）之外，它还会使用新值在后台安排重新渲染。后台重新渲染是可以中断的：如果 value 有另一个更新，React 将从头开始重新启动后台重新渲染。例如，如果用户输入文本的速度快于接收其延迟值的图表可以重新渲染的速度，则图表仅在用户停止输入后重新渲染。

• useDeferredValue 已与 <Suspense>. 集成。如果由新值导致的后台更新暂停 UI，用户将看不到回退。他们将看到旧的延迟值，直到数据加载。

• useDeferredValue 本身并不能防止额外的网络请求。

• useDeferredValue 本身不会导致固定的延迟。一旦 React 完成了原始重新渲染，React 将立即开始使用新的延迟值进行后台重新渲染。由事件（如键入）导致的任何更新都将中断后台重新渲染，并优先于它。

• useDeferredValue 导致的后台重新渲染不会触发 Effect，直到它提交到屏幕。如果后台重新渲染暂停，其 Effect 将在数据加载和 UI 更新后运行。

用法

在加载新内容时显示旧内容

在组件的顶层调用 useDeferredValue 以延迟更新 UI 的某些部分。

import { useState, useDeferredValue } from 'react';

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

在初始渲染期间，延迟值 将与您提供的 值 相同。

在更新期间，延迟值 将“滞后”于最新的 值。特别是，React 将首先重新渲染而不更新延迟值，然后尝试在后台重新渲染新接收的值。

让我们通过一个示例来了解何时使用此功能。

在此示例中，SearchResults 组件在获取搜索结果时挂起。尝试键入 "a"，等待结果，然后将其编辑为 "ab"。结果 "a" 会被加载回退替换。

一种常见的替代 UI 模式是延迟更新结果列表，并在新结果准备就绪之前一直显示以前的结果。调用 useDeferredValue 将查询的延迟版本向下传递

export default function App() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );
}

query 将立即更新，因此输入将显示新值。但是，deferredQuery 将保留其以前的值，直到数据加载完毕，因此 SearchResults 将暂时显示过时的结果。

在以下示例中输入 "a"，等待结果加载，然后将输入编辑为 "ab"。请注意，现在您看到的是过时的结果列表，而不是 Suspense 回退，直到新结果加载完毕

指示内容已陈旧

在上面的示例中，没有指示最新查询的结果列表仍在加载中。如果新结果加载需要一段时间，这可能会让用户感到困惑。为了让用户更明显地看出结果列表与最新查询不匹配，您可以在显示过时结果列表时添加视觉指示

<div style={{
  opacity: query !== deferredQuery ? 0.5 : 1,
}}>
  <SearchResults query={deferredQuery} />
</div>

有了此更改，当您开始键入时，过时的结果列表会略微变暗，直到新结果列表加载。您还可以添加 CSS 过渡来延迟变暗，使其感觉逐渐变暗，如下面的示例所示

延迟重新渲染 UI 的一部分

您还可以将 useDeferredValue 作为性能优化应用。当您的 UI 的一部分重新渲染速度较慢、没有简单的方法对其进行优化，并且您希望防止它阻塞 UI 的其余部分时，它很有用。

想象一下，您有一个文本字段和一个组件（如图表或长列表），它在每次击键时重新渲染

function App() {
  const [text, setText] = useState('');
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <SlowList text={text} />
    </>
  );
}

首先，优化 SlowList 以在道具相同的情况下跳过重新渲染。为此，将其包装在 memo 中：

const SlowList = memo(function SlowList({ text }) {
  // ...
});

但是，这只有在 SlowList 道具与前一次渲染期间相同时才有用。你现在面临的问题是，当它们不同时，以及当你实际上需要显示不同的视觉输出时，它很慢。

具体来说，主要的性能问题是每当你输入输入时，SlowList 都会收到新的道具，并重新渲染其整个树，这会让输入感觉不流畅。在这种情况下，useDeferredValue 允许你优先更新输入（必须快速）而不是更新结果列表（允许较慢）

function App() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <SlowList text={deferredText} />
    </>
  );
}

这并不会使 SlowList 的重新渲染更快。但是，它告诉 React 可以降低列表的重新渲染优先级，以便它不会阻塞击键。列表将“落后”于输入，然后“赶上”。与之前一样，React 将尝试尽快更新列表，但不会阻止用户输入。