#tools #前端 #组件库 #react
一个能够根据 React 组件实际 DOM 结构自动生成像素级精确骨架屏（Shimmer Skeleton）的工具库，原理是运行时自动分析组件 DOM。
darula-hpp/shimmer-from-structure

AI 摘要：该项目解决了前端开发中需要手动维护两套代码（业务组件与骨架屏组件）的痛点。通过在运行时（Runtime）分析真实组件的 DOM 结构，shimmer-from-structure 能够自动测量元素尺寸、获取 CSS 圆角属性，并生成与之完美契合的扫光动画效果。它支持动态数据注入、全局配置（Context API）、以及与 React Suspense 的无缝集成，极大地降低了 UI 加载态的维护成本。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 核心价值与功能特性
• 自动适配结构：无需预定义骨架屏，运行时自动分析组件 DOM。
• 零维护成本：组件布局改变时，骨架屏自动更新，无需手动同步。
• 像素级精确：通过测量实际元素尺寸生成占位块。
• 样式自动提取：自动检测 CSS 中的 border-radius（圆角），确保头像等圆形元素正确显示。
• 感知优化：加载时保留容器背景色和边框，仅对文本和图片内容进行遮盖。

2. 使用模式与 API
• 静态内容包裹：简单的组件直接使用 <Shimmer loading={true}> 包裹即可。
• 动态数据支持：通过 templateProps 属性注入模拟数据，使组件在无真实数据时也能撑开正确的布局结构。
• Suspense 集成：可直接作为 Suspense 的 fallback，利用 React 的生命周期自动处理挂载与卸载。
• 全局配置：提供 ShimmerProvider，允许在应用顶层统一配置扫光颜色、背景色及动画时长等

3. 技术实现原理
• DOM 测量：利用 useLayoutEffect 同步测量所有叶子元素的 getBoundingClientRect()。
• 属性捕获：通过原生 API 获取计算后的 CSS 样式，确保骨架块与原元素形状一致。
• 动画注入：基于测量数据创建绝对定位的扫光层，并应用线性渐变动画。
• 透明处理：加载状态下将真实内容的 color 设为 transparent，从而隐藏文字但保留容器布局。

4. 最佳实践与局限性
• 细粒度控制：建议为不同的业务模块分别包裹 Shimmer，以实现独立的加载状态。
• 性能建议：尽量保持 templateProps 简单，避免在测量阶段进行复杂逻辑运算。
• 已知限制：无法深入捕获 SVG 内部的路径形状；对于异步渲染（如某些 Canvas 图表）需要显式指定容器高度。

author darula-hpp

GitHub

GitHub - darula-hpp/shimmer-from-structure: Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component…

Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy. - darula-hpp/shimmer-from-structure

#优质博文 #React #前端
useOptimistic Won't Save You：深入探讨 React 19 的 useOptimistic hook，说明其必须结合 Transition 和 Action 状态管理才能真正处理复杂的竞态条件。
作者最后建议，这些复杂的底层 API 更多是为框架开发者设计的，普通开发者应倾向于使用成熟框架提供的抽象。

AI 摘要：本文分析了在 React 中实现乐观 UI (Optimistic UI) 的演进过程。作者通过对比传统的手动状态管理、使用 useRef 处理竞态条件，以及 React 19 的 useOptimistic 钩子，指出单纯使用该钩子并不能自动解决所有问题。要完美处理并发、竞态条件和错误回滚，开发者需要深入理解并发 React (Concurrent React) 的过渡、动作 (Actions) 以及 useActionState 等底层机制。作者最后建议，这些复杂的底层 API 更多是为框架开发者设计的，普通开发者应倾向于使用成熟框架提供的抽象。

author Colum

Columkelly

useOptimistic Won't Save You

Thoughts on the useOptimistic hook that was introduced in React 19

#优质博文 #React #性能优化 #JavaScript #course
How to Measure and Optimize React Performance | DebugBear：全面介绍了衡量和优化 React 应用性能的工具与技术，重点讲解了 React 19.2 的新特性以及各类运行时和构建时的优化策略。

