React18中startTransition与useTransition的使用

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

const App = () => {
  // 用于存储输入框数据的状态
  const [inputValue, setInputValue] = useState('');
  // 用于存储处理后数据的状态
  const [processedData, setProcessedData] = useState('');

  const handleInputChange = (e) => {
    const newData = e.target.value;
    setInputValue(newData);
    startTransition(() => {
      // 这里模拟对输入数据进行一些耗时处理，比如拼接一个长字符串
      const processed = newData + ', processed and modified. This is a long text to simulate a heavy operation. '.repeat(1000);
      setProcessedData(processed);
    });
  };

  return (
    <div>
      <input type="text" onChange={handleInputChange} placeholder="Enter something" />
      <p>Input: {inputValue}</p>
      <p>Processed Data: {processedData}</p>
    </div>
  );
};

export default App;

import { useTransition } from'react';
const [isPending, startTransition] = useTransition();

import React, { useState, useTransition } from "react";
import { Input, Spin, List } from "antd";

const { Search } = Input;

// 生成 1000 条模拟数据
const mockData = [];
for (let i = 1; i <= 1000; i++) {
  mockData.push({
    id: i,
    name: `Item ${i}`,
    description: `This is the description of item ${i}`
  });
}

const App = () => {
  // 搜索关键词状态
  const [searchQuery, setSearchQuery] = useState("");
  // 搜索结果状态
  const [searchResults, setSearchResults] = useState(mockData);
  // 通过 useTransition 获取 startTransition 和 isPending
  const [isPending, startTransition] = useTransition();

  const handleSearch = (value) => {
    setSearchQuery(value);
    startTransition(() => {
      // 模拟异步搜索操作
      const newResults = mockData.filter((item) =>
        item.name.toLowerCase().includes(value.toLowerCase())
      );
      setSearchResults(newResults);
    });
  };

  return (
    <div>
      <Search
        placeholder="Search..."
        onChange={(e) => handleSearch(e.target.value)}
        enterButton
      />
      {isPending && (
        <Spin
          style={{
            marginTop: 16,
            textAlign: "center"
          }}
        />
      )}
      <List
        bordered
        dataSource={searchResults}
        renderItem={(item) => (
          <List.Item key={item.id}>
            <List.Item.Meta
              title={item.name}
              description={item.description}
            />
          </List.Item>
        )}
      />
    </div>
  );
};

export default App;