react18 useTransition示例场景示例代码

示例代码

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

const App = () => {
  const [isPending, startTransition] = useTransition();
  const [inputValue, setInputValue] = useState("");
  const [displayValue, setDisplayValue] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setInputValue(value);

    // 使用useTransition处理值更新，标记为过渡状态
    startTransition(() => {
      setDisplayValue(value);
    });
  };

  return (
    <div>
      <h1>useTransition 示例</h1>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder="输入内容..."
      />
      <p>当前显示的内容: {isPending ? "加载中..." : displayValue}</p>
    </div>
  );
};

export default App;