AI 摘要：作者展示了 CVE-2025-55182 漏洞的具体利用方式，说明该漏洞出现在 React Server Components 的反序列化机制中。通过伪造 Chunk 对象以及操控 then 方法触发链式调用，攻击者可以利用 Next.js 的服务端组件解析逻辑实现远程代码执行 (RCE)。文章详细讲述了漏洞的产生原理、攻击向量和具体请求示例，说明此问题的严重性与利用条件。

1. 漏洞背景与影响范围
• 漏洞编号为 CVE-2025-55182，影响 React Server Components 的反序列化过程
• 可在 Next.js 16.0.6 环境下触发
• 利用对象结构中的 $@ 标记机制篡改 Chunk 引用并控制反序列化流程

2. 核心利用思路 (Exploit 原理)
• 使用 $@ 引用构造伪造的 Chunk 实例
• 将 Chunk.prototype.then 作为根对象的 then 属性，使得在 Promise 处理时自动触发攻击逻辑
• 通过修改 status 为 RESOLVED_MODEL 调用 initializeModelChunk 以执行受控对象的代码路径

3. 攻击链实现与触发机制
• 攻击目标是触发 Blob 反序列化流程
• response._formData.get 被重写为 JavaScript Function 构造器，实现任意代码执行
• 构造的 multipart/form-data 请求载荷通过控制 _prefix 字段注入任意命令（例如 child_process.execSync('xcalc')）

4. 安全意义与防护思考
• 漏洞本质源于反序列化信任边界不明与模型解析机制的未过滤输入
• 需加强 React Server Components 的反序列化安全校验
• 建议暂时限制相关功能或升级框架版本

Gist

CVE-2025-55182 React Server Components RCE POC

CVE-2025-55182 React Server Components RCE POC. GitHub Gist: instantly share code, notes, and snippets.

AI 摘要：React 官方披露了一个在 React Server Components (RSC) 中的严重远程代码执行漏洞（CVE-2025-55182），影响多个版本的 react-server-dom 系列包。问题出在 RSC 的负载反序列化逻辑中，攻击者可通过构造恶意 HTTP 请求在服务器上执行任意代码。相关漏洞获评 CVSS 10.0（最高等级），已在 19.0.1、19.1.2、19.2.1 等版本修复。React 团队建议开发者立即升级，并说明了受影响的框架包括 Next.js、React Router、Waku 等。

1. 漏洞概述与影响范围
• 披露的漏洞是针对 React Server Components 的未授权远程代码执行 (Remote Code Execution, RCE) 问题。
• 漏洞编号为 CVE-2025-55182，CVSS 评分为 10.0（极高严重度）。
• 所有使用 RSC 的 React 应用，即使没有定义特定 Server Function 接口，也可能受影响。

2. 受影响版本与安全修复
• 受影响版本：19.0、19.1.0、19.1.1、19.2.0。
• 修复版本：19.0.1、19.1.2、19.2.1。
• 修复建议：立即升级至修复版本的 react-server-dom-webpack、react-server-dom-parcel、react-server-dom-turbopack。

3. 受影响的框架与构建工具
• 部分框架与构建工具依赖或内置受影响包，包含 Next.js、React Router、Waku、@parcel/rsc、@vitejs/plugin-rsc、rwsdk。
• React 团队后续将更新具体升级指令。

4. 技术细节与漏洞原理
• RSC 机制允许客户端通过 HTTP 请求触发服务器端函数。
• 漏洞源于 React 在反序列化客户端请求载荷 (payload) 时的处理缺陷，导致攻击者可执行任意代码。
• 目前细节暂未完全公开，以防在修复完成前遭滥用。

5. 漏洞披露时间线
• 11 月 29 日：由安全研究员 Lachlan Davidson 通过 Meta Bug Bounty 计划报告漏洞。
• 11 月 30 日：Meta 安全部门确认漏洞并与 React 团队协作修复。
• 12 月 1 日：完成修复并与受影响项目共同测试与部署缓解措施。
• 12 月 3 日：在 npm 发布修复版本并正式公开 CVE。

6. 致谢与归属
• 感谢安全研究员 Lachlan Davidson 的发现、报告及协助修复贡献。

react.dev

Critical Security Vulnerability in React Server Components – React

The library for web and native user interfaces

AI 摘要：文章指出当前主流项目仍以传统方式使用 React Hooks（如滥用 useEffect），忽视了 React 在并发模式与异步数据处理上的演变。作者从设计理念出发，提出现代 Hook 的核心精神是“架构化的状态与逻辑管理”，强调使用 useSyncExternalStore、useDeferredValue、useEffectEvent 等新 API 优化性能和可测试性，鼓励开发者更多关注派生状态（derived state）而非副作用（side effects），并顺势迎接以数据为中心的 React 架构。

