React团队最近都在忙啥呢？

大家好，我卡颂。

不知道大家有没有一个感觉：React新特性的更新速度非常慢，时间通常是以年计。

实际上，在React漫长的发展过程中，除了很多优秀的特性（比如Hooks、Suspense）外，还有很多最终没有落地的想法。

这些想法通常不为开发者所知，这就带来一些「React新特性进展缓慢」的误解。

鉴于此，React官方博客[1]今天发布了一篇文章，介绍了团队当前工作的方向。

本文让我们来了解React接下来工作的重心，主要包括三方面的内容：

底层特性优化相关文档相关

底层特性

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

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

作为开发者，我们希望享受「并发」带来的体验提升，但不愿意接受业务代码复杂度提高。

React团队明白这个道理，所以React的发展模式主要是：

React团队开发底层特性 与其他开源团队合作开发上层特性

下面我们介绍两个开发中的底层特性。

React Server Components

在20年的一篇官方博客中介绍了React Server Components[2]（后文简称为RSC）。作为底层特性，并不适合开发者直接使用。

React团队与Vercel、Shopify合作，由这些团队接入RSC，封装到业务框架内部（比如Next.js），再将框架提供给开发者使用。

这样不仅能加强React与社区的联系（由类似Vercel这样的专业公司充当中介），又让React团队可以专心于React本身的迭代（而不用分心去开发React全家桶这样的周边库）。

资源请求

很多外部资源请求（比如脚本、外部样式、字体文件、图片等）都有预加载的需求。

React团队正在开发「React环境下通用的外部资源请求API」。

用该API请求的数据，请求过程中可以用Suspense fallback显示「加载中的效果」，这样可以防止视图「爆爆米花」（popcorning）。

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

想象页面中有很多「待加载的图片」，随着图片加载，页面被图片不断撑开的样子，就像玉米不断膨胀成爆米花。

优化相关

优化相关进展主要体现在三个方面：

编译时运行时分析工具

编译时

​黄玄[3]在React Conf 2021[4]介绍了React Forget​，这是一个编译器，用于为「可被优化的React代码」自动加上useMemo与useCallback。

该项目一直在不断迭代，最近刚完成重写。同时，编译器的playground也在同步开发中。

运行时

React一直没有实现Vue中的Keep Alive特性。当前，在React中控制组件显隐只有两个途径：

mount/unmout组件。缺点是：组件卸载后保存在组件中的状态就丢失了，保存在组件对应DOM中的状态（比如滚动高度）也丢失了。用CSS（比如display: none）控制组件对应DOM显隐。这样虽然能保存状态，但却有性能问题 ——