React团队最近在忙啥?

距离 React 最近一次版本更新已经过去了 8 个多月。那最近 React 都在忙些啥呢?下面就来看看 React 团队最近正在研究的事,以及取得的进展!

站在用户的角度思考问题,与客户深入沟通,找到沙湾网站设计与沙湾网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站建设、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟主机、企业邮箱。业务覆盖沙湾地区。

概览:

  • React Server Components
  • 资源加载
  • 文档元数据
  • 离屏渲染
  • Transition Tracing

React Server Components

React Server Components(RSC,服务端组件)是由 React 团队设计的一种新的应用架构。

React 团队正在引入一种新的组件——服务器组件,它提前运行并且被排除在 JavaScript 包之外。服务器组件可以在构建期间运行,从文件系统读取或获取静态内容。它们还可以在服务端运行,无需构建 API 即可访问数据层。可以通过 props 将数据从服务端组件传递到浏览器中的交互式客户端组件。

RSC 将以服务端为中心的多页面应用的简单“请求/响应”心智模型与以客户端为中心的单页应用的无缝交互相结合,提供了两全其美的体验。

自上次更新以来,React 团队合并了 React 服务端组件 RFC 以批准该提案。通过 [React Server Module Conventions](React Server Module Conventions) 提案解决了悬而未决的问题,并与合作伙伴达成共识以遵循“use client”的约定。这些文档还充当 RSC 兼容实现应支持的规范。

最大的变化就是引入了 async / await​ 作为从服务端组件获取数据的主要方式。 除此之外,还计划通过引入一个名为 ​​use​​​ 的新 Hook 来支持从客户端加载数据,该 Hook 用于解包 Promises。虽然不能在仅客户端应用的任意组件中支持 ​​async / await​​,但计划在构建仅客户端应用时添加对它的支持,类似于 RSC 应用的结构。

现在已经解决了数据获取的问题,并正在探索另一个方向:将数据从客户端发送到服务器,以便可以执行数据库突变和实现表单。通过让跨服务端/客户端边界传递服务端操作(Server Action)函数来实现这一点,然后客户端可以调用这些函数,从而提供无缝的 RPC。Server Actions 还在 JavaScript 加载之前提供逐步增强的表单。

React 服务端组件已经在 Next.js 应用路由中发布。这展示了一个真正将 RSC 视为原语的路由的深度集成,但这并不是构建与 RSC 兼容的路由和框架的唯一方法。RSC 规范和实现提供的特性有明显的区别。React 服务端组件是指跨兼容React框架工作的组件规范。

React 团队通常建议使用现有框架,但如果需要构建自己的自定义框架,也是可以的。构建自己的 RSC 兼容框架并不容易,因为需要深度构建工具集成。当前一代的构建工具非常适合在客户端上使用,但它们在设计时并没有为在服务端和客户端之间拆分单个模块图提供一流的支持。这就是为什么 React 团队现在直接与构建工具开发人员合作以获得内置的 RSC。

资源加载

Suspense 允许指定在组件的数据或代码仍在加载时在屏幕上显示什么内容。这使用户可以在页面加载时以及加载更多数据和代码的路由导航期间逐步看到更多内容。但是,从用户的角度来看,在考虑新内容是否准备就绪时,数据加载和渲染并不能说明全部。默认情况下,浏览器独立加载样式表、字体和图像,这可能导致 UI 跳转和连续的布局转换。

React 团队正在努力将 Suspense 与样式表、字体和图像的加载生命周期完全集成,以便 React 将它们考虑在内,以确定内容是否已准备好显示。在不改变编写 React 组件的方式的情况下,更新将以更加连贯的方式进行。作为一种优化。,还将提供一种手动方式来直接从组件中预加载字体等资源。

文档元数据

