上个月中旬，React团队发了一篇文章ReactLabs:WhatWe'veBeenWorkingOn–June2022，说说他们最近在做什么，社区没看到中文翻译，这里是一个简单解读一下原文，发现有些句子如果不是沉浸在技术英语的语境中，是相当难以理解的。原始链接：https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html2022年6月15日，作者：AndrewClark，DanAbramov、JanKassens、JosephSavona、JoshStory、LaurenTan、LunaRuan、MengdiChen、RickHanlon、RobertZhang、SathyaGunasekaran、SebastianMarkb?ge和黄轩。React18已经酝酿多年，它为React团队带来了宝贵的经验。它的发布是多年研究和探索多种途径的结果。其中一些路径是成功的；更多的是导致新见解的死胡同。我们吸取的一个教训是，社区在没有深入了解我们正在探索的这些路径的情况下等待新功能是令人沮丧的。我们通常在任何时候都有许多项目在进行，从更具实验性的到明确定义的。展望未来，我们希望开始定期与社区分享更多关于我们在这些项目上的工作。为了设定预期，这不是一个具有明确时间表的路线图。其中许多项目都在积极研究中，很难确定具体的发布日期。根据我们目前的评估，它不应该在当前迭代中发布。相反，我们想与您分享我们正在积极思考的问题以及我们目前学到的知识。解读：这句开场白回答了为什么外界总觉得React的更新太慢了。不是React团队什么都不做，而是他们做了大量的探索性工作，有些探索性的工作还没有结果，他们只是没有告诉外界，但实际上他们很忙。按照我的理解，像React这样变化太快的前端基础设施未必是好事。比如React-Router变化快，兼容性差，当然还有AngularJS。React的API被认为是非常连续且相当稳定的。服务器组件我们在2020年12月宣布了React服务器组件(RSC)的实验性解决方案(https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)。从那时起，我们一直致力于React18的部分支持，并根据实验反馈进行改进。特别是，我们放弃了使用分叉I/O库（例如react-fetch）的想法，转而使用异步/等待模型以获得更好的兼容性。这在技术上不会阻止RSC的发布，因为您还可以使用路由器来获取数据。另一个变化是我们放弃了文件扩展名，转而使用注释边界。我们正在与Vercel（一个网站托管平台）和Shopify合作，以统一捆绑程序对Webpack和Vite中共享语义的支持。在发布之前，我们要确保RSC的语义在整个React生态系统中是相同的。这是实现稳定的主要障碍。解读：ReactServerComponent对我来说比较陌生，之前也没用过。按照React团队的意思，不希望我们使用这种底层特性，而是让Vercel、Shopify、webpack、Vite等周边生态库支持。我们可以直接使用这个库。AssetLoadingAssetLoading当前，脚本、外部样式、字体和图像等资产通常使用外部系统进行预加载和加载。这可能会使跨流、服务器组件等新环境的协调变得棘手。我们正在考虑添加一个API，以通过ReactAPI为所有React环境预加载和加载去重的外部资产。我们还考虑让这些支持Suspense，这样您就可以让图像、CSS和字体在加载之前阻止显示，但不会阻止流式传输和并发渲染。这有助于避免在视觉效果和布局发生变化时出现“爆米花”。解释：这里是对“爆米花”这个词的解释。大家在开发的时候应该经常看到一个页面在数据加载完成前后所占用的空间有很大的不同，从而导致页面瞬间爆炸的效果。.特别是页面上有很多图片的时候。React团队正在开发一个用于请求外部资源的通用API来解决这个问题。我对这部作品还是很期待的，希望能尽快体验。StaticServerRenderingOptimizationsStaticServerRenderingOptimizationsStaticSiteGeneration(SSG)和IncrementalStaticRegeneration(ISR)是获得可缓存页面性能的好方法，但我们认为我们可以添加功能以通过DynamicServerSideRendering(SSR)提高性能-特别是当大多数但不是所有内容都可缓存时。我们正在探索使用编译和静态通道优化服务器渲染的方法。解读：对服务端渲染了解不多。这应该是一些性能优化。React优化编译器ReactOptimizingCompiler我们在ReactConf2021上预览了用于ReactForget的useMemo。它是一个编译器，可以自动生成等效的useCallback调用以最小化重新渲染的成本，同时保留React的编程模型。最近，我们完成了编译器的重写，使其更加可靠和健壮。这种新架构使我们能够分析和记住更复杂的模式，例如使用局部突变，并开辟了许多新的编译时优化机会，而不仅仅是缓存挂钩。我们还在开发一个Playground，用于探索编译器的许多方面。虽然Playground的目标是使编译器开发更容易，但我们认为它将更容易对编译器的功能进行试验和建立直觉。它揭示了它如何在幕后工作的各种见解，并在您键入时实时呈现编译器的输出。这将在发布时随编译器一起提供。解读：从去年年底开始，黄轩推出了ReactForget，可以在编译时优化React代码的性能。半年过去了，中间做了很多事情，主要是两件事，一是编译器本身的开发，二是Playground的开发。Playground是游乐场的意思，其实是一个可以在线修改代码并查看运行结果的工具。Offscreen今天，如果你想隐藏和显示一个组件，你有两个选择。一种是完全从树中添加或删除它。这种方法的问题是每次卸载时UI的状态都会丢失，包括存储在DOM中的状态，例如滚动位置。另一种选择是保持组件挂载并使用CSS以可视方式切换外观。这保留了UI的状态，但以性能为代价，因为React在接收到新更新时必须不断渲染隐藏组件及其所有子组件。Offscreen引入了第三种选择：在视觉上隐藏UI但降低其内容的优先级。这个想法在本质上类似于content-visibilityCSS属性：当内容被隐藏时，它不需要与UI的其余部分保持同步。React可以推迟渲染工作，直到应用程序的其余部分空闲，或者直到内容再次可见。离屏只是一个小技巧，他的目的是解锁更多高级功能。类似于React的其他并发特性，如startTransition，在大多数情况下，您不会直接与OffscreenAPI交互，而是通过一个完善的框架实现以下模式：即时转换：一些路由框架已经预取数据以加速后续导航，例如将鼠标悬停在链接上时。借助Offscreen，他们还可以在后台预渲染下一个屏幕。可重用状态：同样，在路线或选项卡之间导航时，您可以使用Offscreen来保留上一个屏幕的状态，以便您可以切换回来并从您离开的地方继续。虚拟化列表呈现：当显示大型项目列表时，虚拟化列表框架将预呈现比当前可见的行更多的行。您可以使用Offscreen以低于列表中可见项的优先级预呈现隐藏行。背景内容：我们还在探索一项相关功能，用于在不隐藏背景的情况下降低内容的优先级，例如在显示模态叠加层时。解读：这个Offscreen很好用。通过这个新的API，我们可以控制组件的显示和隐藏，但是它不同于{isShow&&}和
