AI 摘要：本期《React Status》聚焦 React 生态的最新动态，涵盖电子电路设计工具 tscircuit 的 React 实践、React 19+ 新特性课程、静态化服务组件解析、TanStack Query 简化提案，以及多个工具库更新（如 React Chrono 2.7 和 Bippy）。此外，还讨论了 React 的未来前景、AI 辅助开发工具（GitHub Copilot）和付费服务（Clerk Billing），并推荐了 JavaScript 生态相关资源。

编者按：主编 Peter Cooper 宣布因参加 Google I/O 暂停更新，5 月 28 日恢复。

1. 技术文章与动态
• Dan Abramov 解析：静态化服务器组件的实现原理与 CDN 部署优势。
• TanStack Query RFC：提案合并数据查询方法为 query() 和 infiniteQuery()。
• 社区讨论：React 2025 年发展前景、ESLint 插件检测冗余 useEffect
• Vercel 新功能：一键过滤 AI 爬虫。

2. 工具与库更新
• tscircuit：用 React 设计电子电路板的创新工具，提供 GitHub 仓库。
• React Chrono 2.7：增强动态时间轴组件的搜索与动画功能。
• Bippy：通过伪装 DevTools 访问 React 内部状态的工具。
• Basecoat：将 shadcn/ui 组件转换为无框架依赖的纯 HTML/CSS 版本。
• 其他：React Query Builder 8.7、React Native Tab View 4.1、BlockNote 0.30。

3. JavaScript 生态动态
• V8 的显式资源管理（using/await using）。
• Parcel 2.15.0 支持 SVG 转 JSX。
• npm 包开发最佳实践、PPT 生成库 PptxGenJS。

AI 摘要： 本期《React Status》 (2025年5月28日，第430期) 是一份聚焦 React 生态系统的技术资讯简报，涵盖了 React 19 的最新特性、工具库更新、框架对比以及社区动态。文章详细介绍了 React 核心概念的可视化讲解、TanStack Router 的独特优势等内容，同时提供了众多 React 相关工具和库的更新信息，如 Docusaurus 3.8、ReactJust 等。此外，还包括了 JavaScript 生态的最新动态，如 JavaScript 30周年回顾和 TypeScript 的 Go 移植进展。

1. 简讯 (IN BRIEF)
• React 即将迎来12周年生日（5月29日）。
• Storybook 9.0 刚发布，将在下期详细报道。
• React Router 提供对 RSC (React Server Components) 的预览支持。
• Astro 5.8 发布，放弃对 Node v18.20.8 之前版本的支持。
• Vercel 可能将弃用 Edge Functions，转向 Fluid compute。

2. 教程与案例
• 使用 GitHub Copilot 构建 React 应用：Kedasha Kerr 提供了详细指南和视频，展示如何利用 Copilot 快速构建现代 JavaScript 应用。
• React 元框架的问题与重建：Redwood 团队分享了从头开始重建 RedwoodSDK 的经验，强调从第一性原理出发解决问题。
• AI 辅助构建物理角色控制器：Ian Curtis 结合 React Three Fiber、Three.js 和 Rapier，展示了如何构建物理角色控制器，并提供在线试玩链接。
• 其他内容：包括 React 并发渲染的故事、Expo 实时音频处理、React 新 Activity 组件的性能提升，以及 Next.js 集成 Google 登录的简易方法。

3. 代码、工具与库：
• Docusaurus 3.8：面向文档的静态站点生成器，带来构建性能提升及“未来标志”功能，允许提前体验 v4 特性。
• ReactJust：一种无框架的 Server Components 方案，适合不想使用 Next.js 或 React Router 的开发者实验 RSC。
• Rockpack 6.0：React 应用启动工具，旨在最小化项目设置时间，支持服务端渲染、打包、linting 和测试，已更新至 React 19。
• 其他更新：包括 react-native-alert-queue、React DayPicker 9.7、React Spring 10.0、React Native Reanimated 4.0 Beta 4 等工具和库的最新版本发布。

4. JavaScript 生态动态：
• Deno 团队为 JavaScript 30周年制作了历史时间线。
• SolidJS 创作者发布视频对比 React、Angular、Vue、Svelte 和 Solid 的框架方法。
• Google 发布 Gemini 和 Vertex API 的官方 JavaScript/TypeScript SDK v1。

AI 摘要：本期内容包括 Rolldown-Vite 的发布、JavaScript 相关技术文章（如 Progressive JSON 和无构建客户端岛）、Go 语言指南、HTML 流式传输技术等，同时推荐了热门库和项目（如 snapDOM 和 react-md-editor）

1. 热门新闻与文章
• VoidZero announces Rolldown-Vite：VoidZero 发布了 Rolldown-Vite
• Is It JavaScript?：Jim Nielsen 的博客探讨了“It’s Just JavaScript”这一常见说法的背后含义，质疑是否所有以 .js 为扩展名的代码都能简单地归类为 JavaScript
• Progressive JSON — overreacted：Dan Abramov 的文章探讨了传统 JSON 数据传输的局限性，并提出了“Progressive JSON”的创新概念，即通过广度优先的分块流式传输数据，使客户端能够逐步处理未完成的数据，从而提升用户体验和性能。
• document.currentScript is more useful than I thought：文章介绍了 document.currentScript 的实用性，展示了它在处理 <script> 元素配置属性和其他方面的潜力。
• Exploring "No-Build Client Islands": A (New) JavaScript Pattern for SPAs：介绍了“No-Build Client Islands”这一架构理念，旨在帮助开发者构建无需构建工具、稳定持久的交互式单页应用（SPA）。通过使用 Preact、HTM 和 Page.js 等轻量级工具，结合原生 JavaScript 模块，开发者可以摆脱复杂框架更新和构建链的困扰，实现快速、反应式的 Web 应用，同时保持与任何后端的灵活集成。
• A JavaScript Developer's Guide to Go：为 JavaScript 开发者提供学习和使用 Go 语言的指南，帮助跨语言开发。
• Streaming HTML out of order without JavaScript：介绍了一种无需 JavaScript 即可实现 HTML 乱序流式传输的技术，利用 Shadow DOM 和 Declarative Shadow DOM (DSD) 结合流式响应服务器和模板语言，实现在浏览器中按正确顺序渲染乱序发送的 HTML 片段。
• Experimenting with no-build Web Applications：探讨无构建 Web 应用的实验，关注简化开发流程的可能性。
• One Roundtrip Per Navigation — overreacted：Dan Abramov 深入探讨了网页导航中数据加载的效率问题，分析了从传统 HTML 服务端渲染到现代客户端渲染中数据请求的演变。

2. Upcoming Conferences（即将举行的会议）
• JSNation 2025：作为年度主要 JavaScript 会议，将于 6 月 12 日和 16 日在阿姆斯特丹及线上举行，拥有 50+ 位演讲者，票价 €414（优惠码 LIBHUNT10 享 10% 折扣）。
• React Summit 2025：全球最大的 React 会议，将于 6 月 13 日和 17 日在阿姆斯特丹及线上举行，早鸟票已开售，票价 €504（优惠码 LIBHUNT10 享 10% 折扣）。

3. 热门库与项目
• snapDOM：一个快速且准确地将 HTML 元素捕获为图像的工具。
• Chain-of-Recursive-Thoughts：通过让 AI 自我辩论提升思考能力，效果显著。
• ws4kp：一个基于 Web 的 WeatherStar 4000 项目，包含天气频道和显示功能。
• react-md-editor：一个 React.js markdown 编辑器组件，适用于 UI 开发。
• Youtube2Webpage：将 YouTube 视频内容转为网页文本，便于学习。

AI 摘要：本文深入探讨了 React Server Components (RSC) 中导入（import）和导出（export）机制的运作方式，重点分析了如何通过 'use client' 和 'use server' 指令在前后端环境中划分代码。作者从模块系统的基本原理出发，解释了 JavaScript 模块的单例特性及其在单一环境中的运作方式，随后扩展到前后端代码共享的挑战和解决方案，提出了 'server-only' 和 'client-only' 的“毒丸”机制来防止代码跨环境误用，并通过 RSC 的指令机制实现前后端模块系统的交互。文章旨在帮助读者构建对 RSC 的准确心智模型，同时也适用于对模块系统感兴趣的开发者。

什么是模块系统？
• 模块系统的定义：模块系统是一套规则，用于将程序拆分为文件，控制代码可见性，并将代码链接为可执行的单一程序。
• 人类需求：模块帮助开发者将复杂程序拆分为可管理的部分，限制代码可见性以保护实现细节，并促进代码复用。
• 计算机执行：计算机需要在内存中“展开”模块代码以执行程序，模块系统弥合了人类编写代码和计算机执行之间的差距。
• JavaScript 模块：通过 import 和 export 关键字实现模块化。

导入就像复制粘贴……但又不完全是
• 基本直觉：JavaScript 的模块系统设计使得 import 和 export 的效果类似于复制粘贴，最终程序在内存中展开为单一代码块。
• 与 C 语言的 #include 对比：C 的 #include 确实是直接复制粘贴，可能导致命名冲突和重复包含问题，而现代模块系统（如 JavaScript）通过自动处理避免这些问题。

JavaScript 模块是单例
• 单例特性：每个模块无论被导入多少次，其代码只执行一次，模块系统通过缓存已加载模块的导出值来实现这一点。
• 优势：避免代码重复导致输出体积膨胀；模块可保持私有状态；简化心智模型，每个模块视为单一实例。
• 实现机制：模块系统通常使用 Map 记录已加载模块及其导出值，例如在 Node.js、Webpack 等工具中均有类似逻辑。

一个程序，一个计算机
• 单一环境设计：大多数 JavaScript 程序是为单一计算机（如浏览器或 Node.js 服务器）设计的，模块系统支持从入口文件开始加载并缓存模块。
• 导入效果：导入模块时，代码被“带入”当前程序，模块保持单例特性，避免重复执行。

两个程序，两个计算机
• 前后端分离：传统上，前端和后端是运行在不同计算机上的两个独立程序，分别负责交互逻辑和 HTML/API 服务。
• 模块系统独立性：前后端各有独立的模块系统，共享代码（如 a.js）会在两个环境中分别加载，实质上是“各自的版本”。

构建失败是好事
• 代码复用风险：共享代码可能引入只适用于一侧的 API（如后端的 fs），导致另一侧构建失败。
• 构建失败的价值：构建失败提供早期反馈，迫使开发者解决代码复用问题，可选择调整代码位置或依赖关系。

仅限服务器端代码
• 问题场景：若共享代码引入服务器端敏感信息（如密钥），可能无构建错误地泄露到前端。
• 解决方案：引入 server-only “毒丸”包，标记不可进入前端的代码，前端构建时遇到则失败，强制开发者修复。
• 传递性：只需在源头文件标记 server-only，依赖链会自动传播此限制。

仅限客户端代码
• 类似机制：引入 client-only “毒丸”，防止特定前端代码（如 DOM 操作）被后端引入，构建失败以避免运行时错误。
• 细粒度控制：如 React 通过条件导出机制将 useState 等 API 标记为 client-only。

一个程序，两个计算机（RSC 视角）
• 前后端协作问题：传统方式依赖约定同步前后端代码，缺乏语法支持，易出错。
• RSC 创新：use client 指令允许后端引用前端代码而不将其引入后端，实质是“打开前端之门”，生成 <script> 标签在前端恢复；use server 则相反。
• 指令作用：非指定代码运行位置，而是创建模块系统间的“门”，用于数据传递而非代码移动。

结论
• RSC 核心：承认前后端模块系统独立性，共享代码在两侧分别存在。
• 两大机制：server-only 和 client-only 防止代码误入错误环境；use client 和 use server 提供跨环境引用和数据传递的“门”。
• 最终模型：RSC 将应用视为跨两台计算机的单一程序，拥有独立模块系统、毒丸保护和交互之门，开发者只需处理构建错误即可。