1. Hook 的角色转变与 React 的新方向
• Hooks 不只是生命周期函数重写，而是模块化、架构化的设计思想。
• React 18/19 的并发特性改变了异步数据处理逻辑，Server Components 与 use() 带来更高层数据抽象。
• 目标是构建“数据先行”的渲染流程，而非依靠组件内部副作用。

2. useEffect 的陷阱与替代方案
• 常见问题是将数据请求、派生计算塞入 useEffect，导致过度触发渲染。
• React 的最佳实践是：所有可在渲染阶段派生的内容应在渲染过程中完成，而非放入 effect 中。
• 引入 useEffectEvent 以访问最新的 state/props 而不触发额外渲染。
• 使用 useMemo、useCallback 处理纯计算逻辑，减少组件不必要的波动。

3. 自定义 Hooks：从重用到封装
• 自定义 Hook 不只是提炼通用逻辑，更是对业务域逻辑的封装。
• 示例：将 window 尺寸监听封装为 useWindowWidth，实现 UI 与逻辑分离。
• 优点包括更高的可测试性以及更干净的组件结构。

4. 外部订阅与 useSyncExternalStore
• React 18 新增 useSyncExternalStore 解决数据源订阅同步、性能与 tearing 问题。
• 适用于浏览器 API（如 matchMedia）、外部状态管理库（Redux、Zustand）等。
• 提供可靠的订阅模式与一致的渲染行为。

5. 并发工具与性能优化
• 使用 startTransition 与 useDeferredValue 在高频输入或筛选操作中保持响应式体验。
• startTransition() 用于延后状态更新，useDeferredValue() 延后派生计算。
• 合理组合能避免输入滞后，同时保护性能。

6. 可测试、可调试的 Hook 架构
• 将业务逻辑封装为 Hooks，以便隔离测试并增强可维护性。
• 借助 React DevTools 检查自定义 Hook 状态流动。
• 提倡将上下文逻辑（如认证、数据提供）提炼为 provider 级 Hook，例如 useAuthProvider。

