• 假设我们要显示大量数据，例如一万条数据，在将下一个值输入到输入字段时通常会出现延迟。

• 在这种情况下，当我们输入一个值时，屏幕会显示过滤后的数据。

• 但是，出现的一个问题是由于处理太多数据而延迟显示下一个操作，例如在输入字段中输入下一个值。

·src/Example.js

import { useState } from "react";

const generateDummyItem = (num) => {
  return new Array(num).fill(null).map((item, index) => `item ${index}`);
};

const dummyItems = generateDummyItem(10000);

const Example = () => {
  const [filterVal, setFilterVal] = useState("");

  const changeHandler = (e) => {
      setFilterVal(e.target.value);
  };

  return (
    
      
      {isPending && 
Loading...
}
      

{dummyItems .filter((item) => { if (filterVal === "") return true; return item.includes(filterVal); }) .map((item) => (
• {item}
))}

• 为了解决这个问题，我们可以用startTransition包装setFilterVal函数。

  const changeHandler = (e) => {
    startTransition(() => {
      setFilterVal(e.target.value);
    })
  };

• startTransition 使函数延迟在其中执行。

• 借助此功能，我们可以轻松地转到输入字段中的下一个值。

・输入前

・输入后