AI 摘要：本文详解了作者多年实践总结出的 React 项目结构化思路，以「逐层演进」为主线，从单文件组件到分页驱动(Page-driven)架构，展示了如何通过结构分层与命名规范，实现 React 应用在复杂度与团队协作下的平衡。文章强调不存在唯一正确方案，读者应根据项目规模与团队习惯灵活调整。

1. 单文件阶段（Single React File）
• 初始项目通常包含一个 src/App.js 文件。
• 所有组件起初可写在单文件中，便于快速原型开发。
• 随项目增长，应将可复用组件拆分，以减少冗余和嵌套复杂度。

2. 多文件阶段（Multiple React Files）
• 抽离可重复使用的组件为独立文件，如 List 和 ListItem。
• 通过文件导出（export）定义组件的“公共接口”(API)。
• 使用文件扩展名策略（.js/.jsx/.ts/.tsx）统一文件规范。
• 建议仅对可复用组件拆分，不要过早抽象。

3. 文件夹化阶段（From Files to Folders）
• 随组件复杂度增加，将相关技术关注点（测试 test、样式 style、类型 type、工具 utils）集中在组件文件夹。
• 采用“一个组件一个文件夹”的结构，如 src/list/ 或 src/app/。
• 使用 index.js 作为模块对外出口（即“barrel 文件”），控制组件的公共 API。
• 讨论命名规范（如 .spec.js、.module.css）与层级深度（避免超过两级嵌套）。
• 建议尽量避免过深目录，用功能聚合代替结构嵌套。

4. 技术型文件夹（Technical Folders in React）
• 当项目达到中等规模，应区分“组件类”与“技术类”逻辑。
• 在 src/ 中增设按技术职能划分的文件夹：
• components/：组件逻辑
• hooks/：自定义 React Hooks
• context/：应用全局状态
• services/：通用服务（格式化、错误追踪、请求封装等）
• 服务示例通过 Intl API 实现日期格式化并由模块封装暴露。
• 推荐使用路径别名（alias，如 @/services/...）避免相对路径混乱。
• 指出 barrel 文件的利弊——简化导入但可能削弱 tree-shaking。

5. 功能型文件夹（Feature Folders in React）
• 大型项目中，按“业务领域（Feature）”划分文件夹，以聚合其内所有组件与逻辑。
• 结构区分：
• feature/：业务特定代码（如 user、post、payment）
• components/：跨 feature 可复用的 UI 组件
• services/hooks/context：依旧保留为全局可重用逻辑
• 每个 feature 内可包含对应 components/、services/ 等子文件夹以划分技术关注点。
• 帮助团队并行开发、限域依赖，提高可维护性与灵活性。

6. 页面驱动结构（Page Driven Structure）
• 当应用存在多页面（特别是 Next.js 或 Vite + React），建议围绕 pages/ 或 app/ 文件夹组织。
• 每个页面对应入口点 (page.tsx)，并链接相关 feature。
• 在同页面内是否嵌套 feature/取决于其复用度与作用域；鼓励保持一致的目录结构。
• 比较 Next.js 的文件路由与客户端路由在结构设计上的差异。
• 最终形成具有多层抽象但一致规则的工程化结构，支持扩展与团队协作。

7. 总结与启发
• 无绝对正确的文件结构，应随项目自然演化。
• 遵循“按复用程度而分层”，“按技术职能而归类”，“按业务边界而划分”的原则。
• 五步推进法可帮助开发者在项目复杂化时保持组织清晰。

www.robinwieruch.de

React Folder Structure in 5 Steps [2025]

React Folder Structure in 2025 for large React projects. The guide walks you through a file structure from small to large project ...

AI 摘要：React 团队发布 React Compiler 1.0，这是一个稳定且可在生产环境中使用的构建时优化工具。它可自动分析 React 组件与 hooks 的数据流与可变性，实现自动记忆化，从而减少渲染次数并提升性能。该编译器适用于 React 与 React Native，与 Babel、Vite、Next.js、Expo 等生态紧密集成，并提供增量迁移指南和内置 lint 规则以强化 “Rules of React”。此次发布标志着历时近十年的工程成果落地，开启 React 新的性能优化时代。