AI 摘要：本文是 React Status 第 431 期的内容，发布于 2025 年 6 月 11 日，涵盖了 React 生态系统的最新动态和前沿技术讨论。文章聚焦于 React 团队成员 Dan Abramov 近期的一系列博客文章，深入探讨了 React Server Components (RSC) 的技术细节和客户端/服务器架构的创新。此外，文章还报道了 Remix 框架的重大转型、React Native 新架构的进展、以及多个工具和库的更新，如 Storybook 9 和 React Final Form 7.0 等。同时，包含了 JavaScript 生态中其他值得关注的技术进展，如 Rolldown 打包工具和 Gleam 语言的性能提升。

1. Dan Abramov 最近的博客系列
• How Imports Work in RSC：介绍了 JavaScript 模块系统的基础知识，并探讨了 RSC 如何扩展模块系统以跨越服务器和客户端环境，解决模块导入的技术挑战。
• Progressive JSON：以 Progressive JPEG 为比喻，阐述了流式 JSON 数据在应用中的动态加载和渲染，结合 React 的 Suspense 功能实现更流畅的用户体验。
• Why Does RSC Integrate with a Bundler?：深入分析了为什么 RSC 需要与打包工具（如 bundler）集成，以及如何协调客户端和服务器代码的复杂性，是一篇技术性较强的文章。
• RSC for Lisp Developers：将 RSC 的理念与 Lisp 语言“代码即数据”的思想进行比较，探讨了服务器组件的设计哲学。
• 额外信息：Dan Abramov 宣布提供 UI 工程和 React 相关的咨询服务，机会可能有限。

2. 生态简讯
• React Native 团队已冻结旧架构代码库，全面聚焦新架构开发。
• React Jam 游戏开发活动回顾：开发者在 10 天内用 React 创建游戏，文章分享了获奖作品。
• Expo 团队分享了一个基于 React Native 和 Reanimated 构建的快节奏游戏案例研究。
• Remix 框架转型：Remix 和 React Router 一年前合并后，如今再次调整方向。React Router 回归 Remix 最初目标，而 Remix 重启为以模型优先、低依赖、Web API 为中心的 Preact 全栈框架。
• React Router 项目也有好消息，包括开发进展更新、新的开放治理模型和未来规划。

3. 技术洞察与教程
• The 3 Ways JavaScript Frameworks Render the DOM：SolidJS 创作者 Ryan Carniato 讲解了框架渲染 DOM 的三种方式，内容深入但易于理解（视频时长 16 分钟）。
• 多篇技术文章，包括 2025 年 React + Flask 项目创建、自定义 useState Hook、2025 React 设计模式与最佳实践、从 Next.js 迁移到 TanStack、SolidJS 教程以及 Remix V3 的缺陷分析。

4. 工具与库更新
• Storybook 9：UI 组件测试工具大更新，新增交互、视觉和无障碍测试功能，支持 React、Svelte、Next.js 等框架。
• Partycles：React 粒子动画库，提供 19 种效果（如烟花、气球），并展示了优秀的项目落地页面设计。
• React Final Form 7.0：高性能表单状态管理库，从 Flow 迁移到 TypeScript。
• Chrome Extension Boilerplate：基于 Vite 和 Turborepo 的 Chrome/Firefox 扩展开发模板，构建速度更快。
• 其他更新包括 Ink 6.0（支持 React 19）、React Native Reanimated 3.18、PrimeReact 10.9.6 等。

5. JavaScript 生态其他动态
• Rolldown-Vite：基于 Rust 的快速打包工具 Rolldown 即将被 Vite 集成，开发者反馈构建时间显著缩短。
• Node 的类型剥离加载器 Amaro 已经达到了 v1.0，标志着 Node.js 对 TypeScript 提供“稳定”支持的下一步。
• Gleam：一种易读易写的语言，编译到 JavaScript 后性能提升 30%。
• 其他技术如 Node.js 原生模块钩子实现热模块重载、Oxlint 1.0 发布等。

AI 摘要： 本期 React Status 通讯聚焦于 React 生态系统的最新动态与未来趋势，探讨了 React 19 带来的特性与争议，Redux 维护者 Mark Erikson 对 React 社区现状的深度分析，以及 React Native 0.80 的更新亮点。此外，文章还涵盖了 AI 技术在前端栈中的应用、多个 React 相关工具与库的更新、以及 JavaScript 领域的其他重要进展，内容详实且覆盖面广，为开发者提供了宝贵的行业洞察与技术资源。

1. 行业动态
• 2025 Redux 维护者对 React 现状的分析：Mark Erikson 回顾了 React 的演变历程，讨论了 React 19 引发的未来方向争议，分析了 Meta 内部驱动开发与 Vercel 主导的 Next.js 服务器组件工作之间的分歧，并反驳了关于 Verce l“接管” React 或 “React 仅适用于 Next” 的谣言，同时反驳了对客户端开发被抛弃的说法。
• Figma 收购 Payload：Figma 收购了开源 Next.js 后端框架/CMS Payload 的创造者，扩展其设计工具生态。

2. 工具与库更新
• React Native 0.80 发布：包含 React 19.1，引入可选的更严格 TypeScript 类型，以及 iOS 上预构建依赖的实验性支持以加速构建过程。旧架构正式“冻结”，对未来将移除的 API 发出警告。
• Relay v20 发布：Facebook 推出最新版本的 GraphQL 导向 React 框架。
• React Aria Tree：新增拖放功能支持。
• Motion 动画库推出 VS Code 扩展，方便 Copilot 使用其文档。 #vscode
• react-searchable-dropdown：支持虚拟化大型数据集的可定制下拉组件。
• Apple 'Liquid Glass' Effect：为 React 应用提供 Apple 新设计语言效果的高控制实现。
• use-mcp 钩子：Cloudflare 推出用于连接 MCP 服务器的钩子，简化 AI 系统的认证和工具调用。
• 其他工具：包括 react-call 1.8、Slice Viewer、State in URL 5.0、Ant Design Charts 2.4 等多个库的更新与功能介绍。

