深入理解 React 18 并发渲染机制

在 React 18 中，最令人期待的变更莫过于Concurrent Mode（并发模式）的引入。这个特性从根本上改变了 React 处理渲染的方式，让应用在处理复杂更新时依然能保持流畅的用户体验。

什么是并发渲染？

并发渲染是一种新的渲染机制，允许 React 在渲染过程中被打断，去处理更紧急的任务（比如用户输入），然后再回来继续完成渲染。这就像是多任务处理 —— React 可以同时"准备"多个版本的 UI。

"Concurrent React 不是一个具体的功能，而是一种新的渲染机制，它解锁了许多强大的新特性。" — React 官方文档

核心 API 详解

1. useTransition

useTransition 是一个让你可以将某些状态更新标记为"非紧急"的 Hook。这样 React 可以优先处理用户交互（如输入、点击），而将非紧急的 UI 更新延后处理。

JavaScript (React)

import { useTransition, useState } from 'react';

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

  function handleChange(e) {
    // 紧急更新：立即更新输入框
    setQuery(e.target.value);

    // 非紧急更新：搜索结果可以稍后更新
    startTransition(() => {
      const filtered = massiveData.filter(item =>
        item.name.includes(e.target.value)
      );
      setResults(filtered);
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <ResultsList results={results} />
    </div>
  );
}

2. useDeferredValue

useDeferredValue 让你延迟更新 UI 的某一部分。与 useTransition 不同，它作用于值而不是更新函数。

JavaScript (React)

import { useDeferredValue, useState } from 'react';

function SearchResultPage({ query, results }) {
  const deferredQuery = useDeferredValue(query);
  const filteredResults = results.filter(item =>
    item.name.includes(deferredQuery)
  );

  return (
    <ul>
      {filteredResults.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}