React 周刊 第 264 期

26 阅读10分钟

阅读原文

🦄 本期核心要点

  • Next.js 持续迭代:16.1 版本带来开发模式文件系统缓存、包分析器和更完善的调试体验,让开发流程更高效流畅
  • Waku 1.0 Alpha 发布:这个轻量级 React 框架终于迎来 API 稳定版本,为构建高性能 React 应用提供新选择
  • React Native 生态新突破:Voltra 1.0 让你用纯 JSX 编写 iOS Live Activities 和 Widgets,无需触及原生代码;同时 0.84 RC 默认启用 Hermes V1,性能再上新台阶
  • 2025 JavaScript 生态盘点:JavaScript Rising Stars 年度报告出炉,一览过去一年最受欢迎的项目与趋势

⚛️ React 技术速递

如何“窃取”任意 React 组件

💡 一篇互动式文章揭示了从 React Fiber 树中提取信息并喂给 LLM 来重建组件的技术路径。这不仅展示了 React 内部机制的可观测性,也为组件逆向工程提供了全新思路。

构建类型安全的复合组件

💡 对话框、模态框、选择器等复合组件 API 设计优雅,但类型安全难以保证。Dominik 提出的组件工厂模式(Component Factory Pattern)为这一难题提供了强类型保障方案,让复合组件既灵活又安全。

一周的 Bun 实验:从构想到生产

💡 一个真实案例研究,展示如何将 Node.js 无缝替换为 Bun 来运行 React SSR 工作负载。从迁移过程到性能收益,全文充满可操作的实践经验。

用 React Transition 实现低优先级文本编辑器更新

💡 通过 useDeferredValue 让编辑器预览以低优先级渲染,保障主输入框响应速度。互动式文章直观展示了如何用并发特性优化用户体验,避免输入卡顿。

在客户端组件间共享数据

💡 RSC 无法直接使用 Context,但可以将数据(如当前用户信息)传递给客户端组件,后者再将其暴露为 Context。传递 Promise 不会阻塞导航,还能提升性能,是 Next.js 应用数据共享的优雅模式。

深入理解 useEffectEvent

💡 useEffectEvent 如何解决 useEffect 的闭包过时问题?这篇文章通过对比分析,清晰阐释了新 Hook 的设计初衷与使用场景,帮你规避常见的 Effect 陷阱。

用生成器构建可补充队列

💡 借助 useSyncExternalStore 实现文件上传队列的优雅状态管理。生成器模式让队列具备可补充能力,代码简洁且易于扩展。

AI 写 React 代码到底水平如何?

💡 抛开 hype,实测评估 AI 编码助手在 React 开发中的真实表现。文章通过具体案例对比,给出了实用建议:AI 擅长什么,人类开发者仍需把控什么。

React 性能测量与优化完全指南

💡 从前端性能指标到 React 专属优化技巧,这份 comprehensive 指南教你如何系统性定位性能瓶颈,涵盖 DevTools、Profiler 及真实用户监控等全流程。

前端测试最佳实践:37 条贴士与技巧

💡 一份可立即落地的测试指南,涵盖测试策略、代码组织、模拟技巧等方方面面。无论你是测试新手还是希望提升测试质量的老手,都能从中找到启发。

Next.js 16.1 发布

🛠 开发模式支持文件系统缓存,next dev 体验更接近生产环境;新增包分析器功能;调试体验大幅改进。让 Next.js 开发更高效、更透明。

Immer 11.1 发布

🛠 性能优化版本,immer 这个不可变数据更新库又轻快了些许。如果你在用 Zustand 或其他依赖 immer 的库,升级即可无痛获得性能提升。

React Router 7.12 发布

🛠 安全修复版本,建议尽快升级。React Router 团队持续为框架路由器加固安全防线,保障应用路由层稳健性。

Waku 1.0 Alpha 发布