3. 教程与案例分享
• Cursor 升级 Storybook：展示如何利用 AI 在两小时内完成 Storybook 升级。
• 无限跑马灯效果：介绍如何结合 React 和 Motion 沿 SVG 路径构建无限跑马灯。
• Suspense 流式传输：Ryan Toronto 分享了可组合流式传输的技术实现。

4. JavaScript 生态系统其他动态
• Dan Abramov 博客：讨论代码审查中抑制警告的问题及其应对规则。
• pnpm 10.12：引入实验性“全局虚拟存储”以提升空间效率。
• Oxlint 1.0 和 Biome v2：分别推出快速替代 ESLint 的 linter 和支持类型感知规则的新版本。
• 其他技术：包括顶层 await 在 ES 模块中的应用，以及 WelsonJS 用于构建 Windows 应用的创新方法。

AI 摘要：本文详细介绍如何使用 React、TypeScript 和 Motion（原 Framer Motion）库创建一个沿着自定义 SVG 路径无限滚动的跑马灯效果。作者从基础的 SVG 路径创建开始，逐步讲解如何通过 CSS 属性 offset-path 和 offset-distance 实现路径跟随动画，并利用 Motion 库增强动画控制和交互性。文章涵盖了多元素动画、悬停和滚动速度控制、Z 轴顺序管理、CSS 属性映射以及响应式设计等高级技术，旨在帮助开发者构建复杂而流畅的网页动画效果。

AI 摘要：本文是 React Status 第 433 期newsletter，发布于 2025 年 6 月 25 日，涵盖了 React 及相关生态系统的最新动态和技术资源。内容包括 Recharts 3.0 的重大更新、Vercel Ship 2025 直播活动、Vite 7.0 发布、React Native 在 macOS 桌面应用开发中的应用、AWS 无服务器框架 SST v3 的介绍，以及众多 React 相关工具、库和文章。此外，还包括 JavaScript 领域的其他重要资讯，如 Bun v1.2.17、Node.js 新版本发布等，旨在为前端开发者提供全面的技术更新和学习资源。

1. Recharts 3.0 发布：介绍了 Recharts 3.0 作为一个基于 D3 的 React 图表库的重大重构版本，支持多种图表类型（如折线图、面积图、柱状图等），并提供示例代码和 GitHub 仓库链接。
2. Vercel Ship 2025 直播活动：报道 Vercel Ship 2025 活动，包含 Guillermo Rauch 的 keynote 演讲，分享 Next.js 及 Vercel 平台最新动态，并提供直播链接和日程安排。
3. 简讯 (IN BRIEF)：汇总了 Vite 7.0 发布及其迁移指南、React Native Skia 在高级图形领域的未来展望（涉及 WebGPU、Three.js 等）、Certificates.dev 提供的 React 认证等资讯。
4. React Native 构建 macOS 桌面应用：通过 Jack Herrington 的 14 分钟视频教程，展示如何使用 React Native 开发 macOS 桌面 AI 聊天机器人应用，强调 React Native 的跨平台能力。
5. SST v3：现代 AWS 无服务器基础设施，用于 TypeScript 定义全栈应用基础设施，展示如何在 AWS 上部署 React 和 Hono 应用，并与 Terraform、CloudFormation 进行对比。
6. 技术文章与视频：列举多篇技术文章和视频，如将 React 的 <ViewTransition> 引入 Vanilla JS、React 重新渲染的触发机制、Next.js 和 Vercel 博客迁移、AI 重建 Rails 页面为 Next.js、TanStack Query 在 Expo 应用中的使用等。
7. 代码、工具与库：推荐多个 React 相关工具和库，包括 Cloudflare 的 use-mcp 钩子、Warka（React 驱动的电子墨水显示框架）、Soundz（组件音效库）、react-force-graph（力导向图可视化工具）等，以及多个库的版本更新信息。
8. JavaScript 领域其他资讯：涵盖 CKEditor 优化包大小的经验、Bun v1.2.17 支持提前捆绑、AdonisJS 7 路线图、JavaScript 正则表达式使用技巧、SVGO 4.0 发布、<syntax-highlight> 自定义元素、Node.js 最新版本发布等。

AI 摘要：本文由 Kent C. Dodds 撰写，详细介绍了 React 18.3 版本中引入的 useOptimistic Hook 如何通过乐观更新提升应用的用户体验。文章从乐观更新的基本概念入手，探讨了其在处理表单提交、状态更新等场景中的应用，强调了如何在不等待服务器响应的情况下即时反馈用户操作，从而让应用感觉更快、更流畅。同时，文章提供了具体的代码示例和注意事项，帮助开发者在实际项目中正确使用这一 Hook。

1. 引言：乐观更新的概念
• 介绍了什么是乐观更新（Optimistic Updates），即在用户操作后立即更新 UI，假设服务器请求会成功，而无需等待实际响应。
• 强调了这种方法对用户体验的提升，尤其是在网络延迟较大的情况下。

2. useOptimistic Hook 的基本用法
• 详细讲解了 useOptimistic 的 API，包括如何定义初始状态、更新函数以及如何与表单交互结合。
• 提供了一个简单的表单提交示例，展示了如何在用户输入后即时更新 UI。

3. 处理复杂状态和回滚机制
• 探讨了当服务器请求失败时，如何通过 useOptimistic 回滚到之前的状态，确保数据一致性。
• 提供了代码片段，说明如何处理错误并通知用户。

4. 与 React 生态系统的集成
• 讨论了 useOptimistic 如何与其他 React Hooks（如 useState 和 useEffect）配合使用。
• 提到与数据获取库（如 React Query）的结合，增强乐观更新的实际应用场景。

5. 注意事项与最佳实践
• 提醒开发者在实现乐观更新时需考虑用户体验的细节，例如加载状态和错误提示的显示。
• 强调了在特定场景下应避免过度使用乐观更新，以免误导用户。

