大家好，我是Kason。不知道大家有没有感觉：React新特性的更新速度很慢，时间通常以年来衡量。事实上，在React漫长的发展过程中，除了有很多优秀的特性（比如Hooks和Suspense），还有很多想法最终没有实现。这些想法通常不为开发者所知，这导致了一些“React的新特性进展缓慢”的误解。考虑到这一点，React官方博客[1]今天发表了一篇文章，描述了团队目前正在努力的方向。这篇文章让我们了解了React接下来的工作重点，主要包括三个方面：底层特性优化相关documents相关底层特性进入React18之后，“并发”这个词在React的语境中被越来越频繁的提及。与“并发”相关的变化对React的影响越来越大，甚至会影响日常开发（例如useEffect在严格模式下会在开发环境中执行两次）。作为开发者，我们希望享受“并发”带来的体验提升，但又不愿意接受业务代码复杂度的增加。React团队明白这个道理，所以React的开发模式主要是：React团队开发底层特性+与其他开源团队合作开发上层特性。下面我们介绍两个开发中的底层特性。ReactServerComponents20年在官方博客中介绍了ReactServerComponents[2]（以下简称RSC）。作为底层特性，不适合开发者直接使用。React团队与Vercel和Shopify合作。这些团队接入RSC，将其封装到业务框架（如Next.js）中，然后提供给开发者使用的框架。这不仅可以加强React与社区的联系（有像Vercel这样的专业公司作为中介），也可以让React团队专注于React本身的迭代（而不用分心开发外围库，比如React全家桶）。资源请求很多外部资源请求（比如脚本、外部样式、字体文件、图片等）都有预加载的需求。React团队正在开发“React环境中的通用外部资源请求API”。有了这个API请求的数据，可以使用Suspensefallback在请求过程中显示“加载效果”，可以防止视图“爆米花”。“爆米花”这个词真传神。他描述了“加载前后数据占用的高度不同，导致页面大小发生剧烈变化”的现象。想象一下，页面上有很多“待加载的图片”。随着图片的加载，页面会被图片拉伸，就像玉米膨胀成爆米花一样。Optimization-related优化相关的进展主要体现在三个方面：compile-time运行时分析工具compile-timeHuangXuan[3]在ReactConf2021[4]上介绍了ReactForget，它是一个自动“优化React代码”的编译器添加useMemo和useCallback。该项目一直在不断迭代，最近完成了重写。同时，编译器的playground也在同步开发中。React从未在运行时在Vue中实现KeepAlive功能。目前React中控制组件可见性的方式只有两种：mount/unmoutcomponents。缺点是：组件卸载后，组件中保存的状态丢失，组件对应DOM中保存的状态（如滚动高度）也丢失。使用CSS（如display:none）来控制组件对应的DOM的显示和隐藏。虽然这可以保存状态，但它存在性能问题——React仍然会在运行时遍历隐藏组件（隐藏组件仍然会渲染）。OffscreenAPI的出现结合了两者的优点。按照开头提到的“只关注底层特性”的原则，开发者最好不要直接使用OffscreenAPI，而是使用“集成Offscreen的上层框架”（比如路由库）.插一句题外话，其实OffscreenAPI并不是一个全新的API。在源代码里面，他是Suspense的组件之一。下一个迭代方向只是从源代码中公开它。分析工具分析组件性能一直是刚需。为此，React团队开发了一个浏览器分析工具：随着React18的到来，会增加一个新的时间线分析工具（timelineprofiler）来分析“并发更新期间的调度”。但是，都没有解决以下问题需求很好：如何分析某个更新慢？如何分析一个交互的完整过程（如点击，页面导航）的性能？目前正在开发一个API来分析这些特定情况下的性能问题.DocumentationReact的新文档目前还处于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服务器组件：https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html。[3]黄轩：https://twitter.com/Huxpro。[4]ReactConf2021：https://www.youtube.com/watch?v=lGEMwh32soc。[5]使用事件提案：https://github.com/reactjs/rfcs/pull/220。[6]一起走进React核心团队：https://react.christmas/2020/24。
