8.useTransition 和 useDeferredValue 是如何优化用户体验的？它们之间有什么区别？

用户8691

2025年9月20日修改

在日常的前端开发中，我们常常追求极致的交互体验。一个常见的挑战是：当一个操作既需要即时响应用户输入，又需要执行一个耗时的渲染任务时，如何避免界面卡顿？​

设想一个场景：我们有一个搜索框，用户每输入一个字符，下方列表就需要根据输入内容进行筛选和渲染。如果列表数据量巨大，每次按键都可能触发一次昂贵的渲染，导致输入框响应迟钝，用户会感到明显的卡顿。​

在 React 18 之前，我们可能会使用 debounce (防抖) 或 throttle (节流) 来处理这类问题。但这些方案本质上是“延迟”执行，并非最优解。React 18 引入的并发（Concurrency）特性，以及与之配套的 useTransition 和 useDeferredValue 两个 Hooks，为我们提供了更优雅的解决方案。​

问题的根源：阻塞渲染

要理解这两个 Hooks 的作用，我们首先需要明确问题所在。JavaScript 是单线程的，这意味着浏览器在同一时间内只能做一件事。当 React 进行一次大规模的更新时，主线程会被占用。在此期间，浏览器无法响应用户的其他交互，如点击、输入等，这就是所谓的“阻塞渲染”。​

对于用户而言，最影响体验的是那些需要即时反馈的交互。输入框的回显、按钮的点击状态变化，这些都属于高优先级任务。而搜索结果列表的更新，虽然也很重要，但允许有轻微的延迟，属于低优先级任务。​

并发模式的核心思想，就是允许 React 将渲染任务拆分成多个小块，并且可以根据任务的优先级来调度。它能够在渲染低优先级任务的过程中，“暂停”下来，优先处理用户输入等高优先级任务，从而保证界面的响应性。​

useTransition：分离高低优先级更新

useTransition 是一个能让我们主动将某些更新标记为“非紧急”的 Hook。通过它，我们可以告诉 React：“接下来这个状态更新可能会导致一次大规模渲染，你可以先处理更重要的事情，稍后再来渲染它。”​

useTransition 返回一个包含两个元素的数组：

1.
isPending：一个布尔值，当被标记的低优先级更新正在进行时，它为 true。我们可以利用这个状态来展示加载提示。​

2.
startTransition：一个函数。所有包裹在 startTransition 回调中的状态更新，都会被标记为“过渡”（Transition），即低优先级任务。​
​

让我们用代码来改造前面的搜索场景：

代码块

import { useState, useTransition } from 'react';​
​
function SearchPage() {​
  const [isPending, startTransition] = useTransition();​
  const [inputValue, setInputValue] = useState('');​
  const [searchQuery, setSearchQuery] = useState('');​
​
  const handleInputChange = (e) => {​
    // 1. 高优先级更新：立即更新输入框的值​
    setInputValue(e.target.value);​
​
    // 2. 低优先级更新：用 startTransition 包裹​
    startTransition(() => {​
      setSearchQuery(e.target.value);​
    });​
  };​
​
  return (​
    <div>​
      <input type="text" value={inputValue} onChange={handleInputChange} />​
      {isPending && <div>Loading...</div>}​
      <SearchResultList query={searchQuery} />​
    </div>​
  );​
}​

8.useTransition 和 useDeferredValue 是如何优化用户体验的？它们之间有什么区别？​

8.useTransition 和 useDeferredValue 是如何优化用户体验的？它们之间有什么区别？