React 18 并发特性深度解析

React 18 引入了并发渲染（Concurrent Rendering）机制，这是自 React 16 引入 Fiber 架构以来最重要的底层变革。并发模式不仅提升了用户体验，更从根本上改变了我们编写 React 应用的思维方式。本文将深入解析这些新特性的设计理念与最佳实践。

1. 什么是并发渲染

在传统的同步渲染模型中，React 一旦开始渲染就无法中断，直到整棵组件树渲染完毕。这意味着当渲染一棵大型组件树时，主线程会被长时间占用，导致浏览器无法响应用户输入。并发渲染的核心思想是——渲染是可以中断的。React 可以在渲染过程中暂停，让出主线程处理更高优先级的任务（如用户输入），然后再继续之前的渲染。

2. 自动批处理

React 18 默认启用了自动批处理。在之前版本中，只有在 React 事件处理函数中的状态更新才会被批处理；在 Promise、setTimeout、原生事件回调中的更新则不会。React 18 使用 createRoot API 后，所有状态更新都会自动批处理：

// React 18：这里的两次 setState 会被自动合并为一次重渲染
function handleClick() {
  fetchSomething().then(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // React 18：只触发一次重渲染
  });
}

3. Transitions：区分紧急与非紧急更新

startTransition 是并发模式中最实用的 API 之一。它允许你将某些状态更新标记为"非紧急"——如果更高优先级的更新到来（如用户继续输入），React 会中断当前的过渡更新，优先处理紧急更新：

import { startTransition } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleChange = (e) => {
    // 紧急更新：立即反映输入框的值
    setQuery(e.target.value);

    // 非紧急更新：搜索结果可以被中断
    startTransition(() => {
      setResults(search(e.target.value));
    });
  };
}

4. useDeferredValue

useDeferredValue 是另一种处理慢渲染的方式。它接收一个值并返回该值的"延迟"版本，在紧急更新完成之前保持旧值：

function ResultList({ query }) {
  const deferredQuery = useDeferredValue(query);
  // 当 query 快速变化时，deferredQuery 保持稳定
  // 避免每次按键都触发昂贵的列表重新渲染
  const items = useMemo(() => search(deferredQuery), [deferredQuery]);
  return <List items={items} style={{ opacity: query !== deferredQuery ? 0.5 : 1 }} />;
}

5. Suspense 的进化

React 18 中 Suspense 不再仅仅是"等待代码加载"的工具——它现在与并发特性深度集成，可以在数据加载、图片加载等场景中发挥更强大的作用。配合 use hook（在 React 19 中正式稳定），数据获取的模式发生了根本变化。

总结

React 的并发特性代表了前端框架设计思路的重要转变——从"尽可能快地完成渲染"转向"始终保持响应"。在实际项目中，建议从 startTransition 和 useDeferredValue 开始逐步引入并发特性，优先优化那些用户已经感知到卡顿的交互场景。