React 周刊 第241期

原文：This Week In React

⚛️ React

• 📖 重构 Shopify 管理后台：我们如何实现 30% 的性能提升并为 AI 做好准备 Shopify 将其旗舰级的管理后台应用迁移到 Remix，分享了他们宝贵的实践经验。在一个需要高度可扩展性的大型代码库上“吃自己的狗粮”（内部大规模使用），这本身就很有趣。看起来，许多近期的 React Router 新功能正是 Shopify 的实际需求。

• 📖 TanStack Start - Cloudflare Workers 文档 一篇关于如何在 Cloudflare Workers 上使用 TanStack Start 框架的官方指南。

• 🐦 Radix 团队开启每周直播，展示其开发和维护过程 这是 WorkOS 团队一个相当不错的透明化举措，很可能是对上周 “Radix 是一个累赘” 风波的回应。与此同时，其竞争对手 BaseUI 发布了 beta.1 版本。

• 🐦 Guillermo Rauch - “areweturboyet.com 的所有测试在 Next.js 生产构建中都已通过” 到目前为止，只有开发构建是稳定的。我们可以期待 Next.js 即将发布一个新版本，宣布基于 Turbopack 的生产构建将比 Webpack 快得多。值得注意的是，Rspack 1.4 也宣布其开发/生产构建的覆盖率达到了约 99%，当两个打包工具都达到 100% 时，看看谁的性能更胜一筹将会非常有趣。

• 🤔 Ryan Florence 正在研究 React 的替代方案 与此同时，Michael Jackson 对 React Hooks 越来越感到失望。看起来他们正在公开集思广益，计划为 Remix v3 构建一些新东西，很可能基于 Preact 的一个分支。

• 😠 深度思考与批评 Alex Russell 对 React Summit 的一些演讲提出了尖锐批评，而 Mario 则认为 React 仍然让人感觉疯狂。

• 📜 是时候推出一个原生的 DOM 模板 API 了 来自 Lit（Web Components）的原始创建者之一的深度思考，他探讨了 JavaScript 中缺乏标准化模板语言的现状，并提出了一个基于标签模板字面量的提案。文章还讨论了这一切如何与 React 和 JSX 集成。

• 📜 Next.js 中的 Promise 竞速技巧 一个非常酷的技巧：如果你希望在服务器上完全解析 Promise，但又不想等待太久，可以使用这个方法。当 Promise 解析时间过长时，可以优雅地展示一个 Suspense 的后备界面。

• 📜 Astro 实时内容集合：深度解析

• 📜 Storybook 9 如何将可访问性融入开发生命周期的每个环节

• 📜 如何在 5 分钟内为 Next.js 添加 Stripe 支付功能

• 📦 Stack 一个旨在简化 React 和 React Native 中 flexbox 用法的库，提供了便捷的 flexbox 接口。通过反转 React Native 默认的 flex-direction: column，它在跨平台使用时也很有帮助。

• 📦 Create Context Hook 一个微小但方便的模式，确保在每个组件树中只执行一次工作，而不是每次调用 Hook 时都执行。

• 📦 Ultracite 5.0 一个零配置的 Biome linter 和 formatter 预设，为 Next.js、React 和 TypeScript 项目优化了规则，还能帮助 LLM 生成格式正确的代码。

• 📦 StyleX 0.14 新增 viewTransitionClass() API，可轻松与 React 的 <ViewTransition> 组件集成。

• 📦 MUI 7.2 引入 modularCssLayers 以支持 CSS Cascade Layers。

• 🎥 Youssef Benlemlih - 现代应用中的高级 React Query 模式

• 🎥 Jack Herrington - 在一分钟内部署 TanStack Start 应用

📱 React-Native

Nitro Week 🚀

Nitro Modules 正成为 React Native 库开发者中的新宠，本周有 3 个相关的新版本发布：

• 📦 React Native Nitro Image Marc Rousavy 发布了他的新图像库，允许在不进行任何文件 I/O 的情况下调整/裁剪图像，并且未来应会与同样将使用 Nitro 的 VisionCamera 集成。

• 📦 React Native Video 7.0 alpha 使用 Nitro modules 重构，速度更快，支持预加载，并将播放器与视图分离。

• 📦 React Native HealthKit 9.0 使用 Nitro modules 重构，提升了性能和类型安全。

其他动态

• 🌐 跨平台新动向 在其他技术领域，🎥 Compose Multiplatform for iOS 已准备好用于生产环境，它基于 Kotlin/Skia。同时，📣 Swift 宣布成立 Android 工作组，并计划正式支持 Android 平台。虽然这未必会与 React Native 构成直接的激烈竞争，但值得我们保持关注！

• 👀 React Native PR - background-size, position 和 repeat 样式 一个令人期待的 PR，为背景样式带来更多可能性。

• 📜 React Native Legal - CLI & 编程式 API 一个用于统一处理许可证归属声明的工具。

• 📦 React Native Skia 2.1 现在开箱即支持 Skottie（Lottie）动画，并新增了图像滤镜和用于 2D 场景的透视相机。与 react-native-skottie 不同，它可以与其他 Skia 绘图组合使用。

• 📦 Expo Router AI App Generator Evan Bacon 创建了一个可以构建其他 Expo 应用和网站的应用，非常有趣！

• 📦 Gesture Handler 2.27 对 Pressable 进行了完全重构，并废弃了 ForceTouch 手势。

• 🎥 Expo - 使用 Expo, Instant & Reanimated 构建一个本地优先的 Sketch 应用

• 🎙️ RNR 336 - 使用 Solito 构建 Boca Socios ft. Nahue Alberti

🔀 其他

• 👀 TypeScript 5.9 何时发布？ 虽然发布有所延迟，但 beta 版本即将到来。

• 📜 Ecma International 批准 ECMAScript 2025：有哪些新特性？ 今年是 ES 丰收的一年！我个人特别喜欢 Iterator Helpers、Set 的并集/交集方法、import 属性以及 RegExp.escape。

• 📜 2025 年 6 月 Web 平台新特性 随着 Firefox 140 的发布，CookieStore API 和 CSS Custom Highlight API 现已在所有主流浏览器中可用。

• 📜 CSS 条件判断：新的 if() 函数

• 📜 停止使用 CustomEvent 一篇探讨为什么应该避免使用 CustomEvent 的文章。

• 📜 JavaScript 中普通函数和箭头函数的区别是什么？

• 📦 Rspack 1.4 新版本支持在浏览器中运行、更快的 SWC、更小的打包体积、增量构建等众多新特性。

• 📦 Babel 7.28 支持 TypeScript 配置文件，void 废弃绑定，并默认启用了 using 声明。

• 📦 Deno 2.4 带来了 deno bundle、bytes/text 导入、OpenTelemetry 支持、--preload 标志等更新。