数据结构
网络
关系型数据库
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究React 19 - 特性与更新
ReactJS 是一个开源的 JavaScript 库，用于构建动态的单页面应用程序以及创建可复用的交互式 UI 组件。React 由 META（前身为 Facebook）开发和维护。ReactJS 可用于开发小型应用程序以及大型复杂应用程序。
目录
React 19 的新特性是什么？
React 在其最新的版本 React 19 中引入了各种新特性和改进，包括一个新的 React 编译器。React 19 引入了 hooks，例如 useActionState hook 用于更好的状态管理，ref 回调的自动清理，以及并发渲染的增强，新的 React 编译器优化代码以实现更快的执行。所有这些特性和改进都侧重于提高性能和优化服务器组件以实现更快的服务器端渲染。这些改进使 React 19 成为构建更高效和可维护应用程序的重要更新。
ReactJS 的历史
React 由 Meta 软件工程师 Jordan Walke 创建，旨在解决新闻提要性能问题。在 **2011** 年，它被部署在 Facebook 的新闻提要上，并在 **2012** 年被集成到 Instagram 中。
以下是 React 主要事件的历史时间轴
- **2013: ** React 发布，并具有组件化架构和虚拟 DOM 等特性。
- **2015: ** 推出 React Native 用于构建移动应用程序。
- **2016: ** 发布 React 15，并进行了新的更新以提高性能。
- **2017: ** 发布 React 16，并采用了新的 React Fiber 架构以实现更好的渲染。
- **2019: ** 发布 React 16.8，引入了有助于增强状态管理的 hooks。
- **2020: ** 发布 React 17，引入了将 JSX 转换为 JavaScript 的新方法并提高了兼容性。
- **2022: ** 发布 React 18，并具有自动批处理、悬念、并发模式和服务器端渲染 (SSR) 等新特性。
React 19 新特性
React 编译器
React 19 中引入的 React 编译器仍在开发中。但是，它已供用户试用并提供反馈。它具有代码分析和优化等新特性。
React 编译器将 React 代码转换为 Javascript 代码，从而提高应用程序性能。它会自动记忆你的代码，因此无需使用诸如 useCallback、useMemo 和 memo 之类的记忆工具。它会在任何需要的地方应用记忆，而不是用户手动在他们期望需要记忆的地方使用记忆，这使得代码更简洁，并通过减少不必要的代码行提高了可读性。现在，用户无需担心状态更改和 UI，因为编译器本身现在会处理这些问题。
React Actions
React 19 引入了一项新特性 **Actions**，它简化了数据变异和状态更新的处理。Actions 是在提交 表单 时调用的函数，从而简化了表单处理。React 19 支持在转换中使用异步函数来自动处理挂起状态、错误、表单处理和乐观更新，这意味着用户不再需要手动管理这些内容。**主要特性** 如下
- **挂起状态：** Action 提供了一个在请求开始时启动的挂起状态，并在提交最终状态更新时自动重置。
- **乐观更新：** Action 支持新的 useOptimistic hook，允许开发人员在提交请求时向用户显示即时反馈。例如：当你发送任何文本时，它会在发送时显示“正在发送”的提示。
- **错误处理：** Action 提供错误处理，以便在请求失败时显示错误边界，乐观更新会自动恢复到其原始值。
- **表单处理：** action 和 formAction props 可用于表单元素以访问 Action 功能。它有助于表单提交并在提交后自动重置表单。
React 服务器组件
React 服务器组件是 React 19 中引入的一项非常有用的特性。它在捆绑之前，在与客户端应用程序或 SSR 服务器分开的服务器中提前渲染。它可以直接在服务器上渲染 UI 组件。通过在服务器上预渲染组件，RSC 提高了页面加载时间。它使搜索引擎能够更轻松地索引和理解页面的内容，从而改善 SEO。
- **无服务器的服务器组件：** 服务器组件可以在构建时执行以访问文件系统或获取静态内容，因此不需要 Web 服务器。
- **有服务器的服务器组件：** 服务器组件也可以在页面请求期间在 Web 服务器上执行。这允许用户访问他们的数据而无需构建 API。它允许动态渲染，其中组件根据最新数据或用户特定的请求进行渲染。
- **向服务器组件添加交互性：** 服务器组件处理渲染和数据获取，并且不会发送到浏览器，因此可以使用“use client”指令将其与客户端组件集成以添加交互性。
- **使用服务器组件的异步组件：** 服务器组件允许用户使用 async/await 语法编写组件。当您“await”时，React 会挂起并等待 Promise 解析，然后恢复渲染。
React 19 Hooks
React useActionState HooksReact 19 引入了 useActionState hook，它允许用户根据表单操作的结果更新状态。它通过结合处理表单的简单性和状态管理的功能来简化状态管理和表单处理。它旨在使状态管理更加明确、易读，并减少表单中每个输入字段的复杂性。它接受两个参数，如下所示
- **函数：** 它表示在提交表单时要调用的函数。在函数调用时，它接收先前的表单状态作为其初始参数，然后是表单的常用参数。
- **initialState：** 它表示状态的初始值。
- **currenstate** 在第一次渲染期间与 initialState 匹配，并且一旦调用 action，它就会与 action 返回的值匹配。
- **Action：** 它作为 action prop 传递给表单内的表单组件。
这是一个演示“useActionState”hook 的示例。以下示例执行登录操作。该 hook 返回一个包含三个元素的数组，分别是 **loginError** 用于存储登录期间发生的错误，**loginAction** 函数用于触发登录过程，以及 **isLoginPending** 用于指示登录过程是否仍在进行中。
const [loginError, loginAction, isLoginPending] = useActionState(
async (previousState, info) => {
const error = await performLogin(info);
if (error) {
// Returning the error if the login fails.
return error;
}
// Returning null to indicate success.
return null;
},
null,
);
React useFormStatus Hooks
React 19 引入了 useFormStatus hook，它提供有关上次表单提交状态的信息。它允许子组件直接访问父表单的状态，而无需使用 Context 提供程序，从而减少了需要在中间的每个组件中传递表单状态的需求。它可以防止表单在完成当前表单提交之前重新提交。
它不接受任何值作为参数，但返回一个具有以下属性的状态对象
- **Pending：** 它返回一个布尔值，表示表单当前是否正在提交。
- **Data：** 它是一个对象，包含父表单正在提交的数据。如果当前没有活动表单提交或没有父表单，则返回 null。
- **Action：** 它表示对传递给父表单上 action prop 的函数的引用。
- 方法：它表示一个字符串值，指示表单在提交时使用 GET 还是 POST HTTP 方法。默认情况下，表单使用 GET 方法。
以下是一个演示“useFormStatus”钩子的示例。在下面的示例中，提交按钮指示表单提交是否正在等待。在表单提交期间，按钮将被禁用并显示“正在注册”，否则显示“注册”。
import {useFormStatus} from 'react-dom';
function RegisterButton() {
const {pending} = useFormStatus();
return (
<button type="submit" disabled={pending}>
{pending ? 'Registering' : 'Register'}
</button>
);
}
React useOptimistic Hooks
React 19 引入了一个新的钩子，useOptimistic 钩子，它执行乐观更新。它向用户显示立即的结果，而更新请求仍在进行中。它处理异步数据变异期间的乐观 UI 更新。它在异步操作（如实时应用程序）中很有用，例如聊天应用程序，其中用户发送消息，然后它立即显示发送，而不是让用户等待消息传递。
React use API
React 19 引入了一个新的实验性 API use。它是一个 React API，允许您读取资源（如 Promise 或上下文）的值，并允许您异步加载大量资源。它为诸如 useEffect()（用于数据获取）和 useContext()（用于渲染上下文数据）等钩子提供了一种替代方案。
它接受一个参数，即
- resource：它表示您要从中读取值的的数据。它可以是 Promise 或上下文。
它返回一个单一值，即从 resource 读取的 Promise 或上下文的解析值。
限制- 用户只能在组件或钩子内部调用 use API。
- 在服务器组件中，建议使用 async 和 await 而不是 use API。这是因为 use 在数据解析后重新渲染组件，而 async 和 await 从 await 被调用的位置开始渲染。
React 19 改进
使用 ref 作为 Prop
在 React 19 中，用户可以访问 ref 作为函数组件的 prop。通过此改进，它取代了使用 forwardref 的需要，并且将在 React 的未来版本中弃用。
forwardRef 允许父组件将 ref 传递给子组件，但现在我们可以将 ref 作为 prop 传递，这使得 forwardRef 不再需要，从而使代码更易于维护并提高代码的可读性。
水合错误的差异
React 19 改进了水合错误的错误报告。早些时候，它会报告错误，但没有任何关于不匹配的信息。现在，在 React 19 中，它会显示一条关于不匹配的单一消息。
使用 <Context> 作为提供者
React 19 允许您使用 <Context> 作为提供者，而不是 <Context.Provider>。在未来的版本中，<Context.Provider> 将被弃用。
const ThemeContext = createContext('');
function App({children}) {
return (
<ThemeContext value="dark">
{children}
</ThemeContext>
);
}
Ref 的清理函数
React 19 引入了一项新功能，即从 ref 回调中返回一个清理函数。它在 ref 内定义清理函数。此功能允许定义一个清理函数，该函数将在不再需要 ref 时自动调用，例如当 ref 更改或组件卸载时。
它简化了资源管理，因为与 ref 相关的必要清理会自动发生。它防止了内存泄漏的可能性，并确保通过适当的清理使代码易于维护。
支持
文档元数据React 19 引入了一种简化的方法来管理文档元数据标签，例如 <title>、<meta> 和 <link>。早些时候，这些标签需要手动管理或由 react-helmet 等库管理，但 React 19 提供了一种本地方法来直接在 React 组件中处理这些元素。在渲染时，React 会自动将元数据标签提升到文档的 <head> 部分。
React 19 引入了一个专用的组件 DocumentHead，允许声明式地定义和更新文档元数据。它简化了 SEO 管理，因为它允许对标题、描述和元标签进行动态的、组件级别的控制。它确保搜索引擎始终接收最新更新和最准确的元数据，从而提高网页的可见性和排名。
样式表React 19 提供了样式表的轻松管理，无论是外部的（<link rel="stylesheet" href="...">）还是内联的（<style>...</style>），因为它提供了内置支持，确保它们以正确指定的优先级顺序插入 DOM。这确保外部样式表在显示相关内容之前加载。
在服务器端渲染期间，React 在 head 标签中包含样式表，这确保浏览器在样式表完全加载之前等待显示内容。在客户端渲染期间，React 在提交之前等待新渲染的样式表加载。这允许样式表与组件共存，从而降低复杂性，并且仅加载必要的样式。
React 19 对样式表支持降低了复杂性，因为它在内部管理复杂性，减少了手动工作，有助于优化渲染，并允许声明式样式。
异步脚本React 19 引入了异步脚本管理的改进。与正常的 HTML 或延迟脚本（按文档顺序加载）不同，异步脚本以任意顺序加载，这使得组件树内的渲染具有挑战性。主要改进如下所示
- 灵活的放置：React 19 允许您在组件树中的任何位置渲染异步脚本，即使在依赖它们的组件中，也无需手动管理脚本重新定位和重复数据删除。
- 自动重复数据删除：在 React 19 中，即使它从多个组件中渲染，React 也确保异步脚本仅加载和执行一次，减少冗余并提高效率，避免多次加载脚本。
- 优化的 SSR 加载：异步脚本在“服务器端渲染”期间包含在 head 标签中，但它在关键资源（如样式表、字体和图像预加载）之后加载，优先考虑基本资源，从而提高整体渲染性能。
React 19 引入了对预加载资源的内置支持，以优化性能。React 19 中包含的新 API 向浏览器提供有关其所需资源的早期信息，它显着提高了初始页面加载和客户端更新的速度。主要改进如下所示
- 更快的页面加载：预加载其他资源（如字体）并将其与样式表分离，可以提高初始页面加载的速度和性能。
- 更快的客户端更新：API 预取预期导航的资源，并在点击或悬停时预加载，以实现更快的客户端更新。
结论
在本文中，我们讨论了 React 19 的功能和更新。我们讨论了 ReactJS 及其历史，React 19 中的各种新功能，包括全新的 React 编译器、React Actions、React 服务器组件、React use API 和 React 19 钩子，例如 useActionState 钩子、useFormStatus 钩子和 useOptimistic 钩子。我们还讨论了在此版本中进行的各种改进，例如将 ref 用作 prop、ref 的清理函数和水合错误的差异。所有这些新功能和改进都有助于代码优化、高效性能以及创建对 SEO 友好的 Web 应用程序。
194 次浏览
