React 19 现已稳定！新功能 👇

React 19 带来了令人兴奋的新功能和改进！

你好，Dev，我是Md Taqui Imam，React 19现在已经稳定，所以让我们探索一下有什么新功能以及如何在你的项目中使用这些功能。

本指南将通过实际示例向您介绍最重要的更新。

操作和表单处理⭐

Actions 是 React 19 中最大的新增功能之一。它们使处理表单提交和数据变异变得更加容易。

function UpdateProfile() {
 const [error, submitAction, isPending] = useActionState(
 async (previousState, formData) => {
 const name = formData.get("name");
 try {
 await updateProfile(name);
 return null; // No error
 } catch (err) {
 return "Failed to update profile";
 }
 },
 null
 );
return (
 <form action={submitAction}>
 <input type="text" name="name" />
 <button type="submit" disabled={isPending}>
 {isPending ? "Updating…" : "Update Profile"}
 </button>
 {error && <p className="error">{error}</p>}
 </form>
 );
}

使用表单状态🟢

新的useFormStatus钩子可以轻松显示加载状态：

import { useFormStatus } from 'react-dom';
function SubmitButton() {
 const { pending } = useFormStatus();

 return (
 <button disabled={pending}>
 {pending ? 'Submitting…' : 'Submit'}
 </button>
 );
}

新的 Hooks 🎉

1. useOptimistic 🆕
此钩子有助于在等待服务器响应时创建即时反馈：

import { use } from 'react';
function UserProfile({ userPromise }) {
 const user = use(userPromise);

 return (
 <div>
 <h1>{user.name}</h1>
 <p>{user.email}</p>
 </div>
 );
}

文档元数据支持

React 19 现在原生支持元数据标签：

function BlogPost({ post }) {
 return (
 <article>
 <title>{post.title}</title>
 <meta name="description" content={post.summary} />
 <link rel="canonical" href={post.url} />

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

另请查看此博客

7 个鲜为人知的秘密 UI 库🔥

随机・ 12月15日

#webdev #javascript #programming #frontend

资源加载改进

用于优化资源加载的新 API：

import { preload, preinit, preconnect } from 'react-dom';
function App() {
 // Preload important resources
 preload('/fonts/main.woff2', { as: 'font' });
 preinit('/styles/critical.css', { as: 'style' });
 preconnect('https://api.example.com');
return <Main />;
}

Web 组件支持

React 19 现在完全支持自定义元素：

function App() {
 return (
 <div>
 <custom-element
 stringProp="hello"
 numberProp={42}
 objectProp={{ foo: 'bar' }}
 onCustomEvent={(e) => console.log(e.detail)}
 />
 </div>
 );
}

其他改进🛠️

Ref 作为 Prop

// Old way with forwardRef
const OldInput = forwardRef((props, ref) => (
 <input ref={ref} {…props} />
));
// New way in React 19
function NewInput({ ref, …props }) {
 return <input ref={ref} {…props} />;
}

更好的错误报告🔥

React 19 提供了更清晰的错误消息和更好的 Hydration 错误报告：

const root = createRoot(container, {
 onCaughtError: (error) => {
 // Handle errors caught by Error Boundaries
 logError(error);
 },
 onUncaughtError: (error) => {
 // Handle errors not caught by Error Boundaries
 reportFatalError(error);
 }
});