React useTransition

useTransition 是 React 18 中引入的新 Hook，它是并发模式（Concurrent Mode）功能的一部分。useTransition 允许你告诉 React 某些更新具有较低的优先级，React 可以在浏览器空闲时才去处理这些更新。这可以帮助提高应用的响应性，特别是在执行大型更新或密集型计算时。

作用：

useTransition 的主要作用是让你能够区分高优先级更新与低优先级更新。高优先级的更新（如用户输入）会立即执行，而低优先级的更新（如过滤列表、加载数据等）可以稍后执行，从而保持应用界面的流畅。

用法：

useTransition 返回一个数组，其中包含两个元素：

1. startTransition 函数，你可以用它来触发低优先级的更新。
2. isPending 状态，它是一个布尔值，表示是否有低优先级更新正在等待执行。

const [isPending, startTransition] = useTransition();

示例：

下面是一个使用 useTransition 的示例，展示了如何在过滤列表时保持界面的响应性：

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

function FilteredList() {
  const [input, setInput] = useState('');
  const [list, setList] = useState(items); // 假设 items 是列表项数组

  // 使用 useTransition Hook
  const [isPending, startTransition] = useTransition();

  function handleInputChange(e) {
    const nextInput = e.target.value;
    setInput(nextInput);

    // 使用 startTransition 来执行低优先级的更新
    startTransition(() => {
      const filteredItems = items.filter(item => 
        item.includes(nextInput)
      );
      setList(filteredItems);
    });
  }

  return (
    <>
      <input type="text" value={input} onChange={handleInputChange} />
      {isPending ? <span>Loading...</span> : null}
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

使用注意事项：

1. UI 指示：由于低优先级的更新可能会延迟执行，建议使用 isPending 状态来向用户显示一些加载指示，如加载旋转器或进度条，以改善用户体验。
2. 不要滥用：useTransition 非常适合处理可能会导致长时间渲染的更新，但不是每个状态更新都需要用 useTransition 包裹。过度使用可能会导致不必要的复杂性。
3. 确保 React 版本：useTransition 是 React 18 的新功能，需要确保你使用的是支持 Concurrent Mode 的 React 版本。
4. 并发模式：useTransition 旨在与并发模式一起使用，在这种模式下，React 可以打断、暂停和恢复渲染工作。确保你的应用已启用并发模式。

useTransition 提供了一种优雅的方式来处理在用户界面中可能导致性能问题的复杂或密集型任务，帮助开发者提升应用的响应性和用户体验。

原文链接：https://juejin.cn/post/7340851499717754916 作者：程序员晚天