React 19 新特性完全指南：Actions、use() Hook、服务器组件、编译器与自动记忆化

// ❌ React 18 的样板代码
function Form() {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (formData) => {
    setIsPending(true);
    setError(null);
    try {
      await submitForm(formData);
    } catch (e) {
      setError(e);
    } finally {
      setIsPending(false);
    }
  };
}

import { useTransition } from 'react';

function UpdateName() {
  const [isPending, startTransition] = useTransition();

  const handleSubmit = async (formData) => {
    startTransition(async () => {
      await updateName(formData.get('name'));
    });
  };

  return (
    <form action={handleSubmit}>
      <input name="name" />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Updating...' : 'Update'}
      </button>
    </form>
  );
}

import { useActionState } from 'react';

async function submitAction(prevState, formData) {
  const name = formData.get('name');

  try {
    await updateName(name);
    return { success: true, message: 'Name updated!' };
  } catch (error) {
    return { success: false, message: error.message };
  }
}

function Form() {
  const [state, formAction, isPending] = useActionState(submitAction, {
    success: false,
    message: '',
  });

  return (
    <form action={formAction}>
      <input name="name" required />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Updating...' : 'Update'}
      </button>
      {state.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
    </form>
  );
}

import { useOptimistic } from 'react';

function Messages({ messages }) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [...state, { ...newMessage, sending: true }]
  );

  const sendMessage = async (formData) => {
    const message = formData.get('message');

    // 立即显示乐观消息
    addOptimisticMessage({ text: message });

    // 实际发送
    await api.sendMessage(message);
  };

  return (
    <div>
      {optimisticMessages.map((msg, i) => (
        <div key={i} style={{ opacity: msg.sending ? 0.5 : 1 }}>
          {msg.text}
        </div>
      ))}
      <form action={sendMessage}>
        <input name="message" />
        <button>Send</button>
      </form>
    </div>
  );
}

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

function Button() {
  // 替代 useContext，可以在条件/循环中调用
  const theme = use(ThemeContext);
  return <button className={theme}>{/* ... */}</button>;
}

import { use, Suspense } from 'react';

function Comments({ commentsPromise }) {
  // use() 可以挂起组件，直到 Promise resolve
  const comments = use(commentsPromise);

  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment.id}>{comment.text}</li>
      ))}
    </ul>
  );
}

function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <Suspense fallback={<CommentsSkeleton />}>
        <Comments commentsPromise={fetchComments(post.id)} />
      </Suspense>
    </div>
  );
}

import { use, Suspense } from 'react';
import { Await, useLoaderData } from 'react-router-dom';

function Dashboard() {
  const { user, stats, notifications } = useLoaderData();

  return (
    <div>
      <h1>Welcome, {user.name}</h1>

      {/* 旧方式：Await */}
      <Suspense fallback={<StatsSkeleton />}>
        <Await resolve={stats}>
          {(data) => <Stats data={data} />}
        </Await>
      </Suspense>

      {/* React 19 新方式：use() — 更简洁 */}
      <Suspense fallback={<NotificationsSkeleton />}>
        <Notifications promise={notifications} />
      </Suspense>
    </div>
  );
}

function Notifications({ promise }) {
  const notifications = use(promise);  // 直接解包 Promise
  return <NotificationList data={notifications} />;
}

// ❌  React 18 的手动优化样板
function ExpensiveComponent({ data, onUpdate }) {
  const processed = useMemo(() =>
    data.map(item => heavyComputation(item)),
    [data]
  );

  const handleClick = useCallback((id) => {
    onUpdate(id);
  }, [onUpdate]);

  return <List items={processed} onClick={handleClick} />;
}

// ✅ React 19 + Compiler：开发者只写业务逻辑
function ExpensiveComponent({ data, onUpdate }) {
  const processed = data.map(item => heavyComputation(item));
  // Compiler 自动包裹 useMemo

  const handleClick = (id) => {
    onUpdate(id);
  };
  // Compiler 自动包裹 useCallback

  return <List items={processed} onClick={handleClick} />;
}

function ExpensiveComponent({ data, onUpdate }) {
  const processed = useMemo(
    () => data.map(item => heavyComputation(item)),
    [data]  // Compiler 自动推导依赖
  );

  const handleClick = useCallback(
    (id) => { onUpdate(id); },
    [onUpdate]
  );

  return <List items={processed} onClick={handleClick} />;
}

npm install -D babel-plugin-react-compiler

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      runtimeModule: 'react/compiler-runtime',
    }],
  ],
};

// ✅ Compiler 可以安全优化
const [count, setCount] = useState(0);
const doubled = count * 2;  // 自动 memoized

// ❌ Compiler 无法追踪（会跳过优化警告）
const ref = useRef({ count: 0 });
ref.current.count += 1;  // 直接修改 ref

// actions.ts —— Server Actions
'use server';

export async function updateName(name: string) {
  // 在服务端执行，无需 API 路由
  await db.user.update({
    where: { id: getCurrentUserId() },
    data: { name },
  });

  revalidatePath('/profile');  // 重新验证缓存
}

// 客户端组件直接调用
'use client';

function ProfileForm() {
  return (
    <form action={updateName}>
      <input name="name" />
      <button>Update</button>
    </form>
  );
}

function BlogPost({ post }) {
  return (
    <>
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:title" content={post.title} />
      <link rel="canonical" href={`https://site.com/posts/${post.id}`} />

      <article>
        <h1>{post.title}</h1>
        <div>{post.content}</div>
      </article>
    </>
  );
}

function Component() {
  return (
    <>
      <link rel="stylesheet" href="styles.css" precedence="default" />
      <div>Content</div>
    </>
  );
}

function Analytics() {
  return (
    <script
      async
      src="https://analytics.example.com/script.js"
    />
  );
}

// ✅ React 19：ref 可以直接传递，不再需要 forwardRef
function Input({ ref, ...props }: { ref: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />;
}

// 使用
function Parent() {
  const inputRef = useRef<HTMLInputElement>(null);
  return <Input ref={inputRef} placeholder="Enter text" />;
}

// ✅ React 19：Context 本身就是 Provider
function App() {
  return (
    <ThemeContext value="dark">
      <Page />
    </ThemeContext>
  );
}

// 替代旧写法
// <ThemeContext.Provider value="dark">

// React 19 的 ref 回调可以返回清理函数
function Component() {
  return (
    <div
      ref={(element) => {
        if (element) {
          console.log('mounted', element);
          return () => console.log('unmounted');  // 清理函数
        }
      }}
    />
  );
}

# 1. 升级依赖
npm install react@latest react-dom@latest

# 2. 升级类型
npm install -D @types/react@latest @types/react-dom@latest

# 3. 运行测试套件，修复废弃警告
npm test

# 4. 逐步采用新特性
# - 新组件用 use() 替代 useContext
# - 新表单用 Actions
# - 实验项目启用 Compiler