网站收录下降的原因,金湖网站推广,扬州住房和建设局网站,国内erp软件公司排名#x1f916; 作者简介#xff1a;水煮白菜王 #xff0c;一位资深前端劝退师 #x1f47b; #x1f440; 文章专栏#xff1a; 前端专栏 #xff0c;记录一下平时在博客写作中#xff0c;总结出的一些开发技巧✍。 感谢支持#x1f495;#x1f495;#x1f495; 目… 作者简介水煮白菜王 一位资深前端劝退师 文章专栏 前端专栏 记录一下平时在博客写作中总结出的一些开发技巧✍。 感谢支持 目录 React v19他来了React v19 新特性一览Actions异步数据更新操作Actions会自动管理提交数据New hook useActionStateNew hook: useOptimistic新API: useServer Components支持 React 19 中的改进ref作为 prop支持 Context ref 的回调清理支持Document Metadata支持stylesheets样式表支持异步async脚本支持预加载资源更好的 Error报告及hydration错误改进支持自定义元素 React 19 的第一个版本是在2024年4月发布的具体来说是4月25日发布了版本号为19.0.0-Beta的测试版。这个版本主要是面向各大库以确保它们与 React 19 的兼容性。因此对于开发者而言建议先升级至最新的稳定版… 所以
React v19他来了
React 团队于 2024 年 12 月 5 日正式发布了 React v19 稳定版现已在 npm 上可用。开发者们可以通过 React 19 升级指南获取详细的升级步骤和注意事项。本文将介绍在React v19 版本中给大家都带来了哪些新特性和改进。
React v19 新特性一览
功能名称描述ActionsActions 现在支持异步数据更新操作允许在 Transition 中执行副作用如 API 请求。每个 Transition 可以包含一个或多个 Actions这些 Actions 在后台更新状态最后通过一次提交来刷新 UI。此外Actions 支持错误处理和乐观更新useOptimistic确保用户界面在等待后台任务完成时保持响应。useActioState这是一个新的 Hook用于在 Transition 中调度 Actions进行排序。它提供了访问 Action 的状态和 pending 状态的能力。useAction 接受一个 reducer 函数用于调用 Actions以及一个初始状态对象。还可以接受一个可选字符串参数当操作传递给 form prop 时该字符串可用于表单中的渐进式增强。useOptimistic此 Hook 用于在过渡期间立即更新状态提供一种乐观更新的方式。它返回当前状态及一个 set 函数可以在过渡中调用来即时应用预期的最终状态值。一旦过渡完成状态会自动更新为实际的新值。use这是 React 19 引入的一个新 API允许在渲染过程中读取资源。它可以接受 Promise 或 Context 对象。如果提供的是 Promise则 React 将暂停渲染直到 Promise 解析完成。此功能只能在 render 方法中使用但可以根据条件调用。ref 作为 propRefs 现在可以直接作为 props 传递给子组件无需显式使用 forwardRef。这简化了 ref 的传递方式使得代码更加简洁。Suspense 同级预热当组件挂起例如等待数据加载时React 不再等待整个同级树渲染完毕而是立即提交最近的 Suspense 边界的回退内容。之后React 会继续为其他暂停的兄弟组件安排渲染提前启动惰性请求从而加快整体渲染速度。这项改进显著提升了用户体验特别是在加载多个异步组件时。通过尽早展示部分可用的内容用户可以更快地开始与页面互动而不需要等待所有内容都准备好。简洁的 Context 写法在 React 19 中引入了更简洁的 Context 写法可以直接使用 Context 代替 Context.Provider简化了上下文提供者的使用。ref 的回调清理React 19 支持从回调返回清理函数允许在组件卸载时执行回调清理逻辑确保资源释放和避免内存泄漏。Document Metadata 支持现在 React v19 原生支持 title、meta 和 link 等文档元数据标签。这些标签可直接在组件中声明React 会自动将它们提升至 head 或 document 部分简化 SEO 和元数据管理逻辑确保与服务端渲染、客户端渲染、流式 SSR 和服务器组件兼容。增强的样式表管理React 19 增强了样式表的加载管理通过引入 precedence 属性React 可以动态调整样式表的插入顺序确保正确的样式覆盖。此外React 解决了由于样式优先规则导致的复杂性允许在组件内实现可组合性的样式表功能。React 现在能够管理 DOM 中样式表无论是外部 link relstylesheet href... 还是内联 style.../style的插入位置并提供与客户端上的并发渲染和服务器上的流式渲染的更深入集成。如果你告诉 React 你的样式表它将自动处理样式表的加载顺序确保在显示依赖于这些样式规则的内容之前加载必要的样式表特别是外部样式表。异步脚本支持在 React 19 中增强了对异步脚本的支持允许在组件树的任何位置渲染脚本并确保它们在所有渲染环境中被去重从而只加载和执行一次即使由多个组件渲染。这简化了脚本管理避免了重复实例和重新定位的问题。预加载资源支持React 19 引入了多项新 API用于高效加载和预加载浏览器资源从而简化构建高性能应用的过程。这些 API 确保资源加载不会成为用户体验的瓶颈提供流畅、无阻碍的出色体验。改进的错误处理React 19 改进了错误处理机制消除了重复错误记录并提供了处理捕获和未捕获错误的选项。现在当渲染过程中出现错误并被 Error Boundary 捕获时React 只会记录一次错误信息并包含所有相关细节避免了之前版本中多次抛出错误如原始错误和自动恢复失败的情况。此外React 提供了关于错误发生位置的详细信息帮助开发者更轻松地诊断和解决问题。自定义元素支持React 19 增加了对自定义元素的全面支持并通过了 Custom Elements Everywhere 的所有测试。这一改进解决了过去版本中使用自定义元素的困难确保了 React 组件与 Web Components 标准无缝集成。使开发者能够更轻松地创建和使用自定义 HTML 元素提升应用程序的灵活性和可维护性。更多更新内容 react-blog 、GitHub发行版本v19.0.0
Actions
React 应用程序中的一个常见用例是执行数据更改然后更新状态作为响应。例如当用户提交表单以更改其名称时您将发出 API 请求然后处理响应。过去您需要手动处理待处理状态、错误、乐观更新和顺序请求。
在 React 19 中增加了对在 transition 中使用异步函数的支持以自动处理待处理Pending状态、错误、表单和乐观更新(useOptimistic)。 异步数据更新操作Actions会自动管理提交数据 Pending 待处理状态操作提供待处理状态该状态从请求开始时开始并在提交最终状态更新时自动重置。Optimistic 更新Actions 支持新的 useOptimistic 钩子因此您可以在提交请求时向用户显示即时反馈。错误处理操作提供错误处理因此您可以在请求失败时显示 Error Boundaries并自动将乐观更新恢复为其原始值。Forms 元素现在支持将函数传递给 和 props。将函数传递给 props 默认使用 Actions并在提交后自动重置表单。 此功能增强了 Transitions 的灵活性使其能够更好地处理复杂的 UI 更新逻辑。 // Using pending state from Actions
function UpdateName({}) {const [name, setName] useState();const [error, setError] useState(null);const [isPending, startTransition] useTransition();const handleSubmit () {startTransition(async () {const error await updateName(name);if (error) {setError(error);return;} redirect(/path);})};return (divinput value{name} onChange{(event) setName(event.target.value)} /button onClick{handleSubmit} disabled{isPending}Update/button{error p{error}/p}/div);
}New hook useActionState
React 19 构建在 Actions 之上引入了 useOptimistic 来管理乐观更新并引入了一个新的钩子 React.useActionState 来处理 Action 的常见情况。在添加 Actions 来自动管理表单并使用 useFormStatus 来支持表单中 Actions 的常见情况。 通过这个 Hook开发者可以在不直接管理复杂状态的情况下轻松地触发 Actions并跟踪它们的状态变化。这对于构建交互性强的应用程序特别有用。
在 React 19 中上面的例子可以简化为
// Using form Actions and useActionState
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 null;},null,);return (form action{submitAction}input typetext namename /button typesubmit disabled{isPending}Update/button{error p{error}/p}/form);
}为了简化 Actions 的常见情况新增了一个名为 useActionState
const [error, submitAction, isPending] useActionState(async (previousState, newName) {const error await updateName(newName);if (error) {// You can return any result of the action.// Here, we return only the error.return error;}// handle successreturn null;},null,
);useActionState接受一个函数“Action”并返回一个包装好的 Action 来调用。这之所以有效是因为 Actions 组合。调用包装的 Action 时将返回 Action 的最后一个结果为 并将 Action 的待处理状态返回为 。useActionState data pending 注意React.useActionState之前在 Canary 版本中调用但已重命名并弃用 。ReactDOM.useFormStateuseFormState 。 useActionState文档 New hook: useOptimistic
这种方法提高了用户体验因为用户不必等待服务器响应即可看到更改的结果
执行数据更改时另一种常见的 UI 模式是在异步请求进行时乐观地显示最终状态。在 React 19 中新增了一个名为 new hook 来简化此操作useOptimistic
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}pYour name is: {optimisticName}/pplabelChange Name:/labelinputtypetextnamenamedisabled{currentName ! optimisticName}//p/form);
}当请求正在进行时钩子将立即呈现。当更新完成或出错时React 会自动切换回该值。useOptimistic optimisticName updateName currentName. useOptimistic 文档 新API: use
此 API 的引入简化了从服务器获取数据的过程同时保证了良好的用户体验。通过让 React 处理加载状态开发者可以专注于构建应用程序的核心逻辑。
例如你可以用 来读取一个 promiseReact 会 Suspend 直到 promise 解析use
import {use} from react;function Comments({commentsPromise}) {// use will suspend until the promise resolves.const comments use(commentsPromise);return comments.map(comment p key{comment.id}{comment}/p);
}function Page({commentsPromise}) {// When use suspends in Comments,// this Suspense boundary will be shown.return (Suspense fallback{divLoading.../div}Comments commentsPromise{commentsPromise} //Suspense)
}注意use不支持在 render 中创建的 Promise。 如果你尝试将 render 中创建的 promise 传递给 React 会发出警告 A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework. 要修复需要从支持 Promise 缓存的 suspense 驱动的库或框架中传递一个 Promise。React官方后面会计划发布功能以便更轻松地在 render 中缓存 promise。 Server Components支持
React 19 的服务器组件提供了一种全新的渲染模式在服务器上提前渲染组件减少了客户端的渲染负担并且无需引入额外工具链即可与现有项目无缝集成支持在构建时或请求时生成组件。
React 19 中的改进
ref作为 prop
这一改变减少了不必要的样板代码使 ref 的使用更加直观和方便对于需要直接操作 DOM 元素的情况尤其有帮助。
从 React 19 开始你现在可以作为函数组件的 prop 进行访问ref
function MyInput({placeholder, ref}) {return input placeholder{placeholder} ref{ref} /
}//...
MyInput ref{ref} /支持 Context
在 React v19 中引入了简洁的 Context 写法你可以渲染为 provider 而不是 ContextContext.Provider可以直接使用 Context 代替 Context.Provider
const ThemeContext createContext();function App({children}) {return (ThemeContext valuedark{children}/ThemeContext);
}新的 Context providers 可以使用React官方后面将发布一个 codemod 来转换现有的 providers。React官方在后面的版本中会弃用 ContextContext.Provider ref 的回调清理
React 19 支持从回调返回清理函数允许在组件卸载时执行回调清理逻辑
inputref{(ref) {// ref created// NEW: return a cleanup function to reset// the ref when element is removed from DOM.return () {// ref cleanup};}}
/支持Document Metadata
在 HTML 中文档元数据标记保留用于放置在文档的部分中。在 React 中决定哪些元数据适合应用程序的组件可能离你渲染的地方很远或者 React 根本不渲染。过去这些元素需要手动插入到 effect 中或者通过 react-helmet 等库插入并且在服务器渲染 React 应用程序时需要小心处理。 现在React v19 原生支持 title、meta 和 link 等文档元数据标签这些标签可直接在组件中声明React 会自动将资源提升至 head 或 document 部分简化 SEO 和元数据管理逻辑确保与服务端渲染、客户端渲染、流式 SSR 和服务器组件兼容。
function BlogPost({post}) {return (articleh1{post.title}/h1title{post.title}/titlemeta nameauthor contentJosh /link relauthor hrefhttps://twitter.com/joshcstory/ /meta namekeywords content{post.keywords} /pEee equals em-see-squared.../p/article);
}注意:在开发上有可能仍然需要一个 Metadata library库对于简单的用例将文档元数据呈现为标记可能比较合适但库可以提供更强大的功能例如根据当前路由使用特定元数据覆盖通用元数据。这些功能使 react-helmet 等框架和库更容易支持元数据标签而不是直接替换。 支持stylesheets样式表
在 React 19 中增强了样式表的加载管理通过引入 precedence 属性React 可以动态调整样式表的插入顺序确保正确的样式覆盖。此外React 解决了由于样式优先规则导致的复杂性允许在组件内实现可组合性的样式表功能。 React 现在能够管理 DOM 中样式表无论是外部 link relstylesheet href... 还是内联 style.../style的插入位置并提供与客户端上的并发渲染和服务器上的流式渲染的更深入集成。如果你告诉 React 你的样式表它将自动处理样式表的加载顺序确保在显示依赖于这些样式规则的内容之前加载必要的样式表特别是外部样式表。
function ComponentOne() {return (Suspense fallbackloading...link relstylesheet hreffoo.css precedencedefault /link relstylesheet hrefbar.css precedencehigh /article classfoo-class bar-class{...}/article/Suspense)
}function ComponentTwo() {return (divp{...}/plink relstylesheet hrefbaz.css precedencedefault / -- will be inserted between foo bar --/div)
}支持异步async脚本
在 React 19 中增强了对异步脚本的支持允许在组件树的任何位置渲染脚本并确保它们在所有渲染环境中被去重从而只加载和执行一次即使由多个组件渲染。这简化了脚本管理避免了重复实例和重新定位的问题。
function MyComponent() {return (divscript async{true} src... /Hello World/div)
}function App() {htmlbodyMyComponent...MyComponent // wont lead to duplicate script in the DOM/body/html
}支持预加载资源
React 19 引入了多项新 API用于高效加载和预加载浏览器资源从而简化构建高性能应用的过程。这些 API 确保资源加载不会成为用户体验的瓶颈提供流畅、无阻碍的出色体验。
import { prefetchDNS, preconnect, preload, preinit } from react-dom
function MyComponent() {preinit(https://.../path/to/some/script.js, {as: script }) // loads and executes this script eagerlypreload(https://.../path/to/font.woff, { as: font }) // preloads this fontpreload(https://.../path/to/stylesheet.css, { as: style }) // preloads this stylesheetprefetchDNS(https://...) // when you may not actually request anything from this hostpreconnect(https://...) // when you will request something but arent sure what
}!-- the above would result in the following DOM/HTML --
htmlhead!-- links/scripts are prioritized by their utility to early loading, not call order --link relprefetch-dns hrefhttps://...link relpreconnect hrefhttps://...link relpreload asfont hrefhttps://.../path/to/font.wofflink relpreload asstyle hrefhttps://.../path/to/stylesheet.cssscript async srchttps://.../path/to/some/script.js/script/headbody.../body
/html更好的 Error报告及hydration错误改进
React 19 改进了错误处理机制消除了重复错误记录并提供了处理捕获和未捕获错误的选项。现在当渲染过程中出现错误并被 Error Boundary 捕获时React 只会记录一次错误信息并包含所有相关细节避免了之前版本中多次抛出错误如原始错误和自动恢复失败的情况。此外React 提供了关于错误发生位置的详细信息提供更详细的差异化日志帮助开发者更轻松地诊断和解决问题。
一个错误信息其中包含所有错误信息减少冗余错误日志
支持自定义元素
React 19 新增了对自定义元素的全面支持完全兼容 Custom Elements Everywhere 的所有测试。这一改进解决了过去版本中使用自定义元素的困难确保了 React 组件与 Web Components 标准无缝集成。使开发者能够更轻松地创建和使用自定义 HTML 元素提升应用程序的灵活性和可维护性。
在 React 19 中新增了对在客户端和 SSR 期间工作的属性的支持策略如下
服务器端渲染如果其类型是 string、number 或等原始值或值为 true 则传递给自定义元素的 props 将呈现为属性。具有非原始类型如 object、symbol、 function或 value的 props 将被省略。客户端渲染与 Custom Element 实例上的属性匹配的 props 将被分配为 properties否则它们将被分配为 attributes。
React 19 引入了许多新特性旨在提升开发体验、性能和灵活性。本文介绍了部分新增功能和对现有功能的优化改进帮助开发者更好地理解和利用这些更新。
更多的更新内容请阅读 官方博客文档、GitHub发行版本v19.0.0 如果你觉得这篇文章对你有帮助请点赞 、收藏 并关注我
