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

大家好，我卡颂。

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

实际上，在React漫长的倒退过程中，除了很多优良的个性（比方Hooks、Suspense）外，还有很多最终没有落地的想法。

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

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

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

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

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

底层个性

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

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

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

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

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

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

React Server Components

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

React团队与Vercel、Shopify单干，由这些团队接入RSC，封装到业务框架外部（比方Next.js），再将框架提供给开发者应用。

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

资源申请

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

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

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

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

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

优化相干

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

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

编译时

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

该我的项目始终在一直迭代，最近刚实现重写。同时，编译器的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团队颁布接下来工作方向的一个起因吧。