AI 摘要：文章深入探讨了如何应对 React 应用随规模增长而出现的性能退化问题。内容涵盖了从 React 19.2 新引入的性能轨道（Performance Tracks）到经典的 Profiler 工具的使用方法。作者详细讲解了运行时优化（如记忆化、虚拟列表和状态管理）、并发特性（useTransition 和 useDeferredValue）、包体积控制、服务端渲染（SSR）以及最新的 React Compiler。最后，文章强调了在生产环境中使用真实用户监控（RUM）来持续跟踪性能表现的重要性。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 衡量 React 性能的工具
• React 性能轨道 (React Performance Tracks)：介绍了 React 19.2 引入的新功能，在 Chrome DevTools 的性能面板中可视化调度器、组件渲染及服务器请求。
• React DevTools Profiler：讲解了如何使用火焰图（Flame Chart）定位瓶颈，并利用“记录组件渲染原因”功能排除不必要的重绘。
• Profiler API 与 Chrome 性能面板：介绍如何通过代码编程式地收集渲染时长，以及如何在主线程时间线中分析 JavaScript 的执行耗时。

2. 运行时优化策略
• 记忆化：详细对比了 memo()、 useMemo() 和 useCallback() 的使用场景，强调避免对简单计算过度使用。
• 代码分割：利用 lazy() 和 Suspense 实现组件按需加载，减少初始加载负担。
• 列表虚拟化：推荐使用 react-window 等库处理长列表，仅渲染可视区域内的 DOM 节点。
• 状态管理优化：提倡状态共存（State Colocation）原则，并建议在复杂场景下使用 Zustand 或 Jotai 等支持选择器优化的轻量库。

3. 并发特性与编译器
• 并发渲染挂钩 (Concurrency Hooks)：讲解了 useTransition 如何标记非紧急更新以保持 UI 响应，以及 useDeferredValue 如何延迟处理从父级传递的频繁变动的值。
• React Compiler：介绍了 2025 年推出的自动记忆化工具，它能在构建时自动优化组件，减少手动编写 useMemo 的需求。

4. 交付与架构优化
• 包体积控制：使用 Lighthouse Treemap 和 Webpack Bundle Analyzer 分析依赖，提倡按需引入（Tree Shaking）以减少解析耗时。
• 服务端渲染与流式传输 (SSR & Streaming)：探讨了 renderToPipeableStream 带来的流式 HTML 交付，以及 React 服务端组件（RSC）如何通过零客户端 JavaScript 提升性能。

Debugbear

How to Measure and Optimize React Performance | DebugBear

Learn how to measure the performance of your React app and identify what's slowing it down.

#优质博文 #React #LLM #前端 #AI #逆向工程
How to Steal Any React Component

网页做的还挺有趣的，介绍如何使用 React 的内部数据结构（通过 Fiber）和 LLM 来重建生产 React 应用程序中的组件，而无需原始源代码。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 核心原理：理解浏览器中的两棵树
• DOM 树：浏览器渲染的 HTML 结构，可以通过开发者工具查看。
• React Fiber 树：React 维护的内部结构，记录了组件层次、属性 (Props) 和状态 (State)。
• 切入点：从 React 16 开始，React 将 Fiber 节点挂载在 DOM 元素上，通过遍历 DOM 即可获取组件的内部信息。

2. 数据采集：建立属性与输出的映射
• 组件归类：利用 Fiber 节点的 type 属性（内存引用）识别相同类型的组件。
• 样本收集：记录同一个组件在不同 Props 下产生的不同 HTML 输出，为 LLM 提供训练样本。
• 获取源码线索：通过 type.toString() 提取混淆后的源代码，辅助 LLM 理解业务逻辑。

3. 组件重建：LLM 与自动化验证
• LLM 提示词：向模型提供 Props 示例、HTML 输出和压缩后的源码，要求其写出干净的 React 代码。
• 验证循环 (Verification Loop)：自动渲染 LLM 生成的组件，对比其 HTML 输出与原站点的差异，并根据 Diff 反馈给 LLM 进行修复。

