React useTransition 和 useDeferredValue 使用

• useTransition 适用场景

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

• useDeferredValue 适用场景

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

import React, {
  useState,
  useEffect,
  useTransition,
  useDeferredValue,
} from "react";
import { getListData } from "../../api";

export default function SearchComponent() {
  const [query, setQuery] = useState("");
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition(); // 使用useTransition来控制渲染的优先级
  const deferredQuery = useDeferredValue(query); // 使用useDeferredValue来延迟query的更新
  const loading = deferredQuery !== query; // 判断query是否更新

  useEffect(() => {
    if (deferredQuery !== "") {
      const fetchData = async () => {
        const res = await getListData({ name: deferredQuery });
        startTransition(() => {
          setList(res.list);
        });
      };
      fetchData();
    } else {
      setList([]);
    }
  }, [deferredQuery]);

  return (
    <div>
      <input
        type='text'
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder='Search...'
      />
      {isPending ? (
        <div>Loading...</div>
      ) : (
        <ul>
          {list.map((item: any) => (
            <li
              key={item.id}
              style={{
                opacity: loading ? 0.5 : 1,
                transition: "opacity 0.5s ease-in-out",
              }}
            >
              {item.name}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}