1. 背景与发布概况
• React Compiler 1.0 正式发布，可在 React 与 React Native 中使用。
• 支持与 Expo、Vite、Next.js 等集成，默认在新项目中启用。
• 历经十年研发，从 Prepack 到 HIR（高阶中间表示 High-Level Intermediate Representation）的多次重构。

2. 编译器原理与功能
• React Compiler 作为构建时优化工具，在 Babel 插件阶段分析 AST（抽象语法树 Abstract Syntax Tree）。
• 通过自动记忆化优化组件与 hooks，可在条件渲染后仍实现 memoization。
• 拥有验证与诊断机制，通过数据流分析发现潜在违反 Rules of React 的代码。
• 与 eslint-plugin-react-hooks 集成，为开发者提供静态规则检测支持。

3. 安装与使用方式
• 支持 npm、pnpm、yarn 等安装方式：babel-plugin-react-compiler@latest。
• 改进了依赖分析算法，支持可选链与数组索引依赖。
• 提供 Playground 与文档供开发者测试优化效果。

4. 性能表现与生产验证
• 已在 Meta Quest Store 等大型应用投入使用。
• 实测初始加载与页面切换性能提升 12%，部分交互速度提升 2.5 倍。
• 性能提升同时保持内存中性，证明优化可靠。

5. 兼容性与 Lint 集成
• 兼容 React 17+，React 19 可直接启用编译器特性。
• ESLint 规则合并入 eslint-plugin-react-hooks@latest，替代独立插件。
• 强化了 setState、ref 等模式检测，防止渲染循环和 unsafe 渲染行为。

6. 与 useMemo / useCallback 的关系
• 默认由编译器自动进行 memoization，大多数情况下无需手动使用 useMemo/useCallback。
• 对需要精准控制依赖的场景仍建议保留或使用手动记忆化。

7. 新项目与渐进式迁移方案
• Expo SDK 54+ 默认启用编译器，Vite 与 Next.js 模板可直接启用。
• 提供渐进迁移指南，帮助旧项目分阶段集成 React Compiler。

8. swc 与构建工具支持
• 支持 Babel、Vite、Rsbuild 等构建工具，swc 插件仍在实验阶段。
• Next.js 15.3.1+ 可显著提升构建性能，Vite 通过 vite-plugin-react 启用编译器。
• 正在与 oxc 团队合作，为未来 rolldown 支持做准备。

9. 升级与版本管理建议
• 未来版本可能改变 memoization 策略，需保持端到端测试。
• 建议固定编译器版本（--save-exact）以避免意外行为变化。
• 强调遵守 Rules of React 以确保编译器优化安全有效。

react.dev

React Compiler v1.0 – React

The library for web and native user interfaces

AI 摘要：React 官方宣布将成立独立的 React Foundation，并将 React 与 React Native 从 Meta 转移至该基金会名下，以推动社区自治和生态中立化。基金会将管理基础设施、举办 React Conf、支持生态项目并发放资助。同时，React 将建立独立的技术治理结构，由社区贡献者共同制定方向，确保没有单一机构主导。此次改革标志着 React 迈入新阶段，进一步强化其作为开放社区核心技术的可持续性。

1. 背景与愿景
• React 诞生于 Meta，但已成长为由全球开发者共同维护的开源生态。
• 由于贡献者与公司参与度不断提升，React 超越了单一企业项目的边界。
• 成立基金会意在支持更广泛的社区、促进生态资源分配与治理独立。

2. React Foundation 的定位与结构
• 基金会将成为 React、React Native 与相关项目（如 JSX）的新家。
• 职责包括维护基础设施（GitHub、CI、商标）、组织 React Conf、资助生态项目。
• 由董事会治理，设有执行董事 Seth Webster；初始成员包括 Amazon、Callstack、Expo、Meta、Microsoft、Software Mansion 与 Vercel。
• 目标是形成供应商中立 (vendor-neutral) 的社区运作机制。

