介绍
React 19 成为前端开发领域的游戏规则改变者,引入了许多创新功能。从精致的并发渲染到新颖的状态处理机制,React 19 增强了性能和开发人员体验。在本文中,我们将探讨这些前沿的附加功能,深入了解它们如何重塑动态用户界面开发的格局。无论您是经验丰富的 React 开发人员还是该框架的新手,了解 React 19 的进步对于在现代 Web 开发中保持领先地位至关重要。与我们一起踏上旅程,揭开 React 19 的变革性功能,这些功能使 React 19 成为一个里程碑版本,为前端创新的未来奠定基础。
新功能
1.React编译器
React Compiler 不再是一个研究项目,现在正在为 Instagram.com 的生产提供支持,这代表了 React 功能的重大进步。它通过引入优化编译器解决了状态更改时过度重新渲染的问题。与手动记忆不同,该编译器会在状态发生变化时自动重新渲染特定的 UI 部分,从而消除代码混乱。它在 JavaScript 和 React 规则内运行,确保安全性和性能。开发人员可以使用严格模式和 React 的 ESLint 插件等工具验证他们的代码。该编译器已经在 Instagram.com 上活跃,并准备在 Meta 界面上进一步集成,并计划开源版本。
2. Actions
Action允许您将函数传递给 DOM 元素,例如
ini
<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>
action 函数可以灵活地同步或异步操作。它可以使用标准 JavaScript 在客户端定义,也可以使用"use server"指令在服务器上定义。React 负责在使用某个操作时管理数据提交生命周期,提供 useFormStatus 和 useFormState 等挂钩来访问当前表单操作的状态和响应。
javascript
import { useFormStatus } from "react-dom";
import action from './actions';
function Submit() {
const status = useFormStatus();
return <button disabled={status.pending}>Submit</button>
}
export default function App() {
return (
<form action={action}>
<Submit />
</form>
);
}
javascript
import { useFormState } from "react-dom";
async function increment(previousState, formData) {
return previousState + 1;
}
function StatefulForm({}) {
const [state, formAction] = useFormState(increment, 0);
return (
<form>
{state}
<button formAction={formAction}>Increment</button>
</form>
)
}
默认情况下,操作在转换内提交,从而在处理过程中保持当前页面的交互性。通过支持异步函数,在转换中引入 async/await 可以显示待处理的 UI,利用 isPending 状态在异步请求(例如获取数据)期间发出正在进行的处理信号。
3. React Canary
Canary 标志着我们 React 开发方法的转变。与以前在 Meta 中私下研究和开发功能的方法不同,Canary 涉及通过社区协作公开构建,以完善 React Labs 博客系列中展示的功能。这种方法可确保用户在开发过程的早期就了解即将推出的功能。它使他们能够见证最终阶段,而不仅仅是在稳定版发布时遇到完善的产品。
React Canary 中的一些功能包括
React 服务器组件、资产加载、文档元数据和操作
1. 指令
"使用客户端"和"使用服务器"是为全栈 React 框架设计的捆绑器功能。它们标记了两个环境之间的"分割点":"使用客户端"指示捆绑器生成标签<script>
(如 Astro Island),而"使用服务器"则告诉捆绑器生成 POST 端点(如 tRPC Mutations)。它们一起让您可以编写可重用的组件,这些组件将客户端交互与相关的服务器端逻辑组合在一起。
2. 文档元数据:
支持在组件树中任何位置渲染<title>
、<meta>
和元数据<link>
标签的支持。它们在所有环境中都以相同的方式工作,包括完全客户端代码、SSR 和 RSC。这位 React Helmet 等库开创的功能提供了内置支持。
3.Actions
Actions用于管理从客户端向服务器发送数据。您可以向诸如<form/>
之类的元素添加操作,使用 useFormStatus 访问状态,使用 useFormState 处理结果,并使用 useOptimistic 乐观地更新 UI。
javascript
import { useOptimistic } from 'react';
function AppContainer() {
const [optimisticState, addOptimistic] = useOptimistic(
state,
// updateFn
(currentState, optimisticValue) => {
// merge and return new state
// with optimistic value
}
);
}
开始使用 React Canary
java
//for npm
npm install react@canary react-dom@canary
//for yarn
yarn add react@canary react-dom@canary
创建专用的测试环境比修改当前的生产依赖项更可取。这种方法使您能够提供反馈,而不会导致实时应用程序中断。