React 19 实用指南：新特性与最佳实践

React 19 带来了诸多新特性，包括全新的 Hooks、性能优化和 Developer Experience 提升。

use() Hook

use() 是 React 19 最重磅的新特性，允许在组件中读取 Promise 或 Context：

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(c => );
}

// 结合 Suspense 使用
function App() {
  return (
    <Suspense fallback={
Loading...</div>>
      <Comments commentsPromise={fetchComments()} />
    </Suspense>
  );
}

React Compiler

React Compiler（原 React Forget）自动优化重渲染，只需要遵循规则编写代码：

// 之前需要手动 useMemo/useCallback
function ExpensiveComponent({ data }) {
  const processed = useMemo(() => {
    return data.map(item => expensiveOperation(item));
  }, [data]);
  
  return processed.map(item => );
}

// React Compiler 自动优化，无需手动 memo
function ExpensiveComponent({ data }) {
  return data.map(item => );
}

Actions

内置的 Actions API 让表单处理变得前所未有的简单：

function Form() {
  async function submit(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    await saveToDatabase(formData);
  }
  
  return (
    <form action={submit}>
      <input name="title" />
      <textarea name="content" />
      <button type="submit">提交</button>
    </form>
  );
}

Web Components 支持

React 19 原生支持 Web Components，无需额外封装：

class MyElement extends HTMLElement {
  connectedCallback() {
    const root = ReactDOM.createRoot(this);
    root.render(<Greeting name="World" />);
  }
}

customElements.define(my-element, MyElement);

新的 Hooks

// useFormStatus - 获取表单提交状态
function SubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit">
    {pending ? 提交中... : 提交}
  </button>;
}

// useActionState - 简化 Action 状态管理
function Counter() {
  const [state, action] = useActionState(async (prev, formData) => {
    const count = formData.get(count);
    return prev + Number(count);
  }, 0);
  
  return <form action={action}>
    <input type="number" name="count" />
    <button>相加</button>
    <p>结果: {state}</p>
  </form>;
}

迁移建议

1. 先升级到 React 18.3，获得 use() 的 polyfill
2. 检查第三方库兼容性
3. 逐步采用 Actions API
4. 开启 React Compiler 实验性支持

总结

React 19 大幅简化了复杂场景的处理，建议尽快升级体验。新手应重点关注 use() Hook 和 Actions 这两个最实用的特性。