AI 摘要： 本期 React Status 通讯（#434，2025年7月2日）聚焦于 React 生态系统的最新动态与讨论热点，涵盖了 React 开发中的复杂性问题、工具库更新、技术文章、会议回顾以及社区活动等内容。特别值得关注的是 Mario Brizic 的一篇挑衅性文章，讨论了 React 在构建现代 SPA 应用时可能带来的复杂性与混乱，引发了 Reddit 和 Hacker News 上的广泛讨论。此外，还包括 Vercel Ship 2025 会议的亮点回顾、新工具和框架的介绍，以及多篇关于 React 开发技巧的文章。

1. 主文章：React Still Feels.. Foolish, and No One is Talking About It?
• 作者 Mario Brizic 探讨了 React 在构建复杂 SPA 应用时的痛点，指出其灵活性可能导致代码混乱，强调这并非 React 独有问题。
• 该文在 React 社区内引发了激烈讨论，尤其是在 Reddit 和 Hacker News 上。
2. 简讯 (IN BRIEF)
• Reactylon：基于 Babylon.js 的 React 3D/扩展现实框架，新增展示页面。
• React Advanced London：11 月在伦敦举办的线上线下 React 活动。
• Anthropic 新功能：通过 Claude 构建和分享带有 React UI 的 AI 应用。
3. 会议回顾：Vercel Ship 2025 Recap
• 总结 Vercel 年度会议的最新公告，包括 AI SDK 更新、Fluid 计算选项、Vercel Sandbox、滚动发布功能和机器人检测等。
4. 技术文章
• 《Using useOptimistic to Make Your App Feel Instant》by Kent C. Dodds：介绍如何使用 useOptimistic 提升应用响应速度。
• 《A Study Guide to Data Fetching in React》by React Practice：React 数据获取的学习指南。
• 《Automating Frontend Accessibility with Storybook 9》by Dominic Nguyen：探讨如何利用 Storybook 9 自动化前端无障碍性测试。
5. 代码、工具与库
• Time Picker：基于 shadcn/ui 的日期/时间选择组件，简洁优雅。
• Tuono：React/Rust 全栈框架，结合 Next.js 风格与 Rust 后端开发。 #rust 【啊？6】
• react-xtermjs：为 React 应用添加 Xterm.js 终端体验。
• UI Builder 2.0：Figma 风格的可视化组件构建工具。
• AG Charts v12.0、Yet Another React Lightbox 3.24、Schedule-X 2.35、Ink 6.0.1 等工具和库的更新与介绍。
6. 深度内容
• 介绍了 Vercel 开发的开源字体 Geist，支持多语言和多种字重。 #font
• Josh Justice 关于在 React 中使用 MUI X Charts 创建高级折线图的教程。
• Neobrutalism：基于 shadcn/ui 的视觉组件库。
• 关于 React 应用样式设计的思考，作者支持 Tailwind 方案。
• 使用 Kamal 2 部署 Next.js 应用
• 使用 Framer Motion 创建 “Sticky” 搜索交互的教程
• 在最后介绍了编辑团队的其他技术通讯，如 Ruby Weekly、JavaScript Weekly、Node Weekly 等，覆盖多个技术领域。

AI 摘要：本文详细介绍了如何使用 Framer Motion 和 React 创建一个带有 Gooey 效果的搜索交互组件。作者受到动态岛动画的启发，将 Gooey 效果应用于搜索栏，打造了一个小型但有趣的交互体验。教程涵盖了 Gooey 效果的实现、SVG 滤镜的应用、Framer Motion 的集成、搜索状态管理、动画效果的优化以及针对 Safari 浏览器的兼容性处理，旨在激发开发者创意并提供实用指导。

1. Gooey 效果的创建：
• 介绍了 Gooey 效果的起源，基于 Lucas Bebber 的文章 The Gooey Effect。
• 通过调整 SVG 滤镜中颜色矩阵的 alpha 通道值，实现自定义的 Gooey 效果。
• 提供了具体的代码示例，展示了如何使用 feGaussianBlur 和 feColorMatrix 创建滤镜效果。

2. 应用 Gooey 效果：
• 在主组件中通过 CSS 将 SVG 滤镜应用到父元素上。
• 提供了简单的代码结构，展示滤镜如何与 DOM 元素结合。

3. Framer Motion 集成：
• 使用 Framer Motion 为搜索栏添加动态动画效果，定义了四种状态（初始状态、搜索激活、搜索结果、加载中）来管理交互逻辑。
• 使用 AnimatePresence 组件实现搜索结果的集体展示和个体动画效果。
• 详细解释了 getResultItemVariants 和 getResultItemTransition 函数，用于控制搜索结果项的动画效果（如缩放、位移、模糊效果）。
• 动画设计注重细节，例如通过索引计算延迟实现顺序动画，并使用弹簧动画（spring）增加流畅性。

4. Safari 兼容性挑战：
• 提到 WebKit 对 SVG 滤镜的限制，作者通过 isUnsupported 布尔值对 Safari 浏览器进行了动画调整。
• 强调了兼容性问题的长期存在，并提供了针对性的解决方案。

AI 摘要：本文详细介绍了在 Three.js 中使用实例化（Instancing）技术来优化性能，同时渲染多个对象。通过实例化，可以将多个共享相同几何形状和材质的对象合并为一个绘制调用（Draw Call），显著减少 CPU 到 GPU 的通信开销，从而提升渲染效率。文章结合 React Three Fiber 和 drei 库，提供了从基础实例化到复杂场景（如森林渲染）的完整教程，涵盖了自定义着色器、实例属性调整以及多种实例集的实现方法。

