React中useTransition钩子函数的使用详解

const [isPending, startTransition] = useTransition();
const [inputValue, setInputValue] = useState('');

const handleInputChange = (e) => {
  startTransition(() => {
    setInputValue(e.target.value);
  });
};

return (
  <div>
    {isPending ? <Spinner /> : null}
    <input type="text" value={inputValue} onChange={handleInputChange} />
    {/* 过滤和显示列表的逻辑 */}
  </div>
);

const [isPending, startTransition] = useTransition();
const [items, setItems] = useState([]);

const fetchItems = () => {
  startTransition(() => {
    // 假设fetchData是一个异步函数，用于获取数据
    fetchData().then(data => {
      setItems(data);
    });
  });
};

return (
  <div>
    <button onClick={fetchItems}>加载更多</button>
    {isPending ? <div>加载中...</div> : items.map(item => <div key={item.id}>{item.name}</div>)}
  </div>
);

const [isPending, startTransition] = useTransition();
const [filter, setFilter] = useState('');
const [filteredData, setFilteredData] = useState(initialData);

const handleFilterChange = (e) => {
  let nextFilter = e.target.value;
  setFilter(nextFilter);

  startTransition(() => {
    const filtered = initialData.filter(item =>
      item.name.toLowerCase().includes(nextFilter.toLowerCase())
    );
    setFilteredData(filtered);
  });
};

return (
  <div>
    <input type="text" value={filter} onChange={handleFilterChange} />
    {isPending ? <div>过滤中...</div> : filteredData.map(item => <div key={item.id}>{item.name}</div>)}
  </div>
);

const [isPending, startTransition] = useTransition();
const [inputValue, setInputValue] = useState('');
const [list, setList] = useState(initialList);

const handleInputChange = (e) => {
  setInputValue(e.target.value);
};

const handleSubmit = () => {
  startTransition(() => {
    // 假设这是一个将项目添加到列表中的操作
    setList(prevList => [...prevList, inputValue]);
  });
};

return (
  <div>
    <input type="text" value={inputValue} onChange={handleInputChange} />
    <button onClick={handleSubmit}>添加项目</button>
    {isPending ? <div>更新中...</div> : list.map((item, index) => <div key={index}>{item}</div>)}
  </div>
);