🛠 轻量级 React 框架迎来里程碑版本,API 表面稳定。如果你是 Next.js 的“极简主义者”,Waku 提供了更轻量、更专注的替代方案。

Ant Design 6.2 发布

🛠 企业级 React 组件库持续迭代,6.2 版本带来细节优化与问题修复。Ant Design 的稳定性和生态成熟度依然是其最大优势。

React Conf 2025 全部内容上线

🎥 所有演讲和访谈视频现已开放观看。从 React 19 新特性到未来路线图,这是全年最重要的 React 技术盛宴,值得逐场品鉴。

Theo:我弃用了 Next.js(改用 TanStack Start)

🎥 知名开发者 Theo 分享从 Next.js 迁移到 TanStack Start 的完整心路历程。无论你是否考虑迁移,其中的技术权衡思考都极具参考价值。

Cosden Solutions:React Query 的正确使用方式

🎥 深入探讨 React Query 的最佳实践,帮你避开常见误区。从缓存策略到数据同步,视频涵盖了生产级应用的关键技巧。

Meta 技术播客 82 期:规模化 CSS 与 StyleX

🎙️ Meta 工程师分享如何在超大型代码库中管理 CSS。StyleX 的设计理念与实战经验,对任何关注 CSS 架构的团队都有借鉴意义。


📱 React Native 动态

Voltra 1.0:用 JSX 编写 Live Activities 和 Widgets

💡 革命性库让你用纯 JSX 组合 iOS Live Activities 和 Widgets,无需编写原生代码。相比社区先前方案,Voltra 既支持完整 SwiftUI 原语集合,又完全隐藏了 Swift 复杂性。注意:Expo SDK 55 也将推出官方解决方案。

Expo:用 Expo Camera 和 MaskedView 实现镂空相机效果

💡 如何让 UI 部分区域“透明”以显示背后的相机画面?这篇教程详细讲解了实现原理,创造出手机仿佛透明的酷炫视觉效果,是相机应用开发的实用技巧。

TikTok 风格视频 Feed 实现

💡 使用 FlashList 构建高性能短视频流,配合方向性预加载(向前 5 个、向后 1 个)和激进暂停策略,确保滑动流畅不卡顿。真正的生产级优化经验。

为 iOS 原生标签栏图标添加动画

💡 在原生底部标签导航器中实现 SFSymbol 图标动画需要遍历原生视图层级。作者分享了这一“hack”的完整实现路径,为追求精致交互的开发者提供了宝贵参考。

将 JavaScript 编译为 C:Static Hermes 实战

💡 Hermes 不止于 React Native!Parcel 作者成功将 Less.js CSS 预处理器编译为 C 库并从 Rust 调用。这展示了 Static Hermes 在跨语言工具链中的巨大潜力。

Callstack:React Native 2025 年度回顾

💡 逐月盘点 2025 年 React Native 社区的重大事件。从新架构进展到生态里程碑,这份回顾帮你快速理清过去一年的技术脉络。

Infinite Red:React Native 2025——进入打磨时代

💡 2025 年是 React Native 从“功能建设”转向“精细打磨”的关键年份。新架构成熟、性能工具完善、开发体验提升——生态已进入高质量演进阶段。

Software Mansion:React Native 2026 趋势与预测

💡 展望 2026,哪些技术将主导 React Native 生态?来自顶级咨询公司的深度预测,涵盖架构演进、工具链革新与社区发展方向。

React Native 0.84 RC.0 发布

🛠 升级至 React 19.2.3,大量可访问性改进,新增 onKeyDown/onKeyUp 事件支持。新版本让 React Native 更接近 Web 标准,为开发者提供更一致的交互能力。

RNSEC:React Native 安全扫描器

🛠 一款 CLI 工具,扫描 React Native 与 Expo 应用中的安全漏洞和硬编码密钥。安全左移,在开发阶段就捕获潜在风险,是生产应用必备的工具。

Facetpack:36 倍更快的 Metro 转换