3. 技术治理（Technical Governance）改革
• 技术方向将由实际参与 React 开发与维护的人员共同决定。
• 将建立与基金会独立的新治理结构，避免公司影响过度集中。
• 计划通过社区反馈完善方案，未来将公布具体实施细节。

4. 社区感谢与未来展望
• 官方感谢数千名开发者与企业的长期贡献。
• 认为基金会与新治理模式能确保 React 的长期稳定与活力。
• 强调这一变化是 React 成熟化与开放化的重要里程碑。

react.dev

Introducing the React Foundation – React

The library for web and native user interfaces

AI 摘要：本文详细展示了使用 Framer Motion 在 React 项目中实现动画的方式，对比了传统 CSS 实现与 Framer Motion 的简洁 declarative（声明式）方式，并通过 Fade-In、Hover、List Staggering、Drag-and-Drop、Sortable List 等实例演示其强大功能。文章强调了 Framer Motion 的生产级特性（如 gestures、physics、variants、Reorder 等），并给出了初学和进阶的使用方向。

1. 为什么选择 Framer Motion
• 提供生产级动画解决方案，语法简洁，学习成本低
• 完美兼容 React 与 TypeScript，支持 declarative 宣告式写法
• 强大特性：drag 拖拽、spring 物理动画、scroll 动效、shared layouts

2. 开发环境准备与安装
• 使用 Vite 初始化 React + TypeScript 项目
• 使用 npm install framer-motion 安装依赖
• 提供 Demo 链接 便于快速试验

3. 动画实例逐步讲解
• 基本 Fade-In：对比 CSS keyframes 与 motion.div（initial/animate/transition）
• Hover 动画：对比 Tailwind hover/active 与 whileHover whileTap 的简洁写法
• List Staggering：传统 nth-child + 延迟 VS variants + staggerChildren 的声明式方案
• Drag-and-Drop：利用 drag、dragConstraints 等 props 快速实现拖拽，不需手写 DOM 监听
• Sortable List：利用 Reorder.Group 与 Reorder.Item 实现可排序列表的流畅交互

4. 总结与进阶提示
• Framer Motion 让复杂动画开发更直观和简洁
• 初学者可从 motion.div、animate、transition 入门
• 进阶可使用 AnimatePresence、Reorder、useMotionValue 等更高级功能
• 动画开发核心思想：声明式描述交互，而非命令式逻辑

Medium

Animating Elements through framer motion with React.js

Today, most of the website requirements you come across will ask for animations and effects. While you can definitely build animations with…

AI 摘要：作者通过对常见的 React 状态订阅写法 (useEffect + useState) 进行剖析，指出该模式在服务端渲染 (SSR) 下可能引发抖动 (jank)，并介绍了 useSyncExternalStore 的优势：它提供了更简洁的 API，支持订阅机制和服务端默认值，从而提升 SSR 渲染体验并减少 UI 闪烁。

1. 常见的 useEffect + useState 订阅模式
• 使用 useEffect 在组件挂载时订阅事件源 (event source)。
• 更新 useState 来触发组件重渲染，卸载时清理订阅。
• 常见于绑定 ResizeObserver、DOM 引用、外部事件等场景。

2. 该模式在服务端渲染 (SSR) 下的问题
• 初始渲染使用默认值，SSR 时无法订阅浏览器事件。
• 浏览器接管 (hydration) 后才启动订阅并更新状态。
• 导致界面多次渲染，出现 UI 闪烁、过渡不平滑的现象 (jank)。

3. 使用 useSyncExternalStore 的改进方案
• 提供显式的 subscribe 函数实现监听与取消订阅。
• 第二个参数为获取当前值的方法，确保 UI 与外部状态同步。
• 第三个参数允许定义服务端默认值，提升 SSR 初始化体验。
• 案例对比表明，useSyncExternalStore 渲染更平稳，减少 UI 抖动。

4. 开发实践与思考
• 在涉及外部状态订阅 (API、事件、可观察对象) 场景下，应优先考虑 useSyncExternalStore。
• 默认值的设计影响 SSR 渲染体验，可以通过合理设置来降低不适感。
• 对数据可视化、实时 UI 交互等高频场景尤其重要。