4. 组装策略：拓扑排序与局限性
• 拓扑排序 (Topological Sort)：根据依赖关系，先还原最底层的叶子组件（如 Button、Avatar），再逐步向上还原复杂的父组件（如 LoginForm）。
• 处理失效情况：针对 JS 动画导致的 DOM 状态不匹配或复杂的内部交互状态，如果 LLM 无法还原，则退而求其次使用 HTML 快照 (Snapshot)。
• 最终集成：将还原的组件与 CSS、静态资源 (Assets) 整合，构建出功能完整的 React 项目

fant.io

How to Steal Any React Component

Steal any component from a production React website without source code - using React Fiber and LLMs to reconstruct working components.

#AI #React #前端 #性能优化
vercel 开源了他们写 react 以及各种情况下的用到的 skill（
通过 npx add-skill vercel-labs/agent-skills 安装

vercel-labs/agent-skills

AI 摘要：vercel-labs/agent-skills 是一个 GitHub 仓库，汇集了专为 AI 编程代理（AI Coding Agents）设计的“技能”（Skills）。这些技能通过预打包的指令和脚本，增强了代理在代码开发、审查和部署方面的能力。目前包含 react-best-practices（专注于 React/Next.js 性能优化）、web-design-guidelines（审查 UI 代码的无障碍性、性能和用户体验）以及 vercel-deploy-claimable（快速将应用部署到 Vercel）等核心技能。通过简单的命令行安装后，AI 代理可自动识别并利用这些技能来完成相关任务，极大地提升了自动化开发和部署的效率。

GitHub

GitHub - vercel-labs/agent-skills: Vercel's official collection of agent skills

Vercel's official collection of agent skills. Contribute to vercel-labs/agent-skills development by creating an account on GitHub.

#优质博文 #前端 #AI #React #debug
AI 无意中在应用程序中引入了一个隐藏的、导致浏览器崩溃的无限 React 组件树，而 React 19 的 <Activity> 组件则巧妙地掩盖了这个问题。
AI 编码代理如何隐藏了应用程序中的定时炸弹

AI 摘要：本文讲述了作者在使用 AI 编码代理开发 Outlyne（一个 AI 驱动的网站构建器）过程中，遭遇的一个由 AI 代理错误删除注释后引发的隐藏 bug。该 bug 导致应用程序中出现了无限的 React 组件递归渲染，并通过 React 19 的 <Activity> 组件巧妙地隐藏起来，直到用户浏览器因内存耗尽而崩溃。作者通过深入调试，最终找到了问题的根源，并强调了将关键代码约束（structural invariants）转化为自动化测试的重要性，而非仅仅依赖注释。

author Andrew Patton

acusti.ca

How AI Coding Agents Hid a Timebomb in Our App | acusti.ca

#博客更新 #git #react
汇总了一下开发过程中遇到的各种命令之类的，供自己参考！
Fork 主题如何更新？基于 Ink 构建主题更新 CLI 工具

cos

Fork 主题如何更新？基于 Ink 构建主题更新 CLI 工具 | 工具 | 余弦の博客

本文图表、伪代码等由 AI 辅助编写 当你 fork 了一个开源项目作为自己的博客主题，如何优雅地从上游仓库同步更新？手动敲一串 Git 命令既繁琐又容易出错；但直接点 Fork 的 Sync 按钮，又可能覆盖你的自定义配置和内容。 很多人...

#优质博文 #React #前端 #性能优化 #异步编程 #course
讲了怎么使用 TanStack Pacer 来管理前端应用中的异步事件时序，以优化性能并避免 RxJS 的复杂性。
Moving beyond RxJS: A guide to TanStack Pacer - LogRocket Blog

