React 19 Beta 已经发布，它引入了几个新概念，可以简化 React 应用程序中的状态管理、错误处理和异步操作。在本文中，我将快速总结这些功能，以便您可以快速掌握要点。
使用操作(Actions)简化异步操作
React 19 的突出功能之一是引入“Actions”。Actions是处理异步操作后的数据突变和状态更新的新方法。以前，开发人员必须手动管理待处理状态、错误和乐观更新，这可能会很麻烦。 React 19 旨在显着简化这个过程。
例如: 更新用户名
考虑一个常见的用例，其中用户提交表单来更新其姓名。在 React 的早期版本中，您可能会像这样处理异步 API 请求：
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);
const handleSubmit = async () => {
setIsPending(true);
const error = await updateName(name);
setIsPending(false);
if (error) {
setError(error);
return;
}
redirect("/path");
};
return (
<div>
<input value={name} onChange={(event) => setName(event.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
在 React 19 中，您可以利用useTransition钩子更简洁地处理挂起状态：
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = async () => {
startTransition(async () => {
const error = await updateName(name);
if (error) {
setError(error);
return;
}
redirect("/path");
});
};
return (
<div>
<input value={name} onChange={(event) => setName(event.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
这种新方法自动管理挂起状态和错误处理，使代码更干净、更易于管理。
表单处理的增强
React 19 在表单管理方式方面引入了多项改进，特别是通过将 Actions 集成到表单元素中。这项新功能简化了表单提交流程和错误处理。
简化的表格提交
使用操作，表单现在可以自动处理数据提交，而无需繁琐的错误和状态管理。以下是您可以如何使用它：
function ChangeName({ name, setName }) {
const [error, submitAction, isPending] = useActionState(
async (previousState, formData) => {
const error = await updateName(formData.get("name"));
if (error) {
return error;
}
redirect("/path");
}
);
return (
<form action={submitAction}>
<input type="text" name="name" />
<button type="submit" disabled={isPending}>Update</button>
{error && <p>{error}</p>}
</form>
);
}
此代码片段显示了一个利用hooks来管理提交过程的表单。useActionState该钩子封装了处理挂起状态、错误和实际数据提交的逻辑，减少了代码并提高了可读性。
新钩子—— useFormStatus
该挂钩允许组件直接访问表单的状态，将其视为上下文。这对于设计需要对表单状态做出反应的组件特别有用。
import { useFormStatus } from 'react-dom';
function DesignButton() {
const { pending } = useFormStatus();
return <button type="submit" disabled={pending}>Submit</button>;
}
新钩子—— useOptimistic
该钩子允许开发人员乐观地更新 UI，在操作完成之前提供即时反馈。
function ChangeName({ currentName, onUpdateName }) {
const [optimisticName, setOptimisticName] = useOptimistic(currentName);
const submitAction = async formData => {
const newName = formData.get("name");
setOptimisticName(newName);
const updatedName = await updateName(newName);
onUpdateName(updatedName);
};
return (
<form action={submitAction}>
<p>Your name is: {optimisticName}</p>
<label>Change Name:</label>
<input type="text" name="name" disabled={currentName !== optimisticName} />
</form>
);
}
useOptimistic 钩子将在 updateName 请求正在进行时立即呈现optimisticName。当更新完成或发生错误时，React 会自动切换回 currentName 值。
新的API： use
use 在 React 19 中，设计用于在渲染期间读取资源。它支持暂停组件，直到资源（如Promise）得到解决，从而增强了与 React 的 Suspense 功能的集成。
import { use } from 'react';
function Comments({ commentsPromise }) {
const comments = use(commentsPromise);
return comments.map(comment => <p key={comment.id}>{comment}</p>);
}
function Page({ commentsPromise }) {
return (
<Suspense fallback={<div>Loading...</div>}>
<Comments commentsPromise={commentsPromise} />
</Suspense>
);
}
服务器组件(React Server Components React)
React Server 组件允许在与客户端应用程序分开的独特环境中提前渲染组件。此功能支持在 CI 服务器上的构建时或 Web 服务器上的每个请求执行，从而提高性能和资源效率。
Server Actions 服务器操作
React 19 中的服务器操作使客户端组件能够调用异步服务器执行的函数。这种交互通过指令 "use server" 得到简化，从而自动在客户端和服务器之间传递引用。
React 19 中的增强功能
ref 作为Prop
React 19 允许 ref 直接作为 prop 传递给函数组件
function MyInput({ placeholder, ref }) {
return <input placeholder={placeholder} ref={ref} />;
}
<MyInput ref={React.createRef()} />
<Context> as a Provider
新的 React 版本允许 <Context> 直接用作提供程序：
const ThemeContext = createContext('');
function App({ children }) {
return <ThemeContext value="dark">{children}</ThemeContext>;
}
清理 ref 功能
React 19 支持从 ref 回调返回清理函数，有助于在卸载组件时更好地管理资源。
<input ref={ref => {
// Actions on ref creation
return () => {
// Cleanup actions
};
}} />
useDeferredValue 具有初始值
React 19 中为useDeferredValue引入了initialValue ，允许在任何延迟更新之前立即使用默认值。
function Search({ deferredValue }) {
// On initial render the value is ''.
// Then a re-render is scheduled with the deferredValue.
const value = useDeferredValue(deferredValue, '');
return <Results query={value} />;
}
Advanced Document Metadata Management 高级文档元数据管理
React 19 支持在组件渲染中渲 <title> 、 <meta> 和 <link> 标签，自动管理它们在文档的 <head> .
function BlogPost({ post }) {
return (
<article>
<h1>{post.title}</h1>
<title>{post.title}</title>
<meta name="author" content="Josh" />
<link rel="author" href="https://twitter.com/joshcstory/" />
<meta name="keywords" content={post.keywords} />
<p>Eee equals mc-squared...</p>
</article>
);
}
当 React 渲染这个组件时，它会看到 <title> <link> 和 <meta> 标签，并自动将它们提升到文档 <head> 部分。
Improved Handling of Stylesheets and Scripts 改进了样式表和脚本的处理
React 19 增强了样式表和脚本的处理方式，确保了正确的加载顺序并避免了重复。
Support for Preloading Resources 支持预加载资源
React 19 引入了用于加载和预加载资源的新 API，增强了初始加载和后续更新期间的性能和用户体验。
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
function MyComponent() {
// Eagerly loads and executes the script
preinit('https://.../path/to/some/script.js', { as: 'script' });
// Preloads the font
preload('https://.../path/to/font.woff', { as: 'font' });
// Preloads the stylesheet
preload('https://.../path/to/stylesheet.css', { as: 'style' });
// DNS prefetch for upcoming requests
prefetchDNS('https://...');
// Preconnects to the server for upcoming requests
preconnect('https://...');
}
// Resulting HTML from server-side rendering
<html>
<head>
<link rel="prefetch-dns" href="https://...">
<link rel="preconnect" href="https://...">
<link rel="preload" as="font" href="https://.../path/to/font.woff">
<link rel="preload" as="style" href="https://.../path/to/stylesheet.css">
<script async="" src="https://.../path/to/some/script.js"></script>
</head>
<body>
...
</body>
</html>
这些 API 有助于优化资源发现和加载，通过减少关键渲染路径期间的加载时间来提高性能。
Full Support for Custom Elements 完全支持自定义元素
React 19 提供了对自定义元素的全面支持，确保与自定义元素无处不在的标准完全兼容。这种支持有助于在 React 应用程序中集成自定义元素，提高互操作性和组件可重用性。
