在AI时代，再去了解react19新特性还有用吗？ 最近总有朋友问我：“现在AI写代码这么厉害了，我写个需求丢给ChatGPT，几秒钟就生成一堆组件，还学新特

在AI时代，再去了解react19新特性还有用吗？

最近总有朋友问我："现在AI写代码这么厉害了，我写个需求丢给cursor，chatgpt，各种ai大模型，几分钟页面逻辑全都有了，还学新特性干啥？直接让AI写不就完了？"

我通常会反问一句："AI写的代码，你就不用担责了吗？是的，ai 不是人， 还承担不了岗位赋予你的责任， 而你为了这份责任，一定是用好ai， 控制ai， 直到它输出你想要的！"

即使最先进的AI，生成代码也可能有逻辑漏洞、性能坑，或者用了过时的API。而review AI代码、理解它为什么这么写、以及如何优化它，成了我们开发者新的核心竞争力。

所以，今天我们就以React 19的新特性为例，一起看看这些新玩意儿到底是什么，并且思考：如果你不懂它们，还停留在react16，17，18，那AI生成的代码里埋了坑，你能发现吗？

---

1. Actions：让数据提交像呼吸一样自然

先来看一个传统表单提交的痛点：

function OldForm() {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setPending(true);
    setError(null);
    try {
      const formData = new FormData(e.target);
      await submitForm(formData);
    } catch (err) {
      setError(err.message);
    } finally {
      setPending(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" />
      <button type="submit" disabled={pending}>
        {pending ? '提交中...' : '提交'}
      </button>
      {error && <p style={{color: 'red'}}>{error}</p>}
    </form>
  );
}

这段代码没什么大毛病，但每个表单都要重复写pending、error、try-catch，烦不烦？

React 19 的 Actions 直接内置了异步状态管理 ，用 useTransition 就能搞定：

import { useTransition } from 'react';

function NewForm() {
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState(null);

  const action = async (formData) => {
    startTransition(async () => {
      try {
        await submitForm(formData);
      } catch (err) {
        setError(err.message);
      }
    });
  };

  return (
    <form action={action}>
      <input name="name" />
      <button type="submit" disabled={isPending}>
        {isPending ? '提交中...' : '提交'}
      </button>
      {error && <p style={{color: 'red'}}>{error}</p>}
    </form>
  );
}

甚至还可以更简洁------用 useActionState（原 useFormState）：

import { useActionState } from 'react';

async function submit(prevState, formData) {
  try {
    await submitForm(formData);
    return { success: true, error: null };
  } catch (err) {
    return { success: false, error: err.message };
  }
}

function SuperSimpleForm() {
  const [state, formAction, isPending] = useActionState(submit, { success: false, error: null });

  return (
    <form action={formAction}>
      <input name="name" />
      <button type="submit" disabled={isPending}>
        {isPending ? '提交中...' : '提交'}
      </button>
      {state.error && <p style={{color: 'red'}}>{state.error}</p>}
      {state.success && <p style={{color: 'green'}}>提交成功！</p>}
    </form>
  );
}

AI可能犯的错：它可能还是用老式的useState+手动管理，或者忘记处理loading状态。如果你不了解Actions，就不知道AI生成的代码其实可以被简化成几行，并且性能更好（因为React能自动批处理更新）。

---

2. use API：条件语句里也能用"钩子"了

以前React有个铁律：Hooks不能在条件语句、循环里调用。这导致我们必须把所有context、状态提到组件最外层，哪怕有些数据只在特定分支需要。

React 19 引入了一个新API------use ，它虽然名字像Hook，但可以在条件语句里用！

import { use, useContext } from 'react';
import { ThemeContext, UserContext } from './contexts';

function Profile({ userPromise }) {
  // ✅ 可以在条件分支里用 use
  if (userPromise) {
    const user = use(userPromise); // 等待Promise
    return <div>{user.name}</div>;
  }

  // ❌ 不能用useContext 因为它在 return 之后
  // const theme = useContext(ThemeContext); // 报错！Hooks必须在顶层

  // 但可以用 use 在条件里读取 Context
  if (someCondition) {
    const theme = use(ThemeContext);
    return <div>主题：{theme}</div>;
  }

  return null;
}

有什么用？

• 结合Suspense，可以优雅地处理异步数据加载。
• 让你写出更灵活的组件，不再被"所有Hooks必须在顶层"束缚。

AI可能犯的错 ：它可能依然遵守老规则，把所有数据读取都提到顶部，导致组件性能变差。或者，它可能生成类似 if (user) { useContext(...) } 的代码，这在旧版React里直接报错。如果你不懂 use，就会觉得是AI写错了，但其实它是想用新特性。

---

3. <Activity> 组件：后台预渲染，页面切换如丝般顺滑

你有没有遇到过这样的场景：用户点了一个链接，新页面加载前会有短暂的空白，然后内容才蹦出来。如果能在用户悬停在链接上时，就偷偷把下一页渲染好，体验不就起飞了吗？

React 19.2 带来了 <Activity> 组件，它可以把一块UI标记为"后台活动"，让React在空闲时预渲染，同时保留它的所有状态。

import { Activity } from 'react';
import { useState } from 'react';

function App() {
  const [showNext, setShowNext] = useState(false);

  return (
    <div>
      <button onMouseEnter={() => setShowNext(true)}>
        悬停预加载下一页
      </button>

      <Activity mode={showNext ? 'visible' : 'hidden'}>
        <NextPage />  {/* 这个组件即使隐藏也在后台保持状态 */}
      </Activity>
    </div>
  );
}

当 mode 是 'hidden' 时，<NextPage> 其实已经被渲染并挂载了，只是视觉上隐藏。用户点击跳转时，瞬间就能看到完整内容，零延迟。

AI可能犯的错 ：它可能还是用传统的懒加载+loading，或者用 display: none 简单隐藏组件，但那样不会预渲染，也不会保留状态。不懂 <Activity>，你就无法识别AI生成的体验优化方案有多"古老"。

---

4. 服务端渲染（SSR）的进化：部分预渲染（Partial Prerendering）

以前的服务端渲染（SSR）要么全静态（SSG），要么全动态（每次请求都重新渲染）。但很多页面是部分静态 + 部分动态的，比如电商详情页（商品描述静态，库存动态）。

React 19 通过 prerender + resume 实现了"部分预渲染"：

// 服务端代码
import { prerender, resume } from 'react-dom/server';

async function handleRequest(req, res) {
  // 先预渲染静态部分，得到 HTML 和 一个 postponed 状态
  const { html, postponed } = await prerender(<App page={req.url} />);

  // 发送静态 HTML 给 CDN
  res.send(html);

  // 当真实用户请求时，用 postponed 继续渲染动态内容
  const stream = await resume(<App page={req.url} />, postponed);
  stream.pipe(res);
}

这样，静态部分可以缓存到CDN，动态部分在请求时才补全，首屏速度大幅提升。

AI可能犯的错 ：它可能还是用传统的 renderToString 全量渲染，或者笨拙地把所有内容都动态化。如果你不知道有 prerender，就可能放过性能优化的机会。

---

5. 开发者体验（DX）的温暖细节

5.1 useEffectEvent：告别依赖地狱

useEffect 里经常要依赖一些函数，但这些函数本身又依赖外部变量，导致依赖数组越来越长。React 19 提供了 useEffectEvent，让你把"事件型"逻辑分离出去，不再参与依赖追踪。

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const onMessage = useEffectEvent((msg) => {
    showNotification(theme, msg); // 这里依赖 theme，但不想因此重新订阅
  });

  useEffect(() => {
    const connection = connect(roomId);
    connection.on('message', onMessage);
    return () => connection.disconnect();
  }, [roomId]); // 依赖数组里不再需要 onMessage，因为它是事件
}

