关于javascript:React团队最近都在忙啥呢

6次阅读

共计 2184 个字符,预计需要花费 6 分钟才能阅读完成。

大家好,我卡颂。

不晓得大家有没有一个感觉:React新个性的更新速度十分慢,工夫通常是以年计。

实际上,在 React 漫长的倒退过程中,除了很多优良的个性(比方HooksSuspense)外,还有很多最终没有落地的想法。

这些想法通常不为开发者所知,这就带来一些 React 新个性停顿迟缓 的误会。

鉴于此,React 官网博客明天公布了一篇文章,介绍了团队当前工作的方向。

本文让咱们来理解 React 接下来工作的重心,次要包含三方面的内容:

  • 底层个性
  • 优化相干
  • 文档相干

欢送退出人类高质量前端框架群,带飞

底层个性

进入 React18 后,并发 一词在 React 语境下被提及的频率越来越高。

并发 相干的改变对 React 影响也越来越大,甚至影响到日常开发(比方 useEffect 在严格模式下开发环境会执行两次)。

作为开发者,咱们心愿享受 并发 带来的体验晋升,但不违心承受业务代码复杂度进步。

React团队明确这个情理,所以 React 的倒退模式次要是:

React 团队开发底层个性 + 与其余开源团队合作开发下层个性

上面咱们介绍两个开发中的底层个性。

React Server Components

在 20 年的一篇官网博客中介绍了 React Server Components(后文简称为RSC)。作为底层个性,并不适宜开发者间接应用。

React团队与 VercelShopify 单干,由这些团队接入RSC,封装到业务框架外部(比方Next.js),再将框架提供给开发者应用。

这样不仅能增强 React 与社区的分割(由相似 Vercel 这样的业余公司充当中介),又让 React 团队能够分心于 React 自身的迭代(而不必分心去开发 React 全家桶这样的周边库)。

资源申请

很多内部资源申请(比方脚本、内部款式、字体文件、图片等)都有预加载的需要。

React团队正在开发React 环境下通用的内部资源申请 API

用该 API 申请的数据,申请过程中能够用 Suspense fallback 显示 加载中的成果 ,这样能够避免视图 爆爆米花(popcorning)。

爆爆米花 这个词真是很形象,他形容 数据加载前后占据的高度不同,从而导致页面尺寸激烈变动 的景象。

设想页面中有很多 待加载的图片,随着图片加载,页面被图片一直撑开的样子,就像玉米一直收缩成爆米花。

优化相干

优化相干停顿次要体现在三个方面:

  • 编译时
  • 运行时
  • 剖析工具

编译时

黄玄在 React Conf 2021 介绍了 React Forget,这是一个编译器,用于为 可被优化的 React 代码 主动加上 useMemouseCallback

该我的项目始终在一直迭代,最近刚实现重写。同时,编译器的 playground 也在同步开发中。

运行时

React始终没有实现 Vue 中的 Keep Alive 个性。以后,在 React 中管制组件显隐只有两个路径:

  • mount/unmout组件。毛病是:组件卸载后保留在组件中的状态就失落了,保留在组件对应 DOM 中的状态(比方滚动高度)也失落了
  • CSS(比方display: none)管制组件对应DOM 显隐。这样尽管能保留状态,但却有性能问题 —— React在运行时还是会遍历暗藏的组件(暗藏的组件还是会render

Offscreen API的呈现联合了两者的长处。

遵循开篇提到的 只关注底层个性 准则,开发者最好也不要间接应用 Offscreen API,而是应用 集成了 Offscreen 的下层框架(比方路由库)。

插一句题外话,其实 Offscreen API 并不是一个全新的 API。在源码外部,他是Suspense 的组成部分之一。

接下来的迭代方向只是将其从源码外部裸露进去。

剖析工具

剖析组件性能始终是刚需,为此 React 团队开发了浏览器剖析工具:

随着 React18 的到来,会再新增一种工夫线剖析工具(timeline profiler)用于剖析 并发更新时的调度状况

然而,他们都没有很好解决以下需要:

  • 某一次更新比拟迟缓,该怎么剖析?
  • 某次交互的残缺过程(比方一次点击,一次页面导航),该如何剖析性能?

以后正在开发一个 API 用于剖析这些具体情况下的性能问题。

文档相干

React新文档以后仍处于 Beta 版本,内容还不齐全。

React 团队看待新文档的态度,相对是认真的,有个很有意思的细节:

在总结 useEffect 利用场景时,Dan发现一些常见场景能够用一个新的原生 Hook 来应答。

于是,文档写了一半,Dan又跑去提出了 useEvent 提案。

尽管以后文档还没实现,但从已颁布的内容来看,不论是 React 萌新还是新手,都能从新文档中有所播种。

总结

在 21 年的 React 圣诞特辑一起走进 React 外围团队一文中,作者表白了一个观点:

对于像 Hooks 这样的欠缺个性,可能成为 Release,在其背地还有许许多多个性甚至没达到RFC 阶段。

所有个性都必须等到齐全准备就绪为止。在此之前,只能给其余个性让路。

在一个如此器重交付,并且交付的速度越来越快的行业,当你的承诺无奈兑现时,这让人十分丧气。但这并不意味着没有提高:

你有工夫思考与打算,有工夫试验与学习。即便临时失败了,也会为胜利的个性带来启发。

即便你还没实现年初的预期工作,也要置信挫折和颠覆是常态,而不是例外,无论好坏,即便在 React 团队也是如此。

不能因为你没有新的个性产出,就意味着你没有提供价值。

我想,这也是 React 团队颁布接下来工作方向的一个起因吧。

正文完
 0