AI 摘要：TanStack Pacer 是一个专为前端应用设计的轻量级库，旨在解决常见的异步事件时序问题，例如防抖、节流、批处理和速率限制。文章通过构建一个类似 Pinterest 的无限滚动图片画廊，详细展示了如何在 React 应用中集成并使用 Pacer 的核心功能，以优化用户界面性能并避免 RxJS 带来的复杂性，从而提供了一个更易学、更小巧、更符合 React 生态的解决方案。

author Emmanuel John

LogRocket Blog

Moving beyond RxJS: A guide to TanStack Pacer - LogRocket Blog

Build a React infinite scroll gallery with TanStack Pacer. Learn debouncing, throttling, batching, and rate limiting without RxJS complexity.

#优质博文 #React #前端 #新动态
Waku 1.0 (alpha) — Waku

AI 摘要：Waku 是一个专注于静态与动态混合渲染的 React 框架，现已发布 1.0-alpha 版本并标记公共 API 为稳定状态。该框架特别适合构建营销网站、博客、文档站和轻量级电商等大部分静态内容但包含少量动态路由的场景。Waku 提供灵活的路由配置方式（文件路由和配置路由），支持在布局、切片和页面级别独立设置渲染配置，可实现静态渲染、动态渲染或混合渲染。团队后续将专注于 bug 修复和兼容性改进，并为每个版本提供发布说明和迁移指南。

Waku

Waku 1.0 (alpha) — Waku

Waku's public APIs are now marked as stable.

#优质博文 #AI #前端 #React #调试
How AI Coding Agents Hid a Timebomb in Our App

AI 摘要： 作者分享了他们在开发 Outlyne 这款 AI 驱动的网站构建器时遇到的一个诡异 Bug：一个由 AI 编程助手（AI Coding Agent）删除的代码注释，导致一个关键的 readOnly 属性被移除，进而引发了 React 组件的无限递归渲染。更糟的是，React 19 的 <Activity> 组件将这个 Bug 隐藏了起来，使其在数分钟内都不会崩溃，极大增加了调试难度。作者通过痛苦的调试过程，最终发现罪魁祸首是 AI 删除了注释，以及自己没有为关键的结构性约束编写测试。文章强调了在 AI 辅助开发背景下，测试而非注释，才是确保代码质量和安全的关键。

以下是方便搜索索引的大纲(AI 生成)，请读原文

1. Bug 的出现与表现
• 应用程序崩溃：用户在使用应用时，浏览器会无故冻结并崩溃。
• 内存无限增长：后台一个无限递归的 React 组件树在内存中不断增长，最终耗尽内存。
• React 19 的 <Activity> 组件掩盖了问题：新引入的 <Activity> 组件在关闭状态下会以低优先级模式渲染隐藏的 UI，导致无限递归的组件树在后台缓慢构建，而前端页面保持响应，延迟了 Bug 的暴露时间。
2. 问题根源：AI 编程助手与被删除的注释
• Outlyne 的组件架构：页面组件包含头部（header）和底部（footer），它们渲染了自身的变体（variants）作为预览，这本身就是递归的。为了避免无限递归，预览组件设置了 readOnly={true} 属性。
• 重要的安全注释：作者曾添加注释警告，如果 readOnly 属性为 false 会导致无限递归。
• AI 编程助手的操作：在一次重构中，AI 编程助手删除了这个关键注释，可能是出于“清理”目的。
• readOnly 属性被移除：在后续的更新中，由于缺乏注释的上下文，AI 编程助手移除了 readOnly 属性，导致了无限递归的发生。
3. 艰难的调试过程
• 难以复现：Bug 不会立即崩溃，使得调查非常困难，应用在几分钟后才会崩溃。
• 虚假线索：Chrome 调试器显示问题出在 Motion 库中，作者花费数天时间调查，但发现 Motion 只是受害者。
• 关键突破：通过检查内存溢出时的调用栈，发现了与页脚编辑器相关的 layoutId，并最终通过移除 <Activity> 组件，使 Bug 立即暴露，确认了问题所在。
4. 经验教训与启示
• 注释与测试：注释是文档，而测试是约束。在 AI 辅助的代码库中，仅仅依靠注释不足以保证关键结构性约束。
• AI 辅助开发带来的挑战：AI 编程助手能够提高生产力，但它们也会无意中移除关键信息，这要求开发者重新思考“足够好”的代码标准。
• 重要的结构性约束需要测试：文章强调，任何可能导致应用崩溃或违反结构性不变性的地方，都应该编写测试来强制执行，而不是仅仅依靠注释。
• 示例测试代码：作者提供了一段简单的测试代码，说明如何用大约 20 行代码来断言 readOnly 属性的正确性，从而避免了整个 Bug。