应用中的不同页面可能具有不同的元数据,例如  标签、description 和其他特定于此页面的 <meta> 标签。从维护的角度来看,将此信息放在该页面的 React 组件中会更具可扩展性。但是,此元数据的 HTML 标签需要位于文档的 <head> 中,该文档通常在应用的最根组件中。</p><p>现在有两种方法可以解决这个问题:</p><ul><li>渲染一个特殊的第三方组件,该组件将 <title>、<meta> 和其中的其他标签移动到文档的 <head> 中。这适用于主流浏览器,但有许多客户端不运行客户端 JavaScript,例如 Open Graph 解析器,因此该技术并不普遍适用。</li><li>将页面分为两部分进行服务端渲染。首先,渲染主要内容并收集所有此类标签。然后使用这些标签渲染 <head> 。最后,<head> 和主要内容被发送到浏览端。这种方法是可行的,但这样就不能使用 React 18 中的流式服务端渲染了,因为必须等待所有内容渲染完毕才能发送 <head>。</li></ul> <p>这就是为什么 React 要 在组件树中的任何位置添加内置支持来渲染 <title>、<meta>​ 和元数据 <link> 标签。它在所有环境中都以相同的方式工作,包括完全的客户端代码、SSR,以及未来的 RSC。</p><h2>React 优化编译器</h2> <p>​React 团队一直在积极迭代 React Forget 的设计,这是一个针对 React 的优化编译器。之前曾将其称为“自动记忆编译器”,这在某种意义上是正确的。但是构建编译器帮助 React 团队更深入地理解了 React 的编程模型。理解 React Forget 的更好方法是将其作为一个自动响应式编译器。</p><p>React 的核心思想是开发人员将 UI 定义为当前状态的函数。使用普通的 JavaScript 值:数字、字符串、数组、对象,并使用标准的 JavaScript 语法:if/else、for 等描述组件逻辑。心智模型是 React 将在应用状态更改时重新渲染。这种简单的心智模型和与 JavaScript 语义保持接近是 React 编程模型中的一个重要原则。</p><p>问题是 React 有时会响应过度:它会重新渲染太多。例如,在 JavaScript 中没有直接的方法来比较两个对象或数组是否相等(具有相同的键和值),因此在每次渲染时创建一个新的对象或数组可能会导致 React 执行比它严格需要的更多的工作。这意味着开发人员必须明确记忆组件,以免对更改响应过度。</p><p>React Forget 的目标是确保 React 应用在默认情况下具有适量的响应:应用仅在状态值发生有意义的变化时才重新渲染。从实现的角度来看,这意味着自动记忆,但 React 团队认为响应式框架是理解 React 和 Forget 的更好方式。React 目前会在对象标识更改时重新渲染。有了 Forget,React 会在语义值发生变化时才重新渲染——但不会产生深度比较的运行时成本。</p><p>进展而言,自上次更新以来,React 团队对编译器的设计进行了大量迭代,以与这种自动响应式方法保持一致,并纳入内部使用编译器的反馈。在去年年底开始对编译器进行一些重大重构之后,现在已经开始在 Meta 部分生产中使用编译器。一旦在生产中证明了它的价值,就计划将其开源。​</p><h2>离屏渲染</h2> <p>离屏渲染是 React 即将推出的一项功能,用于在后台渲染屏幕而无需额外的性能开销。可以将其视为 CSS 属性 ​<code>​content-visibility​</code>​ 的一个版本,它不仅适用于 DOM 元素,也适用于 React 组件。在研究过程中,发现了各种用例:</p><ul><li>路由可以在后台预渲染页面,以便当用户导航到该页面时,页面立即可用;</li><li>选项卡切换组件可以保留隐藏选项卡的状态,因此用户可以在它们之间切换而不会丢失进度。</li><li>虚拟列表组件可以在可见窗口上方和下方预渲染额外的行。</li><li>打开模态框或弹出窗口时,可以将应用的其余部分置于“后台”模式,以便除模式之外的所有内容都禁用事件和更新。</li></ul> <p>大多数 React 开发人员不会直接与 React 屏幕外的 API 交互。相反,离屏渲染将被集成到路由和 UI 库中,使用这些库的开发人员将自动受益,而无需额外的工作。</p><p>这个功能可以让我们在不改变编写组件的方式的情况下在屏幕外渲染任何 React 树。当一个组件在屏幕外渲染时,它实际上并没有挂载,直到组件可见——它的 effect 不会被触发。离屏渲染的一个关键特性就是可以在不丢失其状态的情况下切换组件的可见性。</p><p>自上次更新以来,React 团队在 Android 和 iOS 上的 React Native 应用中测试了 Meta 内部预渲染的实验版本,并取得了积极的性能结果。除此之外,还改进了离屏渲染与 Suspense 的工作方式——在离屏树内暂停不会触发 Suspense 回退。剩下的工作就涉及完成向库开发人员公开的原语。希望在今年晚些时候发布一个 RFC,以及一个用于测试和反馈的实验性 API。</p><h2>Transition Tracing</h2> <p>Transition Tracing API 可以检测 React Transitions 何时变慢并调查它们变慢的原因。在上次更新后,React 团队完成了 API 的初始设计并发布了 RFC,基本能力也已经实现,该项目目前处于搁置状态。欢迎对 RFC 进行反馈,并期待恢复其开发,为 React 提供更好的性能测量工具。这对于构建在基于 React Transitions 的路由特别有用,比如 Next.js 应用路由。</p><blockquote style="margin-top: 5px;margin-bottom: 5px;padding-left: 1em;margin-left: 0px"> <p><strong>参考</strong>:https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023</p></blockquote> <p> 分享标题:<a href="http://www.csdahua.cn/qtweb/news22/307722.html">React团队最近在忙啥?</a> <br> 文章源于:<a href="http://www.csdahua.cn/qtweb/news22/307722.html">http://www.csdahua.cn/qtweb/news22/307722.html</a> </p> <p> 网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等 </p> <p class="adpic"> <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a> <a href="" target="_blank" class="adimg"><img src=""></a> </p> <p class="copy"> 声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: <a href="http://www.csdahua.cn/" target="_blank">快上网</a> </p> </div> <div class="newsmorelb"> <p>成都快上网为您推荐相关内容</p> <ul> <li> <a href="/qtweb/news21/307721.html">C语言定义函数(c语言如何定义幂函数)</a> </li><li> <a href="/qtweb/news20/307720.html">函数初步认识Linux atoi函数(linuxatoi)</a> </li><li> <a href="/qtweb/news19/307719.html">在SnapNames.com上如何出售域名</a> </li><li> <a href="/qtweb/news18/307718.html">IP地址可以随便改吗?怎么改?(修改美国服务器ip地址怎么办理)</a> </li><li> <a href="/qtweb/news17/307717.html">win10pe能兼容win7系统吗?(windowspe娱乐兼容版)</a> </li><li> <a href="/qtweb/news16/307716.html">香港服务器造成流量超标的因素有哪些</a> </li><li> <a href="/qtweb/news15/307715.html">让Linux字符界面也能轻松显示中文编码 (linux字符界面正确显示中文编码)</a> </li><li> <a href="/qtweb/news14/307714.html">路由器插上网络不能用</a> </li><li> <a href="/qtweb/news13/307713.html">网站建设互联网推广中要知道的10个SEO技巧</a> </li> </ul> </div> </div> <div class="col-lg-3 noneb"> <div class="bkright" style="margin-top: 0"> <p><a href="https://www.cdcxhl.com/news/cehua/">网站策划知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news6/446406.html">vps服务器如何架设网络上网?物理服务器可以搭建VPS吗</a> </li><li> <a class="text_overflow" href="/qtweb/news26/35326.html">Adata遭RagnarLocker勒索袭击攻击者专门利用这一系统漏洞!</a> </li><li> <a class="text_overflow" href="/qtweb/news23/449623.html">工程师们早上好我客户这里新注册了个域名</a> </li><li> <a class="text_overflow" href="/qtweb/news2/397952.html">香港沙田服务器速度快不快呀</a> </li><li> <a class="text_overflow" href="/qtweb/news29/225129.html">一分钟教你解除屏幕锁?(怎么解屏幕锁)</a> </li><li> <a class="text_overflow" href="/qtweb/news10/179310.html">在大数据的泳池里裸泳该如何保护个人安全信息</a> </li><li> <a class="text_overflow" href="/qtweb/news6/9806.html">购买香港服务器需要注意什么问题</a> </li><li> <a class="text_overflow" href="/qtweb/news24/336774.html">智能客服如何开发客户</a> </li><li> <a class="text_overflow" href="/qtweb/news24/143424.html">虚拟主机租用访问速度的影响因素有哪些</a> </li><li> <a class="text_overflow" href="/qtweb/news7/455507.html">海云捷迅:OpenStack发展渐入佳境容器化是大势所趋</a> </li><li> <a class="text_overflow" href="/qtweb/news37/376187.html">怎么恢复出厂模式</a> </li><li> <a class="text_overflow" href="/qtweb/news49/422249.html">荆州网站建设效果好的企业</a> </li><li> <a class="text_overflow" href="/qtweb/news29/352779.html">网站域名到期不续费备案会自动取消吗?(网站域名号到期号续费成功)</a> </li><li> <a class="text_overflow" href="/qtweb/news12/9462.html">怎么办理流量卡?(怎么办理流量卡划算)</a> </li><li> <a class="text_overflow" href="/qtweb/news2/250202.html">电脑声音太小怎么解决</a> </li> </ul> </div> <div class="bkright tag"> <p><a href="https://www.cdcxhl.com/hangye/" target="_blank">行业网站建设</a></p> <ul> <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/huisuosj/" target="_blank">会所设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ggsj/" target="_blank">广告设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/pe/" target="_blank">PE包装袋</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/swzbw/" target="_blank">三维植被网</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/shayanfudiao/" target="_blank">砂岩浮雕</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/blgds/" target="_blank">玻璃钢雕塑</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ggzz/" target="_blank">广告制作</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/xiaojbc/" target="_blank">小搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jiagu/" target="_blank">加固</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/loutihulan/" target="_blank">楼梯护栏</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/sdjbc/" target="_blank">隧道混凝土搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/baiwuyu/" target="_blank">白乌鱼</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bgcl/" target="_blank">办公窗帘</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bpfhw/" target="_blank">边坡防护网</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/fengyangtai/" target="_blank">封阳台</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/iso/" target="_blank">iso认证</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="http://www.jywzsj.com/" target="_blank">成都网站设计</a>    <a href="http://www.gswzjz.com/" target="_blank">工商财税</a>    <a href="http://www.yzsxq.com/" target="_blank">成都水电改造</a>    <a href="http://www.cdszcl.cn/" target="_blank">顺泽窗帘</a>    <a href="http://www.cdkjz.cn/fangan/waimao/" target="_blank">外贸网站设计方案</a>    <a href="http://www.sczitong.com/" target="_blank">彩乐斯</a>    <a href="http://www.cdxwcx.cn/tuoguan/neijiang.html" target="_blank">内江托管服务器</a>    <a href="https://www.cdcxhl.com/mianfei/jianzhan/chengdu.html" target="_blank">成都免费建站</a>    <a href="http://www.bjjike.cn/" target="_blank">红光高低压开关厂</a>    <a href="http://www.scyanting.com/" target="_blank">盐亭网站设计</a>    <a href="https://www.cdcxhl.com/gaiban/" target="_blank">网站改版</a>    <a href="http://www.cqwzjz.cn/" target="_blank">重庆网站建设</a>    <a href="http://www.xdwzjz.cn/" target="_blank">新都网站建设</a>    <a href="http://chengdu.cdweb.net/" target="_blank">新网创想</a>    <a href="http://www.cdkjz.cn/wangzhan/weihu/" target="_blank">成都网站运营维护</a>    <a href="https://www.cdcxhl.com/" target="_blank">创新互联</a>    <a href="https://www.cdxwcx.com/city/jiangyou/" target="_blank">江油做网站</a>    <a href="https://www.cdxwcx.com/" target="_blank">成都网站制作</a>    <a href="http://www.scarg.cn/" target="_blank">成都艾瑞格</a>    <a href="https://www.scvps.cn/" target="_blank">服务器租凭</a>     </div> </div> <footer> <div class="carousel-inner footjz"> <div class="container"> <i class="icon iconfont zbw"></i> 高品质定制 <i class="icon iconfont"></i> 跨终端自动兼容 <i class="icon iconfont"></i> 节约开发成本 <i class="icon iconfont"></i> 开发周期短 <i class="icon iconfont"></i> 一体化服务 <button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始2800定制网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制网站建设</button> </div> </div> <div class="carousel-inner bqsy"> <div class="container"> <div class="lxfs"> <h4 class="yutelnone">028-86922220 13518219792</h4> <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4> <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>:532337155</a> <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>:631063699</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>:532337155</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>:631063699</a> <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ:1683211881</a> <div class="dz">成都快上网专注: <a href="http://www.csdahua.cn/" target="_blank">网站优化</a> <a href="http://www.csdahua.cn/" target="_blank">网络推广</a> <a href="http://www.csdahua.cn/" target="_blank">网站建设</a> <address>地址:成都太升南路288号锦天国际A幢10楼</address> </div> </div> <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联"> <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br> Tel:028-86922220(7x24h)</p></div> </div> </div> </footer> </body> </html> <script> $.getJSON ("../../qtwebpic.txt", function (data) { var jsonContent = { "featured":data } var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)]; $(".adpic .adimg").attr("href",random.link) $(".adpic img").attr("src",random.pic); }) </script>