1. 引言：介绍了实例化的基本概念及其性能优势。实例化允许在一次绘制调用中渲染多个共享几何形状和材质的对象，例如渲染森林中的树木、岩石和草地时，可以大幅减少绘制调用次数，提升性能。
2. 基础实例化：以渲染一千个盒子为例，展示了传统方法与使用 drei/instances 的实例化方法的对比。传统方法需要一千次绘制调用，而实例化方法仅需一次，显著优化了性能。
3. 多组实例化：讨论了如何使用 drei 的 createInstances() 函数创建多个实例集，例如同时渲染盒子和球体（一千个盒子与一千个球体），最终仅需两次绘制调用。
4. 自定义着色器的实例化：讲解了如何为实例化对象创建自定义着色器材料，包括顶点动画（如 blob 效果）。通过 instanceMatrix 属性解决位置重叠问题，确保每个实例有独立的变换。
5. 调整实例属性：介绍了如何通过 InstancedAttribute 为每个实例设置自定义属性，例如为 blob 动画添加时间偏移（timeShift），实现独立动画效果。
6. 创建森林场景：以渲染一千棵树为例，展示了如何加载 3D 模型并应用实例化技术，最终仅用三次绘制调用完成整个森林场景（包括天空盒和地面）。还通过随机位置、高度和旋转增加场景多样性。
7. 进一步阅读：提及了未深入探讨但值得关注的主题，如批量网格（Batched Meshes）、骨骼动画（Skeletons）以及变形（Morphing）与批量网格的结合。

BlockNote 是一个开源的基于 React 的块式富文本编辑器，风格类似于 Notion，具备高度可扩展性，构建于 Prosemirror 和 Tiptap 之上。它为开发者提供了开箱即用的现代化文本编辑体验，支持动画、拖放块、嵌套缩进、斜杠菜单、格式化菜单以及实时协作等功能。BlockNote 提供了完整的 UI 组件（基于 Mantine），也支持自定义 UI 或不使用 React 的核心库，适合嵌入到各种应用中。此外，它遵循 MPL 2.0 许可证，允许商业使用，并鼓励社区贡献。

▶️ 每个 React 开发者都应该了解的 Signals —— SolidJS 的创建者 Ryan 花费八个小时制作了这个十分钟的短视频，展示了现代 JavaScript 代码中信号的状态，并与 React 的方法进行了比较。

AI 摘要：本期《React Status》全面概述了 React 生态系统的最新进展，包括全新 UI 组件库的发布、React Compiler 文档的改进、避免常见 React 和 Next.js 开发错误的实用指南，以及 AI 辅助 UI 构建的效率对比。此外，还深入探讨了 Zustand 状态管理、React Router 与 Server Components 的未来集成，以及 React 图形可视化的应用。文章还收录了一系列新增及更新的代码工具和库，并简要介绍了 JavaScript 领域的其他重要动态，如 Bun 的新版本发布和新的全栈框架尝试。

1. 社区动态与文章
• React Compiler 新版文档 – React 团队正努力改进 React Compiler（一个处于发布候选阶段的预编译优化工具）的官方文档，以便开发者深入学习和使用。
• Untitled UI React: 全新 UI 组件库 – 介绍了一个基于 Tailwind CSS 和 React Aria 构建的开源 UI 组件库，支持复制粘贴式开发，并提供 PRO 版本包含更多组件和 Figma 集成。 #组件库 #tailwind
• Figma MCP vs Claude: UI 构建之战 – 探讨了将 Figma 中的 UI 视图转换为可运行 React 代码的最佳方法，对比了使用 Figma 自身的 MCP 服务器和 Claude Code 通过截图实现的效果。 #AI #MCP
• Zustand 状态管理入门 – 为对 Zustan 感兴趣的开发者提供了全面介绍，强调这个轻量级状态管理解决方案的成熟、流行和经过实战检验的特性。
• React Router 与 React Server Components 的未来 – 探讨了 React Router 用户在与 React Server Components 集成时将面临的重大影响和未来发展方向。
• 使用 Matter.js 和 React Native Skia 构建 2D 游戏风格物理效果 – (文章) 详细讲解如何实现 2D 游戏中的物理效果。
• 将 Next.js 站点迁移至 Eleventy 并提升 24% 性能 – (文章) 分享了从 Next.js 迁移到 Eleventy（一个流行的 Node.js 静态站点生成器）的经验，并展示了性能提升。
• 使用 Okta 创建带有社交登录认证的 React PWA – (文章) 指导如何构建一个支持社交登录认证的 React 渐进式 Web 应用 (PWA)。

2. 代码与工具 (Code, Tools & Libraries)
• Reagraph: WebGL 驱动的 React 网络图可视化库 – 提供详细文档和 Storybook 实例，用于在 React 中实现基于 WebGL 的网络图可视化。 #webgl
• React Unity WebGL 10.0: 在 React 应用中嵌入 Unity WebGL 应用 – 庆祝其发布 8 周年，帮助将 Unity WebGL 应用与 React 应用集成并进行通信。
• React CodeMirror: CodeMirror 编辑器组件 – 使在 React 中使用流行的 JavaScript 代码编辑器 CodeMirror 变得更简单，提供了可定制的演示。
• React Native Audio API 0.6.5 – 基于 Web Audio API 的音频引擎。
• React Stripe.js 3.8 – Stripe.js 和 Stripe Elements 的 React 组件。
• React Native Rich Text Editor 1.10 – React Native 富文本编辑器。

3. JavaScript 领域其他动态 (Elsewhere in JavaScript)
• Platformatic 在 Node.js 中运行 Laravel 应用 – Platformatic 公布了在 Node.js 环境下运行 Laravel 应用的新方法。
• Bun v1.2.19 发布 – Bun 发布了新版本，新增了 pnpm 风格的隔离 node_modules 选项、交互式包更新器、VS Code 测试浏览器集成、更快的 Postgres 客户端等。
• eslint-config-prettier 包安全事件分析 – 分析了 eslint-config-prettier 包最近被入侵的事件，包括其工作原理和发生过程。
• bhvr: 基于 React 的全栈技术栈 – 介绍了一个构建全栈应用的有趣新尝试，该技术栈由 Bun, Hono, Vite 和 React (bhvr) 组成。

