React 19 发布一年后：对比 React 18，带来了哪些惊喜与变革

大家好，我是 前端大鱼，今天我们聊聊React19版本。

React 19 稳定版已经发布将近一年, 与 React 18 相比，这个版本代表了 React 演进路线上的又一个重要里程碑。

React 18：并发渲染的奠基者

回顾 2022 年发布的 React 18，它为我们带来了并发渲染的革命性概念，这不仅仅是简单的性能优化，更是从根本上改变了 React 的渲染机制。

并发渲染的核心价值

在 React 18 之前，渲染是一个单一的、不间断的、同步的事务，一旦开始就不能被中断。而并发渲染使 React 可以中断、暂停、恢复或放弃渲染。这就像在通话中遇到等待时，可以转而处理其他任务，而不是空等，大大提高了应用的响应性。

React 18 的关键特性

新的根 API ：createRoot 取代了传统的 ReactDOM.render，成为启用新特性的钥匙
自动批处理：无论是在事件处理程序、Promise、setTimeout 还是原生事件中，React 18 都能将多个状态更新批量处理为单一重新渲染，显著减少不必要的渲染
Transitions ：通过 startTransition 和 useTransition，我们可以标记哪些更新是非紧急的（如搜索查询），让更紧急的更新（如输入反馈）优先处理
Suspense SSR：服务器端渲染现在支持 Suspense，可以延迟加载慢速组件，避免整个页面被阻塞

React 19：全栈与智能化的飞跃

经过近一年的使用，React 19 展示了更为宏大的愿景：将复杂性内置，将简单性留给开发者。

革命性的 React 编译器

React 19 最引人注目的特性莫过于 React 编译器。它解决了长期困扰开发者的问题------不必要的重新渲染。

过去，我们需要手动使用 useMemo、useCallback 和 memo 来优化性能：

React 18 及之前的方式

js 复制代码

import React, { useMemo, useCallback } from 'react';

function ExpensiveComponent({ data, onItemClick }) {
  const processedData = useMemo(() => {
    return data.map(item => item * 2);
  }, [data]);

  const handleClick = useCallback((item) => {
    onItemClick(item);
  }, [onItemClick]);

  return (
    <ul>
      {processedData.map(item => (
        <li key={item} onClick={() => handleClick(item)}>{item}</li>
      ))}
    </ul>
  );
}

在 React 19 中，编译器会自动处理这些优化：

js 复制代码

// React 19 的方式
import React from 'react';

function ExpensiveComponent({ data, onItemClick }) {
  const processedData = data.map(item => item * 2);

  return (
    <ul>
      {processedData.map(item => (
        <li key={item} onClick={() => onItemClick(item)}>{item}</li>
      ))}
    </ul>
  );
}

这意味着我们不再需要手动管理这些优化，代码变得更简洁、更易维护。这个功能已在 Instagram.com 上得到生产验证，正在逐步推广到整个 Meta 生态。

Actions：数据变更的统一方案

React 19 引入了 Actions 概念，极大地简化了数据提交和状态管理。

之前，处理表单提交需要手动管理多个状态：

React 18 的方式

jsx 复制代码

function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

React 19 使用 useActionState 简化了这一过程：

jsx 复制代码

function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

Actions 自动管理待定状态、错误处理、乐观更新和顺序请求，让数据变更逻辑变得异常简洁。

use Hook：资源访问的新范式

React 19 引入了 use Hook，这是一个多用途的 API，用于读取 Context 或 Promise 的值。

use Hook 的特别之处在于它可以在条件语句中使用，突破了传统 Hook 的限制：

jsx 复制代码

import { use } from 'react';
import ThemeContext from './ThemeContext';

function Heading({ children }) {
  if (children == null) {
    return null;
  }

  // 现在可以在条件语句后使用
  const theme = use(ThemeContext);
  return <h1 style={{ color: theme.color }}>{children}</h1>;
}

在数据获取方面，use 与 Suspense 配合可以极大简化异步数据处理：

jsx 复制代码

import { use, Suspense } from 'react';

function UserProfile({ id }) {
  // use 会"解包"这个 promise
  const user = use(fetchUser(id));

  return <h1>{user.name}</h1>;
}

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <UserProfile />
      </Suspense>
    </div>
  );
}

这种方式比传统的 useEffect + useState 组合更简洁、更强大。

其他重要改进

Ref 作为 Prop ：函数组件现在可以直接接收 ref 作为 prop，不再需要 forwardRef
资源预加载 API ：React 19 提供了 prefetchDNS、preconnect、preload 和 preinit 等 API，用于精细控制资源加载
文档元数据支持 ：现在可以直接在组件中使用 <title>、<meta> 和 <link> 标签，React 会自动将它们提升到文档头部
Web Components 集成：React 19 简化了 Web Components 的集成，无需额外的包或复杂的代码转换

实战对比：React 18 vs React 19

让我们通过一个常见场景------数据获取，来对比两个版本的差异：

React 18 的方式：

jsx 复制代码

function UserProfile({ id }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetchUser(id)
      .then(data => setUser(data))
      .catch(err => setError(err))
      .finally(() => setLoading(false));
  }, [id]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return <h1>{user.name}</h1>;
}

React 19 的方式：

jsx 复制代码

function UserProfile({ id }) {
  const user = use(fetchUser(id));

  return <h1>{user.name}</h1>;
}

// 在父组件中包裹 Suspense
function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <UserProfile />
    </Suspense>
  );
}

React 19 的代码更简洁、声明性更强，将复杂性委托给框架，让开发者专注于业务逻辑。

迁移建议与注意事项

经过近一年的实践，以下是升级到 React 19 的一些建议：

逐步升级：React 19 设计上保持向后兼容，可以逐步迁移
关注破坏性变更：查阅 React 19 升级指南，了解完整的破坏性变更列表
利用新特性：优先在新增功能中使用 Actions、use Hook 等新特性，逐步重构现有代码
测试性能：虽然编译器自动优化，但仍需关注性能表现，确保优化符合预期

你对 React 19 的哪个特性最感兴趣？欢迎在评论区分享你的看法和经验！