Swizec

You may be looking for a useSyncExternalStore | Swizec Teller

When you see a `useEffect` that updates a `useState` and returns a value, you might be looking for a `useSyncExternalStore`. This is my current vendetta.

AI 摘要：这是一个 ESLint 插件，用来帮助开发者发现并避免在 React 项目中错误或不必要使用 useEffect 的场景。通过提供多条规则，它能让代码逻辑更清晰、性能更高、Bug 更少，尤其对初学者有帮助，同时对有经验的开发者也可能带来新的启发。

1. 插件介绍与背景
• 核心思想是减少不必要的 React useEffect 使用
• 改善代码可读性，提高性能，减少逻辑错误
• 推荐新手使用，同时对老手也有价值

2. 安装与配置
• 提供 npm 和 yarn 的安装方法
• 支持 .eslintrc 旧版配置与 eslint.config.js 新版配置
• 可与 eslint-plugin-react-hooks 一起使用以获得更精准的依赖分析

3. 核心规则（Rules）
• no-derived-state：禁止在 effect 中存储衍生 state
• no-chain-state-updates：禁止在 effect 中链式更新 state
• no-event-handler：禁止用 effect 来做事件处理逻辑
• no-adjust-state-on-prop-change：禁止在 prop 改变时用 effect 调整 state
• no-reset-all-state-on-prop-change：禁止在 prop 改变时通过 effect 重置所有 state
• no-pass-live-state-to-parent & no-pass-data-to-parent：禁止在 effect 中向父组件传递 state 或数据
• no-initialize-state：禁止在 effect 中初始化 state
• no-manage-parent：禁止纯依赖 props 的 effect
• no-empty-effect：禁止空的 effect 定义
• 默认推荐配置会启用全部规则作为 warning

4. 测试与实践
• 项目中包含 (in)valid 例子用于规则验证
• 强调插件并非覆盖所有情况，但尽量减少误报

5. 社区与反馈
• 鼓励开发者提出问题和改进建议
• 插件以减少 false positives（误报）为设计目标，即时存在偶发的漏报 (false negatives)

6. 学习资源
• React useEffect 官方文档
• You Might Not Need an Effect
• Synchronizing with Effects
• Separating Events from Effects
• Lifecycle of Reactive Effects

GitHub

GitHub - NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect: Catch unnecessary React useEffect hooks to make your code…

Catch unnecessary React useEffect hooks to make your code simpler, faster, and safer. - NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect

AI 摘要：本文结合 Val Town 的实际开发经验，探讨了在复杂 React 应用中如何避免依赖臃肿、保证 package.json 的可控性。作者强调理解依赖、避免不必要引入、分析依赖大小、借助工具管理更新与清理，并推荐学习优秀开发者的模块。核心观点是：依赖管理是前端开发的必修课，需在技术现实和理想简洁之间找到平衡。

1. 理解依赖与选择
• 在引入新依赖时应阅读源码和 README，而不是盲目安装
• 小型依赖可直接 vendor（复制进项目）而非整个 npm 安装
• 需要权衡依赖体积与使用场景，避免冗余引入

2. 工具与方法论
• 使用 npm ls、package-lock.json、pnpm why 等追踪依赖树与冗余
• 分析依赖的实际体积（开发环境 node_modules 和生产构建大小双维度）
• 借助 rollup-plugin-visualizer、Next.js bundle analyzer 等工具可视化构建产物

3. 模块评估标准
• 好的模块：有维护历史、TypeScript 类型支持、完整测试、文档清晰
• 坏的模块：不符合实际问题、缺乏维护或质量低劣
• 重点在于理解问题本身与模块实现的契合度

4. 清理与升级
• 借助 Renovate 持续更新依赖，避免积压
• 借助 Knip 清理未使用的依赖和文件，保持项目整洁
• 渐进式更新比“年度大升级”风险更低

5. 社群与开发者生态
• 推荐关注优秀开发者如 Sindre Sorhus、isaacs、Matteo Collina、Mafintosh、wooorm、unjs、Rich Harris 等
• 持续追踪他们的作品，有助于找到高质量依赖

