React v18.0#

startTransition(() => {
  // todo
  // 注意此处不能有定时器和异步操作
});

// 如果需要使用定时器可以在定时器内使用startTransition
setTimeout(() => {
  startTransition(() => {
    // todo
    // 注意此处不能有定时器和异步操作
  });
}, 1000);

// 如果需要等待上一步操作完成await
await doSome();
startTransition(() => {
  // todo
  // 注意此处不能有定时器和异步操作
});

import { useTransition, useState, useCallback } from "react";
import "./index.css";

function getArray(str?: string) {
  const arr: (number | string)[] = [str ?? ""];
  for (let i = 0; i < 1000000; i++) {
    arr.push(Math.random() * 100);
  }
  return arr;
}

const PUseTransition = function PUseTransition_() {
  const [isPadding, startTransition] = useTransition();
  const [tab, setTab] = useState(getArray("default"));

  const changeTab = useCallback((key?: string) => {
    startTransition(() => {
      setTab(getArray(key));
    });
  }, []);

  return (
    <div className="page-example">
      Example
      <div>
        <button
          type="button"
          onClick={() => {
            changeTab("k1");
          }}>
          修改Tab为K1
        </button>
        <button
          type="button"
          onClick={() => {
            changeTab("k2");
          }}>
          修改Tab为K2
        </button>
        <button
          type="button"
          onClick={() => {
            changeTab("k3");
          }}>
          修改Tab为K3
        </button>
      </div>
      {isPadding ? "loading" : tab.join("-")}
    </div>
  );
};

export default PUseTransition;