React团队最近都在忙啥呢？

大家好，我卡颂。,不知道大家有没有一个感觉：React新特性的更新速度非常慢，时间通常是以年计。,实际上，在React漫长的发展过程中，除了很多优秀的特性（比如Hooks、Suspense）外，还有很多最终没有落地的想法。,这些想法通常不为开发者所知，这就带来一些「React新特性进展缓慢」的误解。,鉴于此，React官方博客[1]今天发布了一篇文章，介绍了团队当前工作的方向。,本文让我们来了解React接下来工作的重心，主要包括三方面的内容：,进入React18后，「并发」一词在React语境下被提及的频率越来越高。,「并发」相关的改动对React影响也越来越大，甚至影响到日常开发（比如useEffect在严格模式下开发环境会执行两次）。,作为开发者，我们希望享受「并发」带来的体验提升，但不愿意接受业务代码复杂度提高。,React团队明白这个道理，所以React的发展模式主要是：,下面我们介绍两个开发中的底层特性。,在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中控制组件显隐只有两个途径：,Offscreen API的出现结合了两者的优点。,遵照开篇提到的「只关注底层特性」原则，开发者最好也不要直接使用Offscreen API，而是使用「集成了Offscreen的上层框架」（比如路由库）。,插一句题外话，其实Offscreen API并不是一个全新的API。在源码内部，他是Suspense的组成部分之一。,接下来的迭代方向只是将其从源码内部暴露出来。,分析组件性能一直是刚需，为此React团队开发了浏览器分析工具：,随着React18的到来，会再新增一种时间线分析工具（timeline profiler）用于分析「并发更新时的调度情况」。,但是，他们都没有很好解决以下需求：,当前正在开发一个API用于分析这些具体情况下的性能问题。,React新文档当前仍处于Beta版本，内容还不完全。,但React团队对待新文档的态度，绝对是认真的，有个很有意思的细节：,在总结useEffect应用场景时，Dan发现一些常见场景可以用一个新的原生Hook来应对。,于是，文档写了一半，Dan又跑去提出了useEvent提案[5]。,虽然当前文档还没完成，但从已公布的内容来看，不管是React萌新还是老手，都能从新文档中有所收获。,在21年的React圣诞特辑一起走进React核心团队[6]一文中，作者表达了一个观点：,对于像Hooks这样的完善特性，能够成为Release，在其背后还有许许多多特性甚至没到达RFC阶段。,所有特性都必须等到完全准备就绪为止。在此之前，只能给其他特性让路。,在一个如此重视交付，并且交付的速度越来越快的行业，当你的承诺无法兑现时，这让人非常沮丧。但这并不意味着没有进步：,你有时间思考与计划，有时间实验与学习。即使暂时失败了，也会为成功的特性带来启发。,即使你还没完成年初的预期工作，也要相信挫折和颠覆是常态，而不是例外，无论好坏，即使在React团队也是如此。,不能因为你没有新的特性产出，就意味着你没有提供价值。,我想，这也是React团队公布接下来工作方向的一个原因吧。,[1]React官方博客:https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html。,[2]React Server Components:https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html。,[3]黄玄:https://twitter.com/Huxpro。,[4]React Conf 2021:https://www.youtube.com/watch?v=lGEMwh32soc。,[5]useEvent提案:https://github.com/reactjs/rfcs/pull/220。,[6]一起走进React核心团队:https://react.christmas/2020/24。