startTransition

人间自是有情痴，此恨无关风与月。

前言

• React18 将不再支持 render(不推荐使用)，我们需要通过 createRoot 来启动一个 react 应用。应用启动以后，react 会根据触发更新的上下文来决定采用何种模式来协调 fiber tree。如果是在 event、setTimeout、network request 的 callback 中触发更新，react 会采用 Legacy 模式，而如果更新与 Suspense、useTransition、OffScreen 相关，那么 react 会采用 Concurrent 模式。

startTransition

• startTransition 可以让你在不阻塞 UI 的情况下更新 state。

import ReactDOM from "react-dom";
import { useState, useTransition } from "react";

function App() {
  const [value, setValue] = useState("");
  const [isPending, startTransition] = useTransition();

  const handleValueChange = (e) => {
    startTransition(() => {
      setValue(e.target.value);
    });
  };
  return (
    <div>
      <input onChange={handleValueChange} />
      {Array(50000)
        .fill("a")
        .map((item) => (
          <div>{value}</div>
        ))}
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(<App />);