一文搞懂 React 19 新特性

import { useActionState } from 'react';

// 一个模拟的异步 API 调用
async function updateName(formData) {
  const name = formData.get('name');
  if (!name) {
    return 'Name is required';
  }
  // 模拟网络请求
  await new Promise(resolve => setTimeout(resolve, 1000));
  return null; // 表示成功
}

function NameForm() {
  // useActionState 接收一个异步函数和初始状态
  // 返回 [错误状态, 提交动作, 是否进行中]
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData);
      return error;
    },
    null // 初始状态为 null
  );

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

import { useOptimistic, useState } from 'react';

function LikeButton({ initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  // useOptimistic 接收当前状态
  // 返回一个乐观状态和一个更新函数
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(
    likes,
    (currentState, amount) => currentState + amount
  );

  const handleClick = async () => {
    // 立即乐观地更新 UI
    setOptimisticLikes(1);
    // 模拟向服务器发送请求
    await likePost(); 
    // 实际更新状态
    setLikes((prev) => prev + 1);
  };

  return (
    <button onClick={handleClick}>
      {optimisticLikes} Likes {/* 按钮上的数字会立即增加 */}
    </button>
  );
}

import { useFormStatus } from 'react-dom';

// 这是一个位于 <form> 内部的子组件
function AdvancedFormStatus() {
  const { pending, data, method } = useFormStatus();

  return (
    <div style={{ opacity: pending ? 0.7 : 1 }}>
      {/* 显示提交状态 */}
      <button type="submit" disabled={pending}>
        {pending ? (method === 'POST' ? '提交中...' : '获取中...') : '提交'}
      </button>

      {/* 如果正在提交，显示正在提交的数据预览 */}
      {pending && data && (
        <div>
          <p>正在提交的数据：</p>
          <ul>
            {/* 遍历显示所有表单项 */}
            {Array.from(data.entries()).map(([key, value], index) => (
              <li key={index}>{key}: {value.toString()}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

// 在父组件中使用
function MyForm() {
  async function handleSubmit(formData) {
    // 你的表单提交逻辑
    console.log('提交数据：', Object.fromEntries(formData));
    // 模拟网络请求
    await new Promise(resolve => setTimeout(resolve, 2000));
  }

  return (
    <form action={handleSubmit}>
      <input type="text" name="username" placeholder="用户名" />
      <input type="email" name="email" placeholder="邮箱" />
      <AdvancedFormStatus />
    </form>
  );
}

import { use, Suspense } from 'react';

// 一个模拟的数据获取函数，返回 Promise
function fetchComments() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(['Great post!', 'Thanks for sharing.']);
    }, 1000);
  });
}

function Comments({ commentsPromise }) {
  // 使用 use Hook 来解析 Promise
  // 需要与 Suspense 配合使用以显示加载状态
  const comments = use(commentsPromise);
  return comments.map((comment, index) => <p key={index}>{comment}</p>);
}

function BlogPost() {
  // 将 Promise 作为 prop 传递给 Comments 组件
  return (
    <div>
      <h1>My Blog Post</h1>
      <Suspense fallback={<div>Loading comments...</div>}>
        <Comments commentsPromise={fetchComments()} />
      </Suspense>
    </div>
  );
}

// ProductDetails.server.js - 服务端组件
// 服务端组件可以是异步的，直接访问后端资源
async function ProductDetails({ productId }) {
  // 在服务端直接获取数据
  const product = await db.products.get(productId);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* 在服务端组件内部嵌套客户端交互组件 */}
      <AddToCartButton product={product} />
    </div>
  );
}

// AddToCartButton.client.js - 客户端组件
// 使用 "use client" 指令标记
'use client';
import { useOptimistic } from 'react';

function AddToCartButton({ product }) {
  const [cart, setCart] = useOptimistic([]);

  const addToCart = async () => {
    // ... 客户端交互逻辑
  };

  return <button onClick={addToCart}>Add to Cart</button>;
}

function BlogPost({ post }) {
  return (
    <article>
      {/* 这些标签会被自动提升到 <head> 中 */}
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <meta name="keywords" content={post.keywords} />
      <link rel="canonical" href={post.canonicalUrl} />

      {/* 页面内容 */}
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

import { preload, preinit } from 'react-dom';

function ProductPage() {
  // 预加载重要字体，避免页面渲染时的字体闪烁
  preload('/fonts/main-font.woff2', { as: 'font', type: 'font/woff2' });
  // 预初始化关键脚本，加快其执行速度
  preinit('/js/critical-checkout.js', { as: 'script' });

  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
}

// React 19 之前：需要 forwardRef
const MyInput = React.forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

// React 19：直接作为 prop 使用
function MyInput({ ref, ...props }) {
  return <input {...props} ref={ref} />;
}

function App() {
  const inputRef = useRef(null);
  return <MyInput ref={inputRef} />;
}

// 之前
<ThemeContext.Provider value="dark">
  <Children />
</ThemeContext.Provider>

// React 19 简化语法
<ThemeContext value="dark">
  <Children />
</ThemeContext>

// 开发者编写的代码
function MyComponent({ data }) {
  const transformedData = expensiveTransformation(data);
  return <div>{transformedData}</div>;
}

// React Compiler 可能会在背后自动优化，类似于：
function MyComponent_optimized({ data }) {
  const transformedData = useMemo(() => expensiveTransformation(data), [data]);
  return <div>{transformedData}</div>;
}