主页 / user-15353979

Ali Navidi's questions

Martin Hope
Ali Navidi
Asked: 2024-12-31 23:46:45 +0800 CST
  • 5

我正在测试一个阻止我的 UI 渲染的繁重计算，并使用useTransition钩子来修复它并在更新时显示加载。

应用程序.tsx

import { useEffect, useState, useTransition } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    console.log("Starting Transition...");
    startTransition(() => {
      for (let i = 0; i < 1000000000; i++) {}
      setCount((prevCount) => prevCount + 1);
      console.log("Ending Transition...");
    });
  };

  useEffect(() => {
    console.log(isPending);
  }, [isPending]);

  return (
    <div className="App">
      <div>
        <h1>{count}</h1>
        <button disabled={isPending} onClick={handleClick}>
          {isPending ? "Loading..." : "Increment"}
        </button>
      </div>
      {isPending && "Loading"}
    </div>
  );
}

问题是，isPending在完成后不久就变为真useTransition，当我单击按钮时，日志如下：

日志

Starting Transition...
Ending Transition...
true
false

我的问题是，为什么isPending在转换开始时转变不成立，而在转换结束后转变不成立？

reactjs