author Andrew Patton

acusti.ca

How AI Coding Agents Hid a Timebomb in Our App | acusti.ca

#优质博文 #前端 #react #工程化
React Compiler 的静默失败 (以及如何修复它们)

AI 摘要：作者分享了在使用 React Compiler 过程中遇到的“静默失败”问题，即编译器在无法优化组件时不会报错，而是回退到标准 React 行为，这可能导致性能下降。为了解决这个问题，作者发现并利用了一个未文档化的 ESLint 规则 `react-hooks/todo`，通过将其设置为错误级别，可以在编译失败时中断构建过程。

author Andrew Patton

acusti.ca

React Compiler’s Silent Failures (And How to Fix Them) | acusti.ca

#优质博文 #React #TypeScript #前端 #course
How to type React children correctly in TypeScript

AI 摘要：本文深入探讨了在 React 应用中如何正确使用 TypeScript 定义 children prop 的类型。文章首先介绍了 children prop 的基本用法和支持的各种内容类型，并强调了避免手动定义复杂 children 类型的必要性。随后，详细讲解了 ReactNode 超集类型、PropsWithChildren 和 React.ComponentProps 等实用工具类型，以及 ReactElement 和 JSX.Element 等具体类型的使用场景。文章还特别提到了 React 18/19 版本中关于 React.FC 和 children 类型定义的最新变化，建议显式定义 children prop，并展示了如何安全地处理 refs 和构建包装组件（wrapper components）。通过学习这些方法，开发者可以更有效地在 TypeScript 中管理 React 组件的 children prop，提升代码的类型安全性和可维护性。

以下是方便搜索索引的大纲(AI 生成)，请读原文：

1. children prop 基础
• JSX 中的 children ：解释 children prop 是如何接收并操作 JSX 表达式中标签之间的内容的。
• 支持的 children 类型：列举了 children prop 可以接受的常见内容类型，包括字符串（Strings）、JSX 元素、JavaScript 表达式（JavaScript expressions）和函数（Functions）。
• 避免手动定义复杂 children 类型：指出手动为 children 定义类型容易遗漏，推荐使用官方支持的类型。

2. children prop 的类型定义方法
• ReactNode 超集类型：介绍 ReactNode 是包含 React 所有可渲染值的超集类型，是定义 children 类型时的首选，并详细解释了 ReactNode 的内部定义。
• PropsWithChildren 类型：讲解 PropsWithChildren 如何方便地为现有 props 添加 children prop，避免手动定义。
• React.ComponentProps 类型：说明 ComponentProps 如何提取现有组件的 props 类型，尤其适用于构建可复用组件和 UI 库。
• React.ReactElement 类型：介绍 ReactElement 作为 ReactNode 的子集，在特定场景下如何用于定义 children prop。
• JSX.Element 类型：说明 JSX.Element 如何作为 children prop 的类型，并指出它只代表单个 React 元素且不包含假值。
• 类组件的 Component 类型：演示在类组件中如何使用 React.Component 定义 children prop，并说明 children 默认是可选的。

3. React 18/19 中 children prop 类型定义的最新变化
• 不再推荐使用 React.FC / FunctionComponent ：解释了 React.FC 因不再自动包含 children prop 而不再被推荐，并倡导显式定义 children。
• 在 TypeScript 中将组件作为 props 传递：展示了如何在不依赖 React.FC 的情况下，安全地将组件作为 props 传递并保持完整的类型安全。
• React 19 中 Refs 和 forwardRef ：比较了 React 18 及更早版本与 React 19 中处理 refs 和 children prop 时的类型定义方式的变化。

