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 进行交互式文本销毁

MDN Web Docs

Celebrating 20 years of MDN | MDN Blog

MDN turns 20! Let's look at how we started, how MDN became the most trusted resource for web developers, the impact it's had on the open web, and yes, there's cake, too.

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，切勿滥用。
• 优先采用更健壮的依赖管理模式，减少人为记忆化的复杂性，提升组件可维护性和开发体验。

tkdodo.eu

The Useless useCallback

Why most memoization is downright useless...

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）安全。

Tanstack

Stop Re-Rendering — TanStack DB, the Embedded Client Database for TanStack Query | TanStack Blog

Your React dashboard shouldn't grind to a halt just because one TODO turns from ☐ to ☑. Yet every optimistic update still kicks off a cascade of re-renders, filters, useMemos and spinner flashes. If y...

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 版本之后，表单仍然一团糟)

Socket

npm ‘is’ Package Hijacked in Expanding Supply Chain Attack -...

The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.

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) 组成。

react.dev

React Compiler – React

The library for web and native user interfaces

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

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

GitHub

GitHub - TypeCellOS/BlockNote: A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror…

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap. - TypeCellOS/BlockNote

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）与批量网格的结合。

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 摘要： 本期 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 等，覆盖多个技术领域。

Reddit

From the programming community on Reddit: React Still Feels Insane And No One Is Talking About It

Posted by mbrizic - 408 votes and 321 comments

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

Epic React

`useOptimistic` to Make Your App Feel Instant

Make your React apps feel instant with the new useOptimistic hook from React 19. Improve UX by updating UI immediately while async actions complete.

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 最新版本发布等。

GitHub

Release v3.0.0 · recharts/recharts

🚀 Recharts 3 is here!
Huge shoutout to @PavelVanecek who wrote 95% of the code for this major version release. We re-wrote recharts state management, wrote some 3500 unit tests, fixed a bunch of bu...

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

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 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 发布等。

overreacted.io

A blog by Dan Abramov

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 将应用视为跨两台计算机的单一程序，拥有独立模块系统、毒丸保护和交互之门，开发者只需处理构建错误即可。

overreacted.io

How Imports Work in RSC — overreacted

A layered module system.

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 视频内容转为网页文本，便于学习。

void(0)

Announcing Rolldown-Vite

We introduce Rolldown-Vite, a drop-in replacement for Vite that leverages the power of Rolldown for faster builds and reduced memory usage. Try it out today!

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 摘要：本期《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。

overreacted.io

Static as a Server — overreacted

You wouldn't download a site.

AI 摘要：本期 React Status 聚焦 React 生态的重要更新与实践指南，涵盖 Mantine 8.0 组件库升级、React 性能优化策略、React Server Components 与 Astro 的对比、数据架构设计等核心内容，同时介绍了 Relay、Tiptap 等工具的最新版本，并汇总了 JavaScript 生态的动态。

1. Mantine 8.0 发布
• 新增 20+ 组件（如 GitHub 风格热力图、树形组件、半圆进度条）和子菜单功能。
• 图表功能增强（集成 Recharts），作者 Vitaly Rtishchev 等。

2. 简讯摘要
• 匿名 Reddit 用户分享大厂 React 招聘流程。
• React Conf 2025 将于 10 月在拉斯维加斯举办。
• Tiptap 3.0 Beta 发布（无头富文本编辑器框架）。

3. 工具与库更新
• react-sounds：为 React 应用添加音效。
• Relay v19：Facebook 的 React/GraphQL 框架，兼容 React 19。
• mono-jsx：服务端 JSX 运行时，支持多环境（Node、Deno 等）。
• PptxGenJS 4.0：JavaScript 生成 PowerPoint 文件。
• 其他：Material UI 7.1（支持 Tailwind CSS 4）、React Modal Sheet 4.4 等。

mantine.dev

Version v8.0.0 | Mantine

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience