理解 React 18 的新特性 — 何福永 HeStudy

引言

React 18 是一次重要版本升级。它带来的重点不只是新的 API，而是让 React 更擅长处理复杂交互和高频状态更新。

其中最值得关注的是并发渲染、自动批处理，以及围绕异步体验新增的一组 Hooks。

并发渲染

并发渲染是 React 18 最核心的能力之一。它允许 React 在处理多个状态更新时进行优先级调度，从而改善应用响应性。

import { startTransition } from "react";

function handleClick() {
  // 紧急更新
  setInputValue(input);

  // 非紧急更新
  startTransition(() => {
    setSearchQuery(input);
  });
}

它是如何工作的

并发渲染让 React 可以：

暂停当前渲染过程
优先处理更紧急的更新
在后台准备新的 UI

对用户来说，最直观的收益是输入、点击这类交互不容易被大面积渲染阻塞。

自动批处理

React 18 把批处理能力扩展到了 Promise、setTimeout 和原生事件等更多场景。

// React 18 会自动批处理这些更新
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // React 只会重新渲染一次
}, 1000);

过去有些异步回调里的多次 setState 会触发多次渲染，现在 React 可以把它们合并起来，减少不必要的 UI 更新。

新 Hooks

useId

useId 用来生成稳定且唯一的 ID，尤其适合服务端渲染和表单控件关联。

import { useId } from "react";

function NameFields() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id + "-firstName"}>First Name</label>
      <input id={id + "-firstName"} type="text" />
    </div>
  );
}

useTransition

useTransition 可以把部分更新标记为“过渡更新”，让它们不会阻塞更关键的 UI 反馈。

import { useTransition } from "react";

function SearchResults() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState("");

  function handleChange(e) {
    startTransition(() => {
      setQuery(e.target.value);
    });
  }

  return (
    <>
      <input onChange={handleChange} />
      {isPending && <Spinner />}
      <Results query={query} />
    </>
  );
}

useDeferredValue

useDeferredValue 可以延迟更新 UI 的某一部分，让页面先响应用户正在进行的操作。

import { useDeferredValue } from "react";

function SearchPage({ query }) {
  const deferredQuery = useDeferredValue(query);

  return (
    <>
      <SearchInput query={query} />
      <Suspense fallback={<Loading />}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );
}

Suspense 改进

React 18 也改进了 Suspense 的表现，让它在数据加载、代码拆分和异步 UI 场景里更稳定。

<Suspense fallback={<Loading />}>
  <LazyComponent />
</Suspense>

迁移建议

升级到 React 18 时，可以按下面步骤推进：

安装新版本：npm install react@18 react-dom@18
使用新的 root API：createRoot(container).render(<App />)
跑完整测试，重点检查异步更新和表单交互
再逐步引入并发特性，而不是一次性重写全部代码

总结

React 18 的新能力让应用在复杂交互下更流畅。并发渲染、自动批处理和新的 Hooks 都值得学习，但真正落地时要从用户体验最敏感的场景开始。