🛠 用 OXC 替代 Babel 实现 Metro 打包器的极速转换。如果你被 Metro 的构建速度困扰,这个实验性工具可能带来突破性提升。

Tickle:React Native 的 AHAP 风格触觉反馈

🛠 支持瞬时与持续触觉效果,可直接从 UI 线程调用。为追求精致交互体验的应用提供细粒度触觉控制,让触感设计更上一层楼。

Galeria 2.0 发布

🛠 图片查看器库新增过渡动画风格、圆角插值、页面指示器和模糊叠加层。2.0 版本让图片浏览体验更加流畅优雅。

Nitro 0.33 发布

🛠 支持 HybridViews 复用和 UIView 子类,React Native 原生模块开发更灵活。Nitro 持续降低高性能原生集成的门槛。

Radon 1.15 发布

🛠 直接在 Radon IDE 中运行 Maestro 测试,开发测试一体化。在编辑器内完成从编码到自动化测试的全流程,效率倍增。

Sonner Native 0.23 发布

🛠 纯 React Native 实现的 Toast 库,新增 positionStyle 属性。轻量、可定制,是替代原生 Toast 的优雅方案。

Rock 0.12 发布

🛠 面向棕地应用的模块化工具包,新增对 RN 0.83 和 0.82 的支持。Rock 让现有原生应用渐进式集成 React Native 更加顺滑。

Simon Grimm:2026 年如何选择 React Native 技术栈

🎥 从 Expo 到裸工作流,从导航方案到状态管理,视频帮你理清当前技术选型思路。2026 年启动新项目,这份指南不容错过。

Building v0 iOS:一路修复 React Native

🎥 开发 v0 iOS 应用过程中遇到的 React Native 问题与修复历程。真实项目经验分享,对深入理解 RN 内部机制极有帮助。

React Native Radio 350 期:2025 年度回顾

🎙️ 人气播客年度总结,邀请社区核心成员复盘 2025 年重大事件。轻松愉快的氛围中,带你回顾 RN 生态的演进轨迹。


🔀 其他技术见闻

2025 JavaScript Rising Stars

💡 JavaScript 生态年度报告发布,过去一年最受欢迎的项目、框架和工具一目了然。快速把握技术风向,发现下一个明星项目。

TypeScript 简明指南

📖 官方文档的有趣替代方案,以简洁方式讲解 TypeScript。适合作为快速入门或参考手册,降低 TypeScript 学习曲线。

日志记录之痛

💡 分布式系统时代,日志记录的最佳实践是什么?这篇观点文章批判性地审视了现代日志方案,提出了更清晰的日志哲学。

Node.js 中的 require(esm):从实验到稳定

💡 深度解析 require(esm) 功能从实验走向稳定的技术挑战。作者分享了实现过程中的权衡与决策,对理解 Node.js 模块系统演进极具价值。

Signal 与基于查询的编译器对比

💡 构建增量系统的两种不同范式深度对比。Signal 与基于查询的编译器各有优劣,文章帮你理解何时该选哪种架构。

NPM 将实施分阶段发布

💡 为防范供应链攻击,NPM 计划引入分阶段发布机制。安全策略升级将让包生态更可信,值得开发者关注。

Chrome 144 发布

🛠 新增 <geolocation> 元素、Temporal API 和开发者工具改进。Chrome 持续推动 Web 平台能力边界,为开发者提供更多原生能力。

Astro 6 Beta 发布

🛠 重新设计的开发服务器体验,带来更快的热更新和更清晰的错误提示。Astro 6 让静态站点开发更高效愉悦。

Turborepo 2.7 发布

🛠 新增 DevTools 和可组合配置功能。Turborepo 让 monorepo 构建提速的同时,调试和配置体验也大幅提升。

Rspack 1.7 发布

🛠 v2 之前的最后一个主要版本,功能已相当完善。这个 Rust 驱动的打包器正以极快速度追赶 Webpack 生态兼容性。