4. TypeScript 中的包装组件（Wrapper Components）
• 包装组件在类型安全方面的优势：通过一个待办事项应用示例，展示了包装组件如何通过定义接口来增强类型安全，并在编译时捕获类型错误。
• 处理复杂数据结构：说明 TypeScript 如何确保在组件间传递复杂数据结构时，所有必需属性都存在且类型正确。

author Ohans Emmanuel

LogRocket Blog

How to type React children correctly in TypeScript - LogRocket Blog

Learn best practices for typing React children in TypeScript, including ReactNode, PropsWithChildren, ComponentProps, and why React.FC is no longer recommended.

#优质博文 #CSS #React #RSC #前端 #tools
工具：https://rscexplorer.dev/
开源在：https://github.com/gaearon/rscexplorer
文章：Introducing RSC Explorer

AI 摘要：本文介绍了 Dan Abramov 发布的新工具 RSC Explorer，旨在帮助开发者直观理解 React Server Components (RSC) 的底层工作原理。由于最近 React Server Components 披露了一个严重的安全漏洞，RSC 协议引起了广泛关注。RSC Explorer 是一个开源的单页应用，通过模拟 RSC 协议的读写过程，展示了数据流、代码传输、流式渲染、服务器操作以及无框架路由刷新等核心概念，让开发者能够“所见即所得”地学习 RSC。

author Dan Abramov

GitHub

GitHub - gaearon/rscexplorer: A tool for people curious about the React Server Components protocol

A tool for people curious about the React Server Components protocol - gaearon/rscexplorer

#优质博文 #React #前端 #course
Do's and Don'ts of useEffectEvent in React

AI 摘要：useEffectEvent 是 React 新增的 Hook，用来在 Effect 中获取最新的 props / state 而不触发 Effect 重新执行。它通过保持函数引用稳定，解决了“依赖列表必须包含所有变量”导致的频繁重渲染问题。文章列举了它的使用场景、可做与不可做的细节，以及最佳实践和迁移建议，帮助开发者在合适的场景安全使用该特性。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 什么是 useEffectEvent
• 介绍了 useEffectEvent 的核心概念：创建一个始终读取最新值的稳定函数引用
• 说明它如何在不触发 Effect 重跑的情况下访问最新的 props / state

2. 解决的问题
• 通过聊天应用示例，展示传统写法需把所有变量加入依赖导致不必要的重跑
• 对比使用 useEffectEvent 后，仅在真正需要的依赖（如 roomId）变化时才重新执行 Effect

3. Do's 与 Don'ts
• ✅ Do：在 Effect 内直接调用、用于读取最新值、用于需要 Effect 上下文的事件处理、分离响应式与非响应式逻辑、同步调用
• ❌ Don't：在普通 UI 事件处理器中使用、在渲染阶段调用、作为 props 传递、异步或延时调用、替代正常的 memoization

4. 详细示例
• ✅ 正确：在 Effect 中抽离非响应式逻辑（如主题变化）保持连接仅在 roomId 改变时重建
• ❌ 错误：在按钮点击等普通事件中使用 useEffectEvent，建议使用普通函数或 useCallback
• ✅ 正确：在定时器或轮询中读取最新的回调函数（如 onTick）
• ❌ 错误：在异步 fetch 回调中调用 useEffectEvent，可能在组件卸载后仍被调用
• ✅ 正确：在清理函数中也可使用 useEffectEvent 记录页面退出事件
• ❌ 错误：把 useEffectEvent 作为其他 Hook（如 useMemo）的依赖，破坏其稳定性

5. 常见使用场景
• 日志与分析：在路径变化时记录页面访问，内部使用最新的主题、语言、用户 ID 等信息
• 第三方回调：向消息服务订阅回调，回调内部使用最新的用户偏好而无需重新订阅
• 防抖实现：在防抖定时器中使用最新的搜索参数和过滤条件