AI 摘要：本期 JavaScript Weekly 聚焦于 JavaScript 生态的最新动态，包括高性能工具库 es-toolkit 对 Lodash 的取代、React/Next.js 复杂项目的重构建议、WebAssembly (WASM) 与 DOM 支持现状、npm 供应链安全问题、以及一系列重量级项目和社区新闻。此外，涵盖新版本发布、实用代码与工具、开发者经验反思、前端性能提升案例和社区趣闻等，内容丰富，覆盖了当下前端开发的热点话题和实践建议。

1. 社区与安全动态
• 细节剖析近期 JavaScript 生态的供应链安全事件，如 npm 上 is 包被劫持导致的恶意代码传播，以及 stylus 包下架风波。
• 介绍供西班牙语开发者使用的 EsJS，探索非英语语境下的 JavaScript 编程创新。
• 对比 Biome 与 Oxlint 两款 Lint 工具，在类型智能与速度上的表现差异。

2. 工具与库更新
• es-toolkit：兼容 Lodash、更快且更小（97% 体积减小），被 Storybook、CKEditor、Nuxt 推荐，利于代码体积优化。
• Bun v1.2.19：现在支持带有 bun install 的 pnpm 风格的隔离 node_modules ，提供交互式依赖更新功能等。Bun 1.3 也有望很快推出。
• React Native Reanimated 4.0、PythonMonkey 1.2、Oxlint、Jasmine 等多款工具新版本。
• Transformers.js 3.7：支持在浏览器借助 ONNX 运行时运行预训练模型，加入语音转录及 LFM2 和 ModernBERT 支持。
• npq：包安装前安全审核，集成 Snyk 漏洞库并审核包活跃度，有助于抗击恶意依赖。
• Untitled UI React：基于 Tailwind CSS 和 React Aria 的大型 UI 组件库，原生开源并配备 PRO 版本。
• ts-regexp：为 TypeScript 带来严格静态类型的正则表达式（RegExp）。 #正则
• ApexCharts 5.3：流行的 JS 图表库。现在具有数据解析功能 ，可将原始数据对象直接映射到图表。 演示
• vue-multiselect 3.3：Vue 的通用选择 / 多选 / 标记组件。 #vue
• eslint-plugin-unicorn 60.0：100+ 有用的 ESLint 规则集中在一个地方。

3. 实用开发经验与案例分享
• React/Next.js 开发最佳实践：避开 useState 与 useEffect 过度使用、数据嵌套、表单扩展及隐式状态共享陷阱。
• WASM 与 DOM：讨论 WebAssembly 直接访问 DOM 的前景，以及现代工具链对 WASM 生态的支持改进。
• 移除 SPA 的现代 CSS 实践建议，呼吁回归服务端渲染和真实页面体验利于性能与交互。
• Next.js 站点迁移到 Eleventy 提升 24% 性能，展示静态站点生成器的新优势。
• JS Event Listener 参数处理、构建字体搜索引擎、Three.js+WebGPU 的文本破坏交互等创新项目实践。

4. 社区趣闻与行业动向
• SVG 图形教程，鼓励开发者解锁矢量图形能力。
• HTML 2025 状态调查开放，鼓励开发者参与获取前沿信息。
• Google 推出 OSS Rebuild 以提升开源软件安全，MDN 庆祝 20 周年，前端表单规范问题(三个 HTTP 版本之后，表单仍然一团糟)

AI 摘要：本期 React Status 精选了 React 及其周边生态的最新动态，包括 TanStack DB 的首次 beta 发布、Reaper 死代码分析 SDK、新的 React Native 动画库 Reanimated 4 及多款工具库，还有 TypeScript、Parcel、Remix、Next.js 等重要更新。内容从核心库、开发工具到行业热点，全面展示了前端开发领域的创新趋势，尤其突出数据管理、性能优化、工程实践和 JavaScript 生态的多元演进。

1. 生态与社区动态
• TanStack DB 首个 beta 版发布，为 TanStack Query 带来高效增量更新与乐观写入能力，实现在本地侧存储场景的差分数据流 (differential dataflow)。
• The Useless useCallback：React 状态管理与性能相关实践讨论，分析 useCallback、useMemo 潜在问题，展望 React Compiler 与 useEffectEvent 等新工具的改善能力。
• TypeScript 5.9 RC 发布，带来 import defer 和 --module node20 等新特性。
• Stack Overflow 2025 调查显示 React 继续蝉联 “最受开发者渴望（most desired）” Web 技术头名，尽管 Svelte 更 “受人钦佩（admired）”
• Parcel 深入支持 React Server Components，并解析 "use client" 等指令的实际作用机制。
• React Native 下一个版本中引入预编译的 iOS 版本，RC3 阶段承诺将构建时间缩短 10 倍

2. 文章与深度实践
• 《Remix 3 和 React-中心架构的终结》 探索 React 未来架构趋势。
• 《Next.js 运行时密钥注入实战》 深入分析密钥管理在微服务和 SSR 场景下的重要性。
• 《将 JSX 改写为 Astro 的思考》 带来组件语法和工程结构的迁移经验。

3. 代码、工具与库
• React Native Reanimated 4 正式带来类 CSS 动画与过渡体验到 React Native，兼具复杂能力与高性能。
• Better Upload 支持各类 S3 兼容存储的极简文件上传，适配 Next.js、TanStack Start、Remix 和 Hono 等框架。
• Rooks.js 8.4 提供接近 100 个自定义 hooks，涵盖在线状态、窗口大小、语音合成、键盘输入等各类场景。
• 新发布与更新工具还有 React Three Viverse 教程、Tinybase 6.5、TanStack Form 1.15、IntentUI 3.3、Preact 10.27、BlockNote 0.35、React-three-fiber 9.3、Ink 6.1 等，覆盖数据存储、表单、组件库、Notion 风格编辑器、命令行应用等多样领域。