6. 哲学与实践
• 依赖不可避免，是现代 Web 开发的本质
• 需要在“必要复杂性”与“依赖治理”之间找到平衡
• 依赖管理是一种长期的“gardening”（园艺）工作

GitHub

GitHub - antfu/node-modules-inspector: Interactive UI for local node modules inspection

Interactive UI for local node modules inspection. Contribute to antfu/node-modules-inspector development by creating an account on GitHub.

AI 摘要：本期 React Status 报导了一个与 useEffect 使用不当导致 Cloudflare 仪表盘宕机的案例，提醒开发者谨慎处理副作用；同时探讨了控制 package.json 依赖膨胀的技巧；介绍了 AI 辅助的终端代码审查工具 CodeRabbit CLI；并整理了近期前端生态的更新，包括 React Canary 新特性、pnpm 安全机制、Expo 54 改进、TanStack 工具集更新，以及 JavaScript 社区内围绕 npm 供应链攻击、Safari 26.0 发布和 Bun 1.2.22 发布等动态。

AI 摘要：ForgeUI 是一个基于 React 的实验性组件库，重点在于“动画优先”的设计理念，提供动画表单、动态卡片、闪烁文字等现代化 UI 组件，旨在帮助开发者快速实现富交互界面。其技术栈包括 Next.js、TypeScript、Tailwind CSS、shadcn/ui 和 Framer Motion。项目定位更像是作者的“个人实验室”，供开发者参考与取用，而非正式社区驱动的开源产品。

AI 摘要：传统的 JavaScript 数组方法如 .sort() 、 .reverse() 和 .splice() 会直接修改原数组，可能带来难以排查的 bug，尤其在 React 等依赖 不可变数据 (immutability) 的框架中。ES2023 新增了 toSorted() 、 toReversed() 和 toSpliced() ，它们返回新数组而不会变异原始数据，从而提升代码可维护性和安全性。这一细小的语法改进带来了巨大的开发体验优化，特别是在现代前端应用中。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 新的不可变 (non-mutating) 方法
• toSorted()：返回排序后的新数组，允许自定义比较函数
• toReversed()：返回反转后的新数组，避免破坏原数组
• toSpliced()：返回元素增删后的新数组，保持原数组不变

2. 在 React 中的应用场景
• 保证状态不可变性，触发正确的重新渲染
• 常见用法：展示反向排序的任务列表、根据条件生成新数组
• 避免额外的深拷贝操作（如 structuredClone()）

3. 浏览器与环境支持
• Chrome/Edge 110+、Safari 16+、Firefox 115+、Node.js 20+ 原生支持
• 旧环境可依赖 core-js 提供 polyfill
• 与其他 ES2023 特性互补，如 optional chaining、top-level await

AI 摘要：本文介绍了在使用 React 状态管理工具（如 Zustand）与 React Query 结合时，如何避免通过 useEffect 手动同步客户端状态，而是通过 派生状态 (derived state) 的方式更声明式地实现一致性。文中指出派生优于同步，因其能减少副作用，提高可靠性和灵活性，并展示了用户选择和表单默认值处理的实践案例。

tkdodo.eu

Deriving Client State from Server State

How to use derived state in React to keep client state and server data aligned without manual sync or effects.

AI 摘要：本文深入探讨了 React 的 cache API 在 React Server Components (RSC) 中的真正价值：它不仅仅是一个用来优化和去重数据请求的 memoization 工具，更重要的是保证在同一次 RSC 渲染中的数据一致性。文章通过多个示例展示 cache 如何避免 UI tearing、改善 SQL 查询结果一致性，以及在面对 impure data 时确保 React 组件输出的可预测性，最终强调开发者应将 cache 理解为一致性工具，而不是单纯的性能优化手段。

Twofoldframework

React Cache: It’s about consistency

Learn how React's cache function keeps your components predictable and consistent.

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

tkdodo.eu

React Query Selectors, Supercharged

How to get the most out of select, sprinkled with some TypeScript tips.

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