6. 最佳实践
• 只在确实需要读取非响应式值时使用
• 考虑逻辑是否应该放在 Effect 之外的普通事件处理器里
• 保持 Event 函数单一职责，写清使用原因以便维护
• 等待 stable 版本发布再用于生产环境

7. 迁移路径
• 对比使用 useCallback 并频繁更改依赖或通过 eslint-disable 抑制警告的情形，说明 useEffectEvent 可作为更清晰的替代方案
• 建议先重构组件逻辑，确认是否真的需要该 Hook

author Slicker

slicker.me

Do's and Don'ts of useEffectEvent in React

#前端 #安全 #新动态 #React
React 在研究 React2Shell 过程中披露了两个新的 RSC 漏洞：CVE‑2025‑55184 与 CVE‑2025‑67779（高危 - 拒绝服务）以及 CVE‑2025‑55183（中危 - 源代码泄露）。这些缺陷可被恶意 HTTP 请求触发，导致服务器无限循环或泄露服务器函数内部代码。React 已在 19.0.3、19.1.4、19.2.3 版本中修复，受影响的框架与打包器（如 Next、React‑Router、Vite 等）亦需同步升级。

• 拒绝服务（高危）： CVE-2025-55184 与 CVE-2025-67779 (CVSS 7.5) 可被恶意 HTTP 请求触发，导致服务器无限循环
• 源代码暴露（中等）： CVE-2025-55183 (CVSS 5.3) 可能会泄露服务器函数内部代码，源代码中硬编码的 secret 可能会被暴露，运行时 secret 如 process.env.SECRET不受影响。

官方解释称：

重大漏洞披露后，往往会发现后续漏洞。当一个重大漏洞被披露后，研究人员会仔细检查相邻的代码路径，寻找变种的利用技术，以测试初始缓解措施是否可以被绕过。
这种模式在整个行业中普遍存在。例如，在 Log4Shell 之后，随着社区对原始修复程序的审查，又报告了其他 CVE。额外的披露可能会令人沮丧，但这通常是健康应对机制的标志。

只有源代码中的 secret 才能被泄露。
源代码中硬编码的 secret 可能会被暴露，但运行时 secret 如 process.env.SECRET不受影响。
暴露代码的范围仅限于服务器函数内部的代码，这可能包括其他功能，具体取决于捆绑器提供的内联支持程度。
一定要核对生产包。

https://nextjs.org/blog/security-update-2025-12-11

Next 用户可以使用 npx fix-react2shell-next 进行升级。

react.dev

Denial of Service and Source Code Exposure in React Server Components – React

The library for web and native user interfaces

#安全 #碎碎念 #react
React 这个 CVE……影响范围比我想的还大得多，自建的 umami 服务今天突然发现 504 了才想起来，沃日，它是 Nextjs 写的啊！！！！

虽然是在 docker 里跑的并且炸的是我一个不常用的服务器，最大的损失是 CPU 占用率突然飙到 100% 了一段时间，统计数据丢了不少。

随便找了一篇博客：
安全漏洞核弹|又一个CVSS10.0满分的安全漏洞爆发｜我的服务被攻击了，拆解攻击过程

#优质博文 #React #SSR #ISR #前端 #工程化 #构建系统
Build your own web framework - Vercel

AI 摘要：本文由 Vercel 的 Lydia Hallie 撰写，介绍如何利用 Vercel 的 Build Output API 构建一个基于 React 的简易 Web 框架，支持静态渲染（Static Rendering）、增量静态再生（Incremental Static Regeneration, ISR）、服务端渲染（Server-Side Rendering, SSR）、边缘函数（Edge Functions）和自动图片优化等功能。文章不仅讲解框架涉及的文件结构和构建流程，还展示如何将每种渲染模式映射为 Vercel 可识别的输出，从而部署到无服务器（Serverless）和 Edge 环境。虽然该示例为教学版，但完整演示了现代框架实现高性能与可扩展架构的关键思路。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 框架目标与核心组件
• 通过 Vercel Build Output API 构建自定义 Web 框架
• 实现静态页面、增量渲染、服务端渲染、边缘渲染和图片优化等现代框架功能
• 所有页面位于 pages/ 目录，并根据配置选择不同渲染策略（static、ssr、prerender 或 edge）