4. JavaScript 生态其他重点
• JavaScript 各类运行时和引擎历史盘点。
• es-toolkit 成为 Lodash 100% 兼容替代，已被 Storybook、Recharts 等主流项目采用。
• Zod 对决 Valibot 的 JS/TS 校验器评测视频。
• Hugging Face Transformers.js 让机器学习模型直接运行于浏览器，并支持多种音频与文本模型。
• Vercel 发布 Fluid compute 平台，该平台本质上提供 “无服务器服务器（serverless servers）”。
• Google OSS Rebuild 通过比对源码与上游，进一步保障开源生态（如 npm）安全。

AI 摘要：本文深入探讨了 React 的 useCallback（及部分 useMemo）在许多开发实践中被滥用、实际无效甚至带来额外复杂性的现象。作者指出，只有在需要“引用稳定性”（referential stability）时才有必要使用 memoization（记忆化），但多数情况下由于组件、props 或 state 的传递与依赖管理不当，memoization 实际无法带来性能提升，甚至反而让代码维护变得困难。作者以真实项目为例，分析了 memoization 的链式依赖是如何轻易被打破，进而推荐采用最新引用（Latest Ref Pattern）和即将推出的 useEffectEvent 方案来简化副作用依赖管理。

1. 记忆化的真正动机
• 只有两大理由：性能优化、降低副作用（effect）频繁触发。
• 核心是保持“引用稳定性”，以防止不必要的重新渲染或副作用。

2. 错误/无用的 useCallback 场景分析
• 如果目标组件本身未被 React.memo 包裹，useCallback/useMemo 完全无效。
• 组件自身如果不关心 props 的引用稳定性，多余的 memoization 没有任何作用，例如原生 button 的事件处理。
• 不应将传入的非原始 props 用作内部依赖（dependency array），因为无法控制其稳定性。

3. 真实工作中链式 memoization 失效的例子
• 多层 useMemo/useCallback、props 层层传递，一旦其中任意一环未 memoize，所有下游优化失效。
• 该问题不仅无法通过“层层 memoize”彻底修复，反而增加了理解和维护的负担，导致开发者难以溯源、清理无用优化。

4. 新的依赖管理模式推荐
• 最新引用（Latest Ref Pattern）：通过 useRef 保存当前最新值，通过 effect 始终同步，无需被动依赖。
• useEffectEvent（即将推出的 React 原生特性）：可直接在副作用 effect 内安全访问最新 props/state，无需显性依赖。

5. 结论与建议
• 仅在确有必要的场景使用 useCallback/useMemo，切勿滥用。
• 优先采用更健壮的依赖管理模式，减少人为记忆化的复杂性，提升组件可维护性和开发体验。

AI 摘要：本期 Frontend Focus 报道了前端领域的最新动态和趋势，涵盖 CSS 新规范（如无 JavaScript 的走马灯、Masonry 布局、Scroll-Spy）、React/Next.js 开发中的常见陷阱、MDN 发展二十周年纪念，以及一批最新实用工具和开发资源。此外，简要提及了 Safari/Edge 等主流浏览器新特性和业界法规、社区大事件，适合前端开发者了解行业资讯和提升技术能力。

1. 前端社区动态与大事件
• MDN 文档网站庆祝成立 20 周年，目前拥有超 14,000 页内容，是 Web 开发的重要资料库
• 2025 Stack Overflow 开发者调查结果公布，涵盖开发工具、AI 代理、LLM 使用现状等
• W3C 发布关于组织使命与价值观的重要新文档
• HTML Day 活动将举办超 40 场全球盛会，HTML 技术持续推进
• Wikimedia 积极挑战英国在线安全法案，关注数字法规生态

2. CSS 新特性与最佳实践
• CSS Masonry 布局：探讨新规范进展与当前解决方案，兼顾未来性与可用性，附带交互反馈征集
• CSS Scroll-Spy ：Chrome 140 浏览器引入 scroll-target-group 和:target-current，可用两行 CSS 实现目录高亮跟踪效果
•  Responsive Video is (Almost) Easy Now：如何处理垂直和横向视频以适应不同场景，在上下文需要时提供垂直和水平版本。
• “现代 CSS 杀死 SPA”观点：提倡服务器渲染与页面级动画，倡导 CSS 动画和意图性预加载

3. Web 技术深度/创新话题
• The Useless useCallback：React 状态管理与性能相关实践讨论，分析 useCallback、useMemo 潜在问题，展望 React Compiler 与 useEffectEvent 等新工具的改善能力。
• Performance Extensibility API：允许自定义轨迹供 Chrome DevTools 性能面板分析
• WebAssembly（WASM）与 DOM 互操作性进展，工具链提升正降低 WASM 开发门槛
• Liquid Glass ：苹果新一代视觉样式的网页实现尝试
• Web Components 及 Shadow DOM 实践解析

4. 工具、组件与资源推荐
• World Clock Slider：多城市世界时钟组件，支持暗黑模式
• FossFLOW：等距基础架构图形工具，支持丰富图标与数据管理 【这个挺酷炫的】
• StaticSearch：为静态站点增添搜索，无需后端，基于 Javascript，数据存储为 JSON
• Oklchroma：基于 OKLCH 色彩空间的色板生成器，提供基色，使用三角函数生成不同色阶
• difit：使用 GitHub 风格查看器查看和审查本地 git 差异的 CLI 工具，评论还可以作为 AI 提示进行复制。
• 7.css：忠实还原经典 Windows 7/XP UI 的 CSS 设计系统
• 使用 Three.js、WebGPU 和 TSL 进行交互式文本销毁

AI 摘要：本文深入探讨了 React Query 中 select 选项的高级用法，旨在实现极致的性能优化。文章从 select 的基本作用——创建精细化的数据订阅以避免不必要的组件重渲染——讲起，逐步深入到如何在 TypeScript 中为包含 select 的抽象进行类型定义。最后，文章聚焦于性能优化的核心，即“超级充电”，通过 React.useCallback 和外部 memoization 库（如 fast-memoize）解决昂贵计算在多次渲染和多组件实例中的重复执行问题，展示了如何将 select 的性能潜力发挥到极致。