React 19 新特性解析

引言

React 19是React近年来最重要的版本更新之一，带来了革命性的新功能，包括Actions、Server Components、更强大的并发特性等。本文将详细解析这些新特性及其对开发实践的影响。

Actions

Actions是React 19最重要的新特性之一，它简化了数据变更和副作用处理。

// 使用useActionState处理表单提交
import { useActionState } from 'react';

async function submitForm(prevState, formData) {
    const name = formData.get('name');
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    if (name.length < 2) {
        return { error: '名字至少2个字符' };
    }
    
    return { success: true, message: `欢迎, ${name}!` };
}

function MyForm() {
    const [state, action, isPending] = useActionState(submitForm, null);
    
    return (
        <form action={action}>
            <input type="text" name="name" placeholder="你的名字" />
            <button type="submit" disabled={isPending}>
                {isPending ? '提交中...' : '提交'}
            </button>
            {state?.error && <p style={{color: 'red'}}>{state.error}</p>}
            {state?.success && <p style={{color: 'green'}}>{state.message}</p>}
        </form>
    );
}

useActionState核心优势

• 自动处理加载状态
• 保留上一次提交结果
• 与useFormStatus配合使用
• 简化错误处理逻辑

useFormStatus

获取表单提交状态，无需手动管理loading状态。

import { useFormStatus } from 'react';

function SubmitButton() {
    const { pending, data, method, action } = useFormStatus();
    
    return (
        <button type="submit" disabled={pending}>
            {pending ? '提交中...' : '提交表单'}
        </button>
    );
}

Server Components

React Server Components允许组件在服务器上渲染，减少客户端JavaScript体积。

// Note.js (服务器组件)
import { db } from './db';

async function Note({ id }) {
    const note = await db.notes.get(id);
    
    return (
        <article>
            <h2>{note.title}</h2>
            <p>{note.body}</p>
        </article>
    );
}

// 这个组件不会包含在客户端bundle中
// 直接在服务器上渲染完成

Server Components优势

• 零bundle大小：服务器组件代码不发送到客户端
• 直接后端访问：可直接查询数据库、文件系统
• 自动代码分割：客户端组件自动分割

useOptimistic

乐观更新模式，提升用户交互体验。

import { useOptimistic } from 'react';

function ChangeName({ currentName, onUpdateName }) {
    const [optimisticName, setOptimisticName] = useOptimistic(currentName);
    
    const submitAction = async (formData) => {
        const newName = formData.get('name');
        setOptimisticName(newName); // 立即更新UI
        
        const response = await updateName(newName); // 真实API调用
        onUpdateName(response.updatedName);
    };
    
    return (
        <form action={submitAction}>
            <p>你的名字: {optimisticName}</p>
            <input type="text" name="name" />
        </form>
    );
}

Refs作为prop传递

现在可以把refs作为普通prop传递给组件。

function MyInput({ placeholder, ref }) {
    return <input placeholder={placeholder} ref={ref} />;
}

// 使用ref
const inputRef = useRef(null);
<MyInput ref={inputRef} placeholder="输入内容" />

资源预加载

React 19提供了资源预加载API，优化页面加载性能。

import { prefetchDNS, preconnect, preload } from 'react';

function MyComponent() {
    // 预加载脚本
    useEffect(() => {
        preload('https://example.com/script.js', { as: 'script' });
    }, []);
    
    // 预连接
    preconnect('https://api.example.com');
    
    return <div>内容</div>;
}

use hook

通用hook模式，统一异步数据获取。

// use hook 简化异步操作
function use(resource) {
    if (resource instanceof Promise) {
        const suspendedData = useSuspensePromise(resource);
        return suspendedData.read();
    }
    return resource;
}

// 使用示例
function Comments({ commentsPromise }) {
    const comments = use(commentsPromise);
    return comments.map(c => <p key={c.id}>{c.text}</p>);
}

性能优化

自动记忆化

React 19改进了编译器，自动优化不必要的重渲染。

useDeferredValue改进

更智能的延迟值处理，减少卡顿。

迁移建议

1. 首先升级到React 18.3（最终稳定版）
2. 运行升级脚本：`npx @react-codemod@latest upgrade-19 .`
3. 逐步使用新hook：useActionState、useOptimistic
4. 尝试在非关键页面启用Server Components