7. 数据优先的 React 应用与未来趋势
• React 正向 Server Components、Action-based 数据流演进，弱化客户端副作用依赖。
• 新 API：[use()](https://react.dev/reference/react/use)、useActionState、useEffectEvent 等用于处理并发与异步状态。
• 重点是减少 “万能 useEffect” 模式，构建清晰、声明式的数据驱动结构。

8. Hook 作为架构模式
• Hooks 体现的是一种思考方式：派生状态应在渲染时生成，副作用仅限外部交互。
• 推荐模式：小而专注的 Hooks、明确的客户端/服务端边界、结合并发机制以优化用户体验。
• React 正在从“组件驱动”走向“数据驱动”阶段，现代 Hooks 是这种转变的核心载体。

AI 摘要：作者在 Filestage 的前端项目中使用 AI Agents（特别是 Claude Code）与 AST（Abstract Syntax Tree）技术，将近千个测试文件、六千多条测试从 React Testing Library v13 迁移至 v14。文章展示了从制定迁移指南、分步提交 PR、编写 codemod、自动化验证到改进 AI 提示的完整过程，最后总结出 AI 在大规模代码迁移中的优势与局限，并强调“小步迭代 + 自动化验证”的工程基本功仍然至关重要。

1. 项目背景与动机
• 公司使用旧版 React Testing Library 编写了 970 个测试文件，总计 6000 多测试用例。
• 升级至 v14 后 API 完全异步化，行为变化大，手动迁移代价极高。
• 作者决定尝试用 AI 辅助完成大规模迁移。

2. 准备与迁移指南
• 首次直接用 Claude Code CLI 自动迁移失败，暴露出测试失败过多、AI 调试混乱的问题。
• 于是转而使用 Claude Web 模式制作详细的迁移指南，分析版本差异与新 API。
• 确定主要变化：异步 API、测试 setup 模式更新、时序逻辑差异需人工介入。

3. 拆分改动与依赖并行安装
• 利用 NPM 的包别名功能同时运行 v13 与 v14，避免一次性大变更。
• 生成迁移指南并提交第一份 PR，保证团队迭代可控。

4. 编写与测试 codemod 自动化工具
• 使用 jscodeshift 解析代码为 AST，再生成批量修改工具。
• 编写输入输出测试用例以验证 codemod 效果（例如导入路径、 renderWithUserEvent 封装替换）。
• 自动测试 codemod 确保修改一致性和可验证性。

5. 实际迁移与 AI 协作循环
• 通过详细 prompt 指令让 Claude Code 分批迁移 10 个测试文件，执行 lint 检查与单测验证。
• 持续观察失败案例，不断改进 codemod 与迁移指南。
• 迁移指南从最初 4500 字扩充到 7500 字；codemod 从 271 行发展到近千行，测试覆盖更完备。
• 共执行 50 次迁移，形成 50 个独立 PR。

6. AI 性能与局限分析
• Claude Code 在调试测试与识别重复模式方面表现优异。
• 局限包括 context 深度不足、长任务遗忘指令、无法稳定维持覆盖率。
• 通过增加 JSON 格式的覆盖率报告输入，AI 能理解覆盖问题并修复。
• 网络波动与服务超限导致中断，验证仍需人工把关。

7. 工程启示与最终成果
• 整体用一周完成迁移，每个 PR 约半小时。
• 若纯人工迁移，估计需数月。
• 迁移过程机械但 AI 显著提升效率。
• 保持验证自动化、关注 edge case、理解底层工具机制，是让 AI 发挥价值的关键。
• 作者展望未来 AI 将进一步解放开发者，从“重复劳动”转向更有创造力的工作。

Eliocapella

Migrating 6000 React tests using AI Agents and ASTs

How I used AI to migrate 970 test files with 6000+ test cases from React Testing Library v13 to v14 in one week, through 50 PRs that would have taken months manually.

AI 摘要：作者以一种反思式的语气询问开发者——我们为什么要在浏览器里使用 React？文章从技术惯性、前后端职责演变、开发者文化到框架优先级等多个角度分析 React 的盛行原因与隐形代价。作者最终的立场是：在服务端使用 React 无可厚非，但在客户端运行 React 则可能损害用户体验。若仅因文化或团队习惯而加载庞大的 React 库，不如考虑 Preact、Astro 或直接用原生 JavaScript（vanilla JS），以提升性能和用户友好度。

1. 选择 React 的现象与动机
• 多数开发者使用 React 并非出于设计或性能考虑，而是出于团队惯性或工作要求。
• 作者将“被强制使用的技术”定义为企业级软件（enterprise software）。
• 惯性（Inertia）被认为是 React 持续流行的首要原因。

2. 前端与后端的边界变化
• 过去前端与后端有清晰分工，如 HTML、CSS、JavaScript 属于前端，PHP、Ruby、Python 属于后端。
• 随着 JavaScript 可在服务器端执行，开发者常忽视客户端代码的性能代价。
• 客户端执行环境有限，文件体积和加载时间至关重要，而服务端则可通过硬件“买掉”性能瓶颈。

3. React 开发者文化与生态迁移
• React 从最初强调虚拟 DOM 到后来因组件化架构与 JSX 被开发者喜爱。
• React 不再只是前端库，而是类似 Rails、Django 的全栈式生态。
• 这种文化层面的认同让开发者倾向于“全用 React”，即便这并不总是对用户友好。

4. 框架优先级与替代方案
• Next.js 推行服务端渲染（SSR），但仍倾向输出同样的客户端 React 代码，造成资源浪费。
• Astro 框架提出“最小化客户端 JavaScript”的思路，保留 JSX 作者体验但减轻用户负担。
• React/Next/Vercel 生态的惯性使这种思路被边缘化，但 Astro 展示了另一种可能。

5. 回归问题：为什么在浏览器使用 React？
• 若使用 React 只是团队协作或文化原因，可仅在服务端保留 React。
• 前端若非单页应用（SPA），应尽量减少 JavaScript 框架负担。
• 若确需前端状态管理，可考虑 Preact 或探索原生 JavaScript 的能力。
• 作者倡导：让框架留在服务器，充分利用浏览器本身的强大功能。

AI 摘要：Ant Design v6 正式发布，以技术升级和未来兼容性为核心，全面支持 React 18+，引入纯 CSS Variables 模式、全量组件语义化结构，并新增 Masonry、可拖拽 Drawer、模糊蒙版等实用功能。此次升级保持对 v5 的完全兼容，带来更轻盈的打包体积与更灵活的定制体验。Ant Design X 也同步发布 2.0，聚焦 AI 场景的 UI 体验，预示着生态的又一次跃进。

1. 版本背景与发布说明
• Ant Design 自开源以来积累超 96K Star、2K+ 贡献者，社区生态庞大。
• v6 聚焦技术优化与未来 React 版本兼容，标志进入新阶段。
• 与 v5 之间为平滑迁移，v5 进入一年维护周期。

2. 技术升级与核心变化
• React 版本提升：最低要求 React 18，推荐使用 React 19，移除旧版兼容逻辑。
• 启用 React Compiler：在构建产物中优化性能，开发者可自行选择是否开启。
• 纯 CSS Variables 样式架构：全面弃用 IE 兼容逻辑，样式实现零运行时（zeroRuntime）模式，支持实时多主题切换。
• 组件语义化结构：所有组件 DOM 结构优化，支持函数式类名配置 (classNames) 与内联样式 (styles)，提升定制能力与可维护性。
• 移除废弃 API：彻底移除 v4 遗留逻辑，统一 API 命名，同时兼容 v5 的使用方式。

3. 新组件与功能增强
• Masonry 瀑布流组件：优化图片展示与卡片排布体验。
• Tooltip 支持平移切换：多内容提示实现滑动过渡。
• InputNumber spinner 模式：交互式加减按钮布局更直观。
• Drawer 支持拖拽：用户可调整抽屉大小。
• 模糊蒙版背景：所有弹层默认使用模糊特效，可按需关闭。

4. 升级指南
• v6 可直接从 v5 升级，无需 codemod 或兼容包。
• 项目需运行在 React 18+ 环境。
• 不再支持 IE，建议替换废弃 API。

5. 未来计划
• 聚焦移动端交互体验与可访问性（Accessibility）增强。
• 跟进 React 新特性，持续优化性能。
• 持续推出新组件，拓展生态边界。

6. One More Thing —— Ant Design X 2.0
• 面向 AI 场景的组件库同步升级，提供更智能的交互能力。
• 新版本强化渲染性能与灵活性，是探索 AI 驱动界面的关键工具。
• 更多详情可参考 🎉 Ant Design X 2.0 正式发布了 🎉。

7. 致谢
• 官方感谢 2000+ 贡献者的支持与共创。
• 十年开源历程，秉持「因为你们的参与，开源才美好」的初心。

AI 摘要：本文由 Tanner Linsley 撰写，分析了当代 JavaScript 框架中兴起的 “use server”、“use client” 等自定义指令 (Directive) 趋势。这些指令表面上像平台特性，却缺乏标准规范，模糊了语言与框架的界线，引发生态混乱、工具负担与可移植性风险。作者主张：指令应保持极少且标准化，用于语言层；而具参数化、策略性或扩展需求的功能应采用显式 API（具来源 import、可组合与可版本化），以维持平台边界清晰和生态长远健康。

Tanstack

Directives and the Platform Boundary | TanStack Blog

A Quiet Trend in the JavaScript Ecosystem For years, JavaScript has had exactly one meaningful directive, "use strict". It is standardized, enforced by runtimes, and behaves the same in every environm...

AI 摘要：本文通过作者在开发一个 web 应用中遇到的「滚动失效」 bug，讲述调试问题的系统过程。核心思想是：编写可复现 (repro) 案例、不断缩小问题、保持 bug 的持续存在以保证分析方向正确，并通过持续简化最终发现真实原因——旧版 React Router 的 ScrollRestoration 组件在重验证过程中不当恢复滚动位置。文章强调调试纪律与“有根递归”(well-founded recursion) 的类比：每一步都要确保前进、缩小问题范围，而不是随意跳转、依赖猜测。

1. 问题起点：不可解释的滚动抖动
• 在应用中添加服务器请求后按钮滚动出现抖动。
• 初步怀疑 React Router 数据重载或 React 重渲染机制，但理论上不应造成影响。

2. Step 0：别急着修——没有 repro 一切无从谈起
• Claude 被要求修 bug，多次尝试“修复”但都无验证性。
• 没有可重现测试 (repro) 等于盲目调试，AI 与人类在此常犯同样错误。

3. Step 1：建立可靠的 repro
• 一个 repro 需要明确定义操作步骤、预期结果、实际表现。
• 若复现概率不高，需移除不确定因素（如模拟网络）。
• AI 无法直观识别“滚动抖动”，需重新定义可量化的 repro。

4. Step 2：缩小 repro
• 替换为测量滚动位置前后差值的量化 repro。
• 验证策略：当注释掉网络调用时行为回归正常，说明新的 repro 合理。
• 确保新的 repro 仍能表现“正向结果”，避免偏离原始问题。

5. Step 3：剥去无关部分
• 通过循环：复现 bug → 删除一部分代码 → 验证仍复现 → 提交变更。
• 若删除后 bug 消失，回滚并缩小删除范围。
• Claude 犯误：过早进入假设与实验，导致丢失“仍复现”前提。
• “调试有根性”类比：如同 well-founded recursion，确保每次简化是真正向终点推进，而非原地打转。

6. Step 4：定位根因
• 继续按步骤简化后，确认问题出现在包含 React Router 的布局结构中。
• 发现旧版 ScrollRestoration 在动作 (action) 触发重验证时被误调用，导致对正在进行的 scrollIntoView 干扰。
• 更新或移除旧逻辑即可修复。

7. 方法论总结
• bug 调试的精髓是“跟踪与约简”：始终保持一个仍可复现的最小案例。
• 当推测与理论全部无效时，逐步删减代码仍是通用、可靠的终极方法。
• 旧版依赖和运行环境不一致也可能制造隐藏问题。

overreacted.io

How to Fix Any Bug — overreacted

The joys of vibecoding.

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。项目定位更像是作者的“个人实验室”，供开发者参考与取用，而非正式社区驱动的开源产品。