详解useTransition 和 useDeferredValue

XinD
2,744 阅读4分钟

React 18 提供了一些新的特性，以帮助我们更好地处理异步数据和交互，从而提高用户体验。在这篇博客中，我们将深入探讨 useTransition 和 useDeferredValue 这两个新的 Hooks，并通过多个代码示例来展示它们的实际应用场景。

简介

在 React 18 中，Concurrent 模式成为了一个正式的特性。这意味着，我们可以通过在组件树中使用 createRoot 或 createBlockingRoot 来启用或禁用这个模式。这种模式有助于提高应用程序的响应性和性能，因为它允许 React 在渲染过程中进行中断和优先级调整。

在这种情况下，useTransition 和 useDeferredValue Hooks 可以让我们更好地控制数据更新和渲染优先级。

useTransition

useTransition 是一个用于处理渲染过程中的状态转换的 Hook。它可以让我们在组件更新时添加一个延迟，以便在完成数据加载之前保持用户界面的稳定性。在数据加载完成后，React 会将组件更新为最新状态。

基本用法

要使用 useTransition，首先需要从 react 包中导入它。然后，在组件中调用这个 Hook，它会返回一个包含两个元素的数组。第一个元素是一个 startTransition 函数，用于触发状态转换；第二个元素是一个布尔值 isPending，表示转换是否正在进行中。

import { useTransition } from 'react';

function MyComponent() {
  const [startTransition, isPending] = useTransition();
}

要触发状态转换，可以将需要更新的状态放入 startTransition 函数中。这将使 React 在更新状态之前添加一个延迟。

startTransition(() => {
  // 更新状态的逻辑
});

代码示例

我们将通过一个简单的搜索组件来展示 useTransition 的用法。当用户在输入框中输入搜索关键字时，我们希望能够在加载搜索结果之前显示一个加载指示器。在这个过程中，useTransition 可以帮助我们优化用户体验。

import { useState, useEffect, useTransition } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [startTransition, isPending] = useTransition();

  useEffect(() => {
    if (query !== '') {
      // 模拟 API 请求
      const fetchData = async () => {
        const response = await fetch(`https://api.example.com/search?q=${query}`);
        const data = await response.json();
        return data;
      };

      startTransition(async () => {
        const data = await fetchData();
        setResults(data);
      });
    } else {
      setResults([]);
    }
  }, [query, startTransition]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      {isPending ? (
        <div>Loading...</div>
      ) : (
        <ul>
          {results.map((result) => (
            <li key={result.id}>{result.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

在这个示例中，我们首先从 react 中导入了 useState、useEffect 和 useTransition。然后，我们创建了一个名为 SearchComponent 的函数组件。

我们使用 useState 分别创建了 query 和 results 两个状态。query 用于存储搜索关键字，results 用于存储搜索结果。

接下来，我们使用 useEffect 在 query 更改时触发 API 请求。这里的关键是使用 useTransition 的 startTransition 函数将 fetchData 和更新 results 的逻辑包裹起来。这样，React 就会在更新状态之前添加一个延迟。

在渲染部分，我们使用 isPending 布尔值来判断是否显示加载指示器。当 isPending 为 true 时，表示正在进行状态转换，我们显示 "Loading..."；否则，显示搜索结果列表。

使用场景

useTransition 非常适用于以下场景：

  1. 数据加载：在数据加载过程中，我们可以使用 useTransition 在更新 UI 之前显示一个加载指示器，从而优化用户体验。
  2. 动画和过渡效果：在组件状态更新时，useTransition 可以让我们更好地控制动画和过渡效果的触发时机。

useDeferredValue

useDeferredValue 是一个用于控制组件更新优先级的 Hook。它可以让我们将某个值的更新推迟到更合适的时机，从而避免在高优先级任务执行期间进行不必要的渲染。

基本用法

要使用 useDeferredValue，首先需要从 react 包中导入它。然后，在组件中调用这个 Hook，并将需要推迟的值作为参数传递给它。useDeferredValue 将返回一个新的值，该值可能与传入的值相同，也可能是之前的值，具体取决于 React 的调度策略。

import { useDeferredValue } from 'react';

function MyComponent() {
  const value = 42;
  const deferredValue = useDeferredValue(value);
}

代码示例

我们将通过一个实时搜索组件来展示 useDeferredValue 的用法。当用户在输入框中输入搜索关键字时，我们希望组件能够立即响应，并在加载搜索结果时保持输入框的流畅性。

import { useState, useEffect, useDeferredValue } from 'react';

function LiveSearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const deferredQuery = useDeferredValue(query, { timeoutMs: 200 });

  useEffect(() => {
    if (deferredQuery !== '') {
      // 模拟 API 请求
      const fetchData = async () => {
        const response = await fetch(`https://api.example.com/search?q=${deferredQuery}`);
        const data = await response.json();
        return data;
      };

      fetchData().then((data) => {
        setResults(data);
      });
    } else {
      setResults([]);
    }
  }, [deferredQuery]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {results.map((result) => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
}

在这个示例中，我们首先从 react 中导入了 useState、useEffect 和 useDeferredValue。然后，我们创建了一个名为 LiveSearchComponent 的函数组件。

我们使用 useState 分别创建了 query 和 results 两个状态。query 用于存储搜索关键字，results 用于存储搜索结果。

接下来，我们使用 useDeferredValue 将 query 作为参数传入，并设置一个 timeoutMs 选项，这里我们将其设置为 200 毫秒。这意味着，在高优先级任务执行期间，搜索请求可能会被推迟最多 200 毫秒。

然后，我们使用 useEffect 在 deferredQuery 更改时触发 API 请求。这里，我们仅在 deferredQuery 不为空时发送请求。

在渲染部分，我们显示输入框和搜索结果列表。通过使用 useDeferredValue，我们确保了输入框在用户输入过程中保持流畅，同时在合适的时机更新搜索结果。

使用场景

useDeferredValue 可以应用于以下场景：

  1. 用户输入：在处理实时搜索、自动完成等与用户输入相关的功能时，我们可以使用 useDeferredValue 来确保输入框在用户输入过程中保持流畅，同时在合适的时机更新相关组件。
  2. 列表和大型数据集：当需要处理大量数据时，useDeferredValue 可以帮助我们控制渲染的优先级，从而避免阻塞用户界面。例如，在分页加载数据的情况下，我们可以使用 useDeferredValue 在高优先级任务完成后再更新数据列表。

总结

在本文中，我们详细讨论了 React 18 中的 useTransition 和 useDeferredValue 这两个新的 Hooks。通过多个代码示例，我们展示了它们的实际应用场景，如数据加载、实时搜索和用户输入等。这些新的 Hooks 可以帮助我们更好地控制组件更新和渲染优先级，从而提高应用程序的性能和用户体验。

avatar
文章
阅读
粉丝