1. React 编译器
背景：React18 引入并发渲染，但还需要手动添加useMemo和useCallback优化性能。React19的编译器(React Compiler)通过分析JSX和JavaScript代码，自动应用Memoization,减少不必要的重渲染。
工作原理：
- 编译器将 JSX 转换为优化的 JavaScript 代码，分析组件的依赖关系。
- 自动为组件和 Hook 添加 Memoization，无需手动调用
useMemo或useCallback。 - 支持条件渲染、循环和动态依赖的优化。
// 传统方式：手动使用 useMemo
function DocumentList({ documents }) {
const filteredDocs = useMemo(() => {
return documents.filter(doc => doc.title.includes('Report'));
}, [documents]);
return <ul>{filteredDocs.map(doc => <li key={doc.id}>{doc.title}</li>)}</ul>;
}
// React 19：编译器自动优化
function DocumentList({ documents }) {
const filteredDocs = documents.filter(doc => doc.title.includes('Report'));
return <ul>{filteredDocs.map(doc => <li key={doc.id}>{doc.title}</li>)}</ul>;
}
2.服务器组件
工作原理：
- 使用
"use server"指令标记服务器组件。 - 服务器组件运行在服务器端，不包含客户端交互逻辑（如
useState）。 - 与客户端组件（
"use client"）结合，实现混合渲染。
// src/components/DocumentList.server.tsx
// "use server";
export async function DocumentList() {
const documents = await fetchDocuments(); // 服务器端获取数据
return (
<ul>
{documents.map(doc => <li key={doc.id}>{doc.title}</li>)}
</ul>
);
}
3.Actions
背景：传统React表单处理需要手动管理状态和异步逻辑，React19 引入Actions,通过 formAction 属性和 useActionState Hook 简化异步操作。
工作原理：
- 使用
<form action={handleSubmit}>指定异步处理函数。 useActionState管理表单状态和提交结果。useFormStatus提供表单提交状态（如pending）。
import { useActionState } from 'react';
async function searchDocuments(formData) {
const query = formData.get('query');
// 模拟搜索
return await fetchDocuments(query);
}
function SearchForm() {
const [state, formAction] = useActionState(searchDocuments, null);
return (
<form action={formAction}>
<input name="query" type="text" aria-label="搜索文档" />
<button type="submit">搜索</button>
{state && <p>结果: {state.length} 条记录</p>}
</form>
);
}
4.新Hook
- use Hook：
- 允许在渲染中直接读取 Promise 或 Context，支持条件调用。
- 示例：
const data = use(fetchData());
- useActionState：
- 管理表单提交的状态和结果。
- 示例：
const [state, formAction] = useActionState(submitForm, initialState);
- useFormStatus：
- 提供表单提交状态（如 pending）。
- 示例：
<button disabled={status.pending}>提交</button>
- useOptimistic：
- 实现乐观更新，立即显示更新结果，等待异步确认。
- 示例：
const [optimisticState, updateOptimistic] = useOptimistic(currentState);
5.文档元数据管理
背景：React 19 原生支持 <title>、<meta> 和 <link>标签，自动提升到 <head>。
6.资源加载优化
背景：资源加载（如脚本、样式、字体）可能导致页面闪烁或延迟。React 19 引入 preload 和 preinit API，用于异步加载资源。
工作原理：
preload: 预加载资源（如图片、字体），但不执行。preinit: 预加载并立即初始化（如脚本、样式）。