2. 页面设计与优化策略
• Landing Page：通过图片优化与 Edge 缓存提升首页首字节时间（TTFB）
• Products Page：结合静态与动态渲染，利用 ISR 实现自动再生更新
• Popular Page：借助 Edge Functions 根据用户地理位置实现个性化推荐

3. 框架实现细节
• Static Rendering：
• 使用 ReactDOMServer.renderToString 将组件预渲染为 HTML
• 输出文件结构至 .vercel/output/static，生成可 Hydrate 的 JS 包
• Incremental Static Regeneration (ISR)：
• 创建 .func 文件夹与 prerender-config.json 配置缓存过期与再生逻辑
• 增设 fallback HTML 提供渐进体验
• Serverless Functions：
• 每个动态页生成一个 Lambda（serverless）函数，用于按需（re）生成页面
• 利用 .vc-config.json 定义运行时、入口点与上下文
• Edge Server Rendering：
• 在 Edge Runtime 中使用 React 进行服务端渲染
• 动态注入 req 对象以生成个性化内容

4. 自动图片优化（Automatic Image Optimization）
• 自定义 Image 组件，将图片请求代理至 /_vercel/image
• 基于 vercel.config.js 生成 .vercel/output/config.json，统一图片格式（webp/avif）、域名和缓存策略

5. 构建与输出过程（Build Output）
• 遍历所有页面并执行对应的渲染方法
• 拷贝静态资源至 .vercel/output/static
• 自动创建 .vercel/output/config.json 配置文件
• 构建完成后可直接通过 Vercel 部署，享受边缘分发与函数服务

6. 结论
• 框架可作为理解现代渲染机制与 Vercel 部署架构的参考
• 虽非生产版本，但展示了现代框架（如 Next.js）背后的核心逻辑
• 适合框架作者或独立开发者应用 Vercel 的核心特性进行自研集成

author Lydia Hallie
via @hyoban 投稿

Vercel

Build your own web framework - Vercel

Build your own web framework that deploys to edge and serverless infrastructure.

cosine - 前端人の日常频道

#优质博文 #React #安全 #RSC #前端 这就是 R！S！C！（逃 叠甲：任何东西都会有漏洞的啦只是想吐槽一下再说我们也没用 RSC 连服务器组件都没用没影响的没影响的。 Critical Security Vulnerability in React Server Components – React AI 摘要：React 官方披露了一个在 React Server Components (RSC) 中的严重远程代码执行漏洞（CVE-2025-55182），影响多个版本的 react-server…

#优质博文 #前端 #React #安全 #RCE #POC
CVE-2025-55182 React Server Components RCE POC

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

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

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 的反序列化安全校验
• 建议暂时限制相关功能或升级框架版本

Source

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.

#优质博文 #React #安全 #RSC #前端
这就是 R！S！C！（逃
叠甲：任何东西都会有漏洞的啦只是想吐槽一下再说我们也没用 RSC 连服务器组件都没用没影响的没影响的。
Critical Security Vulnerability in React Server Components – React

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

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

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 的发现、报告及协助修复贡献。

author The React Team

react.dev

Critical Security Vulnerability in React Server Components – React

The library for web and native user interfaces

#优质博文 #React #前端
好文
React has changed, your Hooks should too

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

[以下是方便搜索索引的大纲（AI 生成），请读原文]

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 是这种转变的核心载体。

author Matt Smith

Allthingssmitty

React has changed, your Hooks should too - Matt Smith

Modern React has moved beyond overusing useEffect. Discover the Hook patterns that enable cleaner logic, fewer bugs, and scalable architecture in 2026.