以前你必须用 useCallback 把 onMessage 包裹起来，并且把 theme 也加进依赖，导致订阅函数反复重建。现在用 useEffectEvent，一切优雅了。

AI可能犯的错 ：它可能依然生成一长串依赖，或者用 useCallback 勉强应付。如果你不懂这个新Hook，就不知道怎么优化。

5.2 性能追踪：Chrome DevTools 直接看 React 调度

在 React 19 里，打开 Chrome 的 Performance 面板，你可以看到 React 的自定义轨迹 ------ 哪些任务是由 scheduler 调度的，哪个组件占用了多少时间。这简直是性能调优的神器。

以前我们只能靠 console.time 或者 React DevTools 的 Profiler，现在可以直接用浏览器原生工具分析。

AI可能犯的错：它可能写出性能极差的组件，但你看不出来，因为没有性能数据支撑。现在你可以用工具轻松发现瓶颈，并告诉 AI："这里，重渲染太多了，优化一下。"

---

总结：AI 写代码，你懂新特性，才能当好"指挥官"

新特性	核心价值	不懂它，你可能错过什么
Actions	简化数据提交、loading、错误处理	AI 生成一堆重复代码，你不知道可以用几行搞定
use	条件分支里用"钩子"，更灵活	AI 生成的组件可能报错，你不理解为什么
<Activity>	后台预渲染，瞬时切换	AI 的体验优化方案落后，用户感知不到流畅
Partial Prerendering	极速首屏，动静分离	AI 可能让所有内容动态化，浪费资源
useEffectEvent	消除依赖地狱，Effect 更干净	AI 的 Effect 可能频繁重建，性能差
性能追踪	可视化调度，快速定位瓶颈	AI 的性能问题你无法精确发现

AI 是强大的助手，但绝不是万能的代码审查员。 只有我们自己掌握了最新特性，才能在 AI 生成的代码里挑出毛病、指出优化方向，甚至手把手教 AI 写出更现代的代码。

所以，别停下学习的脚步。每学一个新特性，你就多了一把指挥 AI 的权杖。React 19 的这些更新，正是我们进化成"AI指挥官"的必修课。

---

你对哪个新特性最感兴趣？或者你在 review AI 代码时遇到过哪些奇葩问题？欢迎在评论区分享！