Now vibe coding, so learning hammer FE ?
《为什么我放弃Next.js和RSC，回归传统SPA与独立后端》
标签：#前端 #Web开发 #React #NextJS #React_Server_Components #SPA #架构设计 #安全 #TanStack #Hono
总结：
作者回顾了自己从Next.js忠实用户到拥抱App Router/RSC，最终回归传统SPA+独立后端的完整历程。文章深入分析了RSC架构带来的心智负担、序列化开销和安全风险，结合2025-2026年多起严重CVE漏洞，论证了将渲染框架与安全边界解耦的必要性，并分享了当前基于React Router+Vite+Hono的简洁技术栈。
文章要点：
1. Next.js的黄金时代：Pages Router时期心智模型清晰，服务端/客户端边界一目了然，文件路由简单易懂，部署零成本
2. App Router带来的混乱：Server/Client Component区分成为负担，"use client"指令传染性强，开发/构建/生产环境缓存行为不一致，服务端客户端边界变得不可见
3. 安全漏洞敲响警钟：2025年CVE-2025-29927中间件绕过(CVSS 9.1)、2025年底RSC核心包10分满分漏洞CVE-2025-55182、2026年初多起Server Function DoS漏洞，攻击面集中在服务端渲染和反序列化环节
4. TanStack并非避风港：2026年5月TanStack遭遇供应链攻击，42个包被投毒，说明换框架不能免疫风险，减少依赖面才是关键
5. 序列化是根本原因：RSC的"无缝"本质是分布式系统的序列化问题，函数、类实例、错误栈都无法透明穿越边界，反序列化不可信输入成为高危攻击面
6. 当前架构选择：React Router框架模式+Vite纯SPA（仅营销页预渲染）+ Hono独立后端，API通过显式HTTP调用，无RSC负载，无服务端序列化
7. 安全设计原则：认证授权在API层强制执行，前端中间件只做UX跳转，CORS/CSRF/验证码/限流全部在可控的后端实现，与渲染框架彻底解耦
8. 核心收获：架构清晰可指认、无序列化税、前端攻击面趋近于零、后端语言自由选型、依赖更少爆炸半径更小——"无聊"在软件工程里是赞美
URL：https://dev.to/zulikram/why-i-walked-back-from-nextjs-and-rsc-to-a-plain-spa-and-a-separate-backend-4k8p
标签：#前端 #Web开发 #React #NextJS #React_Server_Components #SPA #架构设计 #安全 #TanStack #Hono
总结：
作者回顾了自己从Next.js忠实用户到拥抱App Router/RSC，最终回归传统SPA+独立后端的完整历程。文章深入分析了RSC架构带来的心智负担、序列化开销和安全风险，结合2025-2026年多起严重CVE漏洞，论证了将渲染框架与安全边界解耦的必要性，并分享了当前基于React Router+Vite+Hono的简洁技术栈。
文章要点：
1. Next.js的黄金时代：Pages Router时期心智模型清晰，服务端/客户端边界一目了然，文件路由简单易懂，部署零成本
2. App Router带来的混乱：Server/Client Component区分成为负担，"use client"指令传染性强，开发/构建/生产环境缓存行为不一致，服务端客户端边界变得不可见
3. 安全漏洞敲响警钟：2025年CVE-2025-29927中间件绕过(CVSS 9.1)、2025年底RSC核心包10分满分漏洞CVE-2025-55182、2026年初多起Server Function DoS漏洞，攻击面集中在服务端渲染和反序列化环节
4. TanStack并非避风港：2026年5月TanStack遭遇供应链攻击，42个包被投毒，说明换框架不能免疫风险，减少依赖面才是关键
5. 序列化是根本原因：RSC的"无缝"本质是分布式系统的序列化问题，函数、类实例、错误栈都无法透明穿越边界，反序列化不可信输入成为高危攻击面
6. 当前架构选择：React Router框架模式+Vite纯SPA（仅营销页预渲染）+ Hono独立后端，API通过显式HTTP调用，无RSC负载，无服务端序列化
7. 安全设计原则：认证授权在API层强制执行，前端中间件只做UX跳转，CORS/CSRF/验证码/限流全部在可控的后端实现，与渲染框架彻底解耦
8. 核心收获：架构清晰可指认、无序列化税、前端攻击面趋近于零、后端语言自由选型、依赖更少爆炸半径更小——"无聊"在软件工程里是赞美
URL：https://dev.to/zulikram/why-i-walked-back-from-nextjs-and-rsc-to-a-plain-spa-and-a-separate-backend-4k8p
《TanStack Router 与 Query 的最佳实践》
标签：#前端 #React #TanStackQuery #TanStackRouter #数据获取 #SSR
总结：
本文详解了 TanStack Router 与 TanStack Query 的集成方案，核心思路是将 Router 的 Loader 视为"预取触发器"，让 Query 接管全局缓存。通过关闭 Router 内置缓存、在 Loader 中预取 Query、组件中使用 useSuspenseQuery 或 useQuery 的组合策略，实现数据尽早获取、避免请求瀑布，同时兼容 SSR 流式渲染。作者强调始终使用 Query Hooks 而非 useLoaderData 获取数据，以维持自动重取、缓存失效和垃圾回收的正常运作。
文章要点：
1. Router 自带缓存仅限单路由，Query 缓存全局可跨路由共享，更适合多路由共用数据场景
2. 在 Loader 中预取 Query 能让请求在组件渲染前甚至 JS 加载前就开始，配合 prefetch:'intent' 还能实现悬停预加载
3. 关闭 Router 缓存（defaultPreloadStaleTime: 0）避免与 Query 缓存冲突，让 Query 独掌缓存策略
4. 推荐用 useSuspenseQuery 配合 Router 的默认 Error/Pending 边界，组件只需专注"阳光路径"
5. Loader 中不 await 更灵活：useSuspenseQuery 实现阻塞加载，useQuery 实现延迟加载，由组件自主决定
6. SSR 场景下 useSuspenseQuery 更友好，支持流式渐进渲染；useQuery 需在 Loader 中 await 否则服务端无 markup
7. 切勿用 useLoaderData 替代 Query Hooks，否则会导致自动重取、失效刷新和垃圾回收全部失效
8. 将 Loader 视为"事件处理器"——只负责触发预取、不返回数据，是渐进优化性能的好心智模型
URL：https://tkdodo.eu/blog/tan-stack-router-and-query
标签：#前端 #React #TanStackQuery #TanStackRouter #数据获取 #SSR
总结：
本文详解了 TanStack Router 与 TanStack Query 的集成方案，核心思路是将 Router 的 Loader 视为"预取触发器"，让 Query 接管全局缓存。通过关闭 Router 内置缓存、在 Loader 中预取 Query、组件中使用 useSuspenseQuery 或 useQuery 的组合策略，实现数据尽早获取、避免请求瀑布，同时兼容 SSR 流式渲染。作者强调始终使用 Query Hooks 而非 useLoaderData 获取数据，以维持自动重取、缓存失效和垃圾回收的正常运作。
文章要点：
1. Router 自带缓存仅限单路由，Query 缓存全局可跨路由共享，更适合多路由共用数据场景
2. 在 Loader 中预取 Query 能让请求在组件渲染前甚至 JS 加载前就开始，配合 prefetch:'intent' 还能实现悬停预加载
3. 关闭 Router 缓存（defaultPreloadStaleTime: 0）避免与 Query 缓存冲突，让 Query 独掌缓存策略
4. 推荐用 useSuspenseQuery 配合 Router 的默认 Error/Pending 边界，组件只需专注"阳光路径"
5. Loader 中不 await 更灵活：useSuspenseQuery 实现阻塞加载，useQuery 实现延迟加载，由组件自主决定
6. SSR 场景下 useSuspenseQuery 更友好，支持流式渐进渲染；useQuery 需在 Loader 中 await 否则服务端无 markup
7. 切勿用 useLoaderData 替代 Query Hooks，否则会导致自动重取、失效刷新和垃圾回收全部失效
8. 将 Loader 视为"事件处理器"——只负责触发预取、不返回数据，是渐进优化性能的好心智模型
URL：https://tkdodo.eu/blog/tan-stack-router-and-query
tkdodo.eu
TanStack Router and Query
TanStack Router has a built-in cache, so why would we need TanStack Query? There are, of course, reasons ...
《Storybook 10.4 发布》
标签：#前端 #DevTools #Storybook #React #TanStackReact #ReactNative #AIAgent #MCP
总结：
Storybook 10.4 聚焦 AI 辅助开发与团队协作提效。AI Agent 现在能自动完成复杂项目的初始化、Mock 配置、Stories 编写与测试验证；侧边栏新增变更检测过滤器，帮你秒速锁定受代码改动影响的组件；一键分享让非技术成员无需等待 PR 或 CI 就能即时查看工作进度。此外还带来 TanStack React 官方支持、React Native 隔离优化，以及实验性的 React Component Meta 分析器，组件识别率达 100%，热更新速度最高提升 81 倍。
文章要点：
1. AI 全自动配置：只需一句 Prompt，AI Agent 就能分析项目结构、生成 Storybook 配置、编写 MSW Mock 和交互测试，并自动验证渲染效果。已在 Excalidraw、Bluesky 等复杂项目验证可行。
2. 侧边栏变更检测：新增 New、Modified、Related 三种过滤器，帮你秒速锁定代码变更波及的所有 Stories，特别适合 AI 生成代码后的快速审阅。
3. 一键云端分享：点击 Share 按钮即可将当前 Storybook 发布到 Chromatic，设计师和产品经理不用等 PR 或 CI，点开链接就能直接看效果、提反馈。
4. TanStack React 官方支持：全新 @storybook/tanstack-react 包，零配置接入类型安全路由与 Server Functions，由 Storybook 与 TanStack 核心团队联合打造。
5. React Native 隔离升级：新增独立应用入口，通过环境变量自动切换，Storybook 代码与业务代码完全隔离，零配置起步且向后兼容。
6. React Component Meta 实验特性：基于 Volar 和 TS Language Server 的新一代 Docgen，组件检出率 100%，开发模式热更新比旧方案快 43 到 81 倍，为 AI 提供更精准的组件元数据。
URL：https://storybook.js.org/blog/storybook-10-4/
标签：#前端 #DevTools #Storybook #React #TanStackReact #ReactNative #AIAgent #MCP
总结：
Storybook 10.4 聚焦 AI 辅助开发与团队协作提效。AI Agent 现在能自动完成复杂项目的初始化、Mock 配置、Stories 编写与测试验证；侧边栏新增变更检测过滤器，帮你秒速锁定受代码改动影响的组件；一键分享让非技术成员无需等待 PR 或 CI 就能即时查看工作进度。此外还带来 TanStack React 官方支持、React Native 隔离优化，以及实验性的 React Component Meta 分析器，组件识别率达 100%，热更新速度最高提升 81 倍。
文章要点：
1. AI 全自动配置：只需一句 Prompt，AI Agent 就能分析项目结构、生成 Storybook 配置、编写 MSW Mock 和交互测试，并自动验证渲染效果。已在 Excalidraw、Bluesky 等复杂项目验证可行。
2. 侧边栏变更检测：新增 New、Modified、Related 三种过滤器，帮你秒速锁定代码变更波及的所有 Stories，特别适合 AI 生成代码后的快速审阅。
3. 一键云端分享：点击 Share 按钮即可将当前 Storybook 发布到 Chromatic，设计师和产品经理不用等 PR 或 CI，点开链接就能直接看效果、提反馈。
4. TanStack React 官方支持：全新 @storybook/tanstack-react 包，零配置接入类型安全路由与 Server Functions，由 Storybook 与 TanStack 核心团队联合打造。
5. React Native 隔离升级：新增独立应用入口，通过环境变量自动切换，Storybook 代码与业务代码完全隔离，零配置起步且向后兼容。
6. React Component Meta 实验特性：基于 Volar 和 TS Language Server 的新一代 Docgen，组件检出率 100%，开发模式热更新比旧方案快 43 到 81 倍，为 AI 提供更精准的组件元数据。
URL：https://storybook.js.org/blog/storybook-10-4/
Storybook Blog
Storybook 10.4
Automatic setup with agents, review filters, TanStack React, and more
《TanStack中的React服务端组件》
标签：#前端 #React_Server_Components #TanStack_Start #NextJs #Bundle_Optimization
总结：
TanStack Start实现了与Next.js截然不同的React服务端组件方案，通过显式API将组件渲染保留在服务端，避免将繁重代码发送至客户端。文章以应用外壳为例，展示RSC如何将客户端Bundle从308KB缩减至203KB，并说明其适合大型非交互式组件树的场景，同时澄清RSC并非数据加载或SSR的替代品，而是针对性的性能优化工具。
文章要点：
1. RSC是只在服务端运行的React组件，可以直接在组件里写await查数据，而且组件代码不会发送到浏览器，不用担心数据库密码暴露给前端
2. TanStack实现RSC的方式特别直白，通过renderServerComponent这类API就能显式声明，作者认为比Next.js的实现更好懂
3. 别误会，RSC不是用来替代数据加载或SSR的，TanStack的loader和原有的服务端渲染已经做得很好了，RSC真正的价值是帮浏览器"减肥"
4. 文章举了个生动的例子：故意引入整个图标库来模拟大型组件树，结果RSC把客户端JS从308KB砍到了203KB，省了不少流量
5. 更妙的是RSC还能接收客户端组件当"插槽"传进来，配合Suspense实现流式渲染，让页面边加载边呈现，体验很丝滑
6. 不过作者也提醒，RSC不是银弹，如果你的组件树不大、依赖不多，用它带来的收益可能微乎其微，得看场景取舍
URL：https://frontendmasters.com/blog/react-server-components-in-tanstack/
标签：#前端 #React_Server_Components #TanStack_Start #NextJs #Bundle_Optimization
总结：
TanStack Start实现了与Next.js截然不同的React服务端组件方案，通过显式API将组件渲染保留在服务端，避免将繁重代码发送至客户端。文章以应用外壳为例，展示RSC如何将客户端Bundle从308KB缩减至203KB，并说明其适合大型非交互式组件树的场景，同时澄清RSC并非数据加载或SSR的替代品，而是针对性的性能优化工具。
文章要点：
1. RSC是只在服务端运行的React组件，可以直接在组件里写await查数据，而且组件代码不会发送到浏览器，不用担心数据库密码暴露给前端
2. TanStack实现RSC的方式特别直白，通过renderServerComponent这类API就能显式声明，作者认为比Next.js的实现更好懂
3. 别误会，RSC不是用来替代数据加载或SSR的，TanStack的loader和原有的服务端渲染已经做得很好了，RSC真正的价值是帮浏览器"减肥"
4. 文章举了个生动的例子：故意引入整个图标库来模拟大型组件树，结果RSC把客户端JS从308KB砍到了203KB，省了不少流量
5. 更妙的是RSC还能接收客户端组件当"插槽"传进来，配合Suspense实现流式渲染，让页面边加载边呈现，体验很丝滑
6. 不过作者也提醒，RSC不是银弹，如果你的组件树不大、依赖不多，用它带来的收益可能微乎其微，得看场景取舍
URL：https://frontendmasters.com/blog/react-server-components-in-tanstack/
Frontend Masters
React Server Components in TanStack
This post is about React Server Components (or RSC) in TanStack Start. The implementation is radically different, and in my opinion, better than the RSC implementation you’ve likely seen in Next.js.
《React应用安全指南》
标签：#前端 #React #WebSecurity #XSS_Prevention #Content_Security_Policy #Server_Side_Validation
总结：
React内置的JSX自动转义机制能有效防御常见XSS攻击，但随着Server Components普及，前端开发者需承担更多安全责任。本文系统梳理了React应用的安全实践：正确使用dangerouslySetInnerHTML的消毒策略、采用HttpOnly Cookie的安全认证方案、服务端输入验证与参数化查询、以及CSP策略的纵深防御配置，帮助开发者构建多层防护体系。
文章要点：
1. React的JSX表达式会自动将
2. 一旦使用 dangerouslySetInnerHTML 这个"逃生舱"，就必须先用 DOMPurify 对HTML做彻底消毒，剥离危险标签和
3. 认证令牌千万别往 localStorage 里塞，XSS漏洞一出现令牌就会被顺走；改用 HttpOnly Cookie，配合 Secure 和 SameSite=Strict 属性，再辅以CSRF Token，才能守住登录态
4. 客户端验证只是改善体验，真正的安全防线在服务端；用 Zod 做类型安全的Schema校验，数据库查询坚持用参数化占位符（如
5. Content Security Policy 是最后一道保险，通过HTTP头限制资源加载来源，用 nonce 管理必要的内联脚本，配合 strict-dynamic 支持React代码分割，上线前记得先用 Report-Only 模式测试策略
URL：
https://certificates.dev/blog/security-in-react-applications
标签：#前端 #React #WebSecurity #XSS_Prevention #Content_Security_Policy #Server_Side_Validation
总结：
React内置的JSX自动转义机制能有效防御常见XSS攻击，但随着Server Components普及，前端开发者需承担更多安全责任。本文系统梳理了React应用的安全实践：正确使用dangerouslySetInnerHTML的消毒策略、采用HttpOnly Cookie的安全认证方案、服务端输入验证与参数化查询、以及CSP策略的纵深防御配置，帮助开发者构建多层防护体系。
文章要点：
1. React的JSX表达式会自动将
< > & 等特殊字符转义为HTML实体，这是抵御XSS的第一道防线，所有通过 {} 渲染的内容默认都是安全的2. 一旦使用 dangerouslySetInnerHTML 这个"逃生舱"，就必须先用 DOMPurify 对HTML做彻底消毒，剥离危险标签和
javascript: 等恶意协议，Markdown渲染也建议转成React元素而非原始HTML3. 认证令牌千万别往 localStorage 里塞，XSS漏洞一出现令牌就会被顺走；改用 HttpOnly Cookie，配合 Secure 和 SameSite=Strict 属性，再辅以CSRF Token，才能守住登录态
4. 客户端验证只是改善体验，真正的安全防线在服务端；用 Zod 做类型安全的Schema校验，数据库查询坚持用参数化占位符（如
$1 $2），永远不要把用户输入拼进SQL字符串5. Content Security Policy 是最后一道保险，通过HTTP头限制资源加载来源，用 nonce 管理必要的内联脚本，配合 strict-dynamic 支持React代码分割，上线前记得先用 Report-Only 模式测试策略
URL：
https://certificates.dev/blog/security-in-react-applications
certificates.dev
Security in React Applications
Learn how to secure React apps: prevent XSS with DOMPurify, store tokens safely in HttpOnly cookies, validate server inputs with Zod, and configure Content Security Policy.
《为特定场景"投影"React：从60KB到7KB的极致裁剪实验》
标签：#前端 #工程化 #React #TanStackStart #AICoding #PerformanceOptimization #Vite #RSC #BundleSize
总结：
TanStack作者Tanner Linsley发现React 19在Vite打包后仍占约60KB gzip，远大于TanStack全家桶总和。受"代码即物化视图"理念启发，他借助AI代理在一天内生成了一个针对TanStack Start需求定制的React"投影"——保留完整公共API，但移除并发调度、时间切片等不需要的功能，核心仅7.08KB gzip。该项目已在其个人博客和tanstack.com生产环境运行，JS体积减少33%至85%，渲染性能提升2到3倍，验证了当代码生成成本骤降时，为特定场景定制依赖库投影的可行性。
文章要点：
- 作者发现React打包后仍有约60KB，比TanStack全家桶加起来还"胖"，成了整个技术栈里"最不能删却又最大块头"的存在
- 本想用Preact"瘦身"，但它和React 19在use()、服务端动作、hydration等边缘地带已经"渐行渐远"，补丁叠补丁让人望而却步
- 一个超酷的观点启发了他：如果写代码能像查数据库一样"按需生成"，那代码本身只是"理念"的一种展示形式，我们完全可以为不同场景生成不同版本的React
- 借助AI代理，只用一天就"捏"出了一个迷你版React，保留了你熟悉的hooks、JSX、Suspense和SSR，但扔掉了并发调度、时间切片这些TanStack Start用不上的"重型装备"
- 设计得像乐高一样：7KB核心底座 + 8个可插拔功能（context、suspense、portal等），不需要的模块在构建时直接替换成空实现，不会混进最终包
- 真刀真枪上了生产环境：个人博客JS少了三分之一，首屏快了近两成；tanstack.com这种"重火力"站点也成功扛住，客户端JS砍掉近1MB
- 作者抛出思考题：当定制一个库的成本从几个月降到几天，继续默认 shipped 全套通用库，反而成了一种需要掂量的选择
- 他强调这不是要"取代React"，更像是Linux发行版或歌曲混音——同一个内核，根据不同听众的口味调出不同版本
文章URL：https://tannerlinsley.com/posts/projecting-react
标签：#前端 #工程化 #React #TanStackStart #AICoding #PerformanceOptimization #Vite #RSC #BundleSize
总结：
TanStack作者Tanner Linsley发现React 19在Vite打包后仍占约60KB gzip，远大于TanStack全家桶总和。受"代码即物化视图"理念启发，他借助AI代理在一天内生成了一个针对TanStack Start需求定制的React"投影"——保留完整公共API，但移除并发调度、时间切片等不需要的功能，核心仅7.08KB gzip。该项目已在其个人博客和tanstack.com生产环境运行，JS体积减少33%至85%，渲染性能提升2到3倍，验证了当代码生成成本骤降时，为特定场景定制依赖库投影的可行性。
文章要点：
- 作者发现React打包后仍有约60KB，比TanStack全家桶加起来还"胖"，成了整个技术栈里"最不能删却又最大块头"的存在
- 本想用Preact"瘦身"，但它和React 19在use()、服务端动作、hydration等边缘地带已经"渐行渐远"，补丁叠补丁让人望而却步
- 一个超酷的观点启发了他：如果写代码能像查数据库一样"按需生成"，那代码本身只是"理念"的一种展示形式，我们完全可以为不同场景生成不同版本的React
- 借助AI代理，只用一天就"捏"出了一个迷你版React，保留了你熟悉的hooks、JSX、Suspense和SSR，但扔掉了并发调度、时间切片这些TanStack Start用不上的"重型装备"
- 设计得像乐高一样：7KB核心底座 + 8个可插拔功能（context、suspense、portal等），不需要的模块在构建时直接替换成空实现，不会混进最终包
- 真刀真枪上了生产环境：个人博客JS少了三分之一，首屏快了近两成；tanstack.com这种"重火力"站点也成功扛住，客户端JS砍掉近1MB
- 作者抛出思考题：当定制一个库的成本从几个月降到几天，继续默认 shipped 全套通用库，反而成了一种需要掂量的选择
- 他强调这不是要"取代React"，更像是Linux发行版或歌曲混音——同一个内核，根据不同听众的口味调出不同版本
文章URL：https://tannerlinsley.com/posts/projecting-react
Tanner Linsley
Projecting React
An AI-generated projection of React's public API, shaped around what a TanStack Start app needs. ~9KB client, 2–3× faster on our workloads. Powers this blog today; capable of running tanstack.com end-to-end with no known regressions. An experiment, not a…
《用 React、GSAP 和 AI 打造 Maxima Therapy 网站》
标签：#前端 #React #GSAP #TailwindCSS #ReactRouter #AI辅助开发 #创意编程 #Lottie #MatterJS #ScrollTrigger
总结：
本文是 Codrops 上的一篇案例复盘，记录了团队为神经多样性支持机构 Maxima Therapy 打造高互动、高插画风格网站的全过程。文章详细介绍了技术栈选型（Sanity + React Router + GSAP + TailwindCSS）、多个核心交互模块的实现思路（可拖拽轮播、SVG 水波纹、物理绳索、形状变形、贴纸动效），以及 AI（Claude Code）在实际开发中的辅助作用与局限。对于想在前端项目中融合创意动画与 AI 提效的开发者来说，这是一份非常接地气的实战参考。
文章要点：
- 技术栈选型很务实：团队选了 React Router（而非 Next.js）做静态生成，搭配 Sanity 做 CMS、Cloudflare Pages 托管，理由是配置更轻量；GSAP + Lenis 负责动画和滚动平滑，TailwindCSS 负责样式，TypeScript 做类型检查
- 首页轮播的交互设计很巧妙：把四个节目板块拆成四个旋转的
- SVG 水波纹效果用 AI 辅助生成：Claude Code 帮忙把原始 SVG 路径转换成带 50 个控制点的系统，再结合 GSAP 实现鼠标触发的涟漪动画——AI 在创意编码这类"繁琐但规则明确"的任务上表现不错
- Lottie 动画与 Canvas 背景混合：通过离屏 Canvas 绘制固定图案，再用 Lottie 的 Canvas 渲染模式做遮罩，最后用
- 物理引擎让页面更有生命力：招聘页用 Matter.js 模拟"supports"单词被两根绳索悬挂的物理效果，绳索由复合体堆叠而成，SVG 文字根据物理模拟结果实时位移
- AI 是"得力助手"但不是"万能替身"：Claude Code 在 SVG 优化、Sanity 数据模型扩展、TypeScript 类型生成上帮了大忙，但也会出现结果不一致、擅自改动数据获取模式、甚至"幻觉"出不存在 SVG 路径的情况；团队建议把 AI 用在范围明确的小任务上
- ScrollTrigger 让滚动交互管理很轻松：配合
文章URL：
https://tympanus.net/codrops/2026/04/06/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai/
标签：#前端 #React #GSAP #TailwindCSS #ReactRouter #AI辅助开发 #创意编程 #Lottie #MatterJS #ScrollTrigger
总结：
本文是 Codrops 上的一篇案例复盘，记录了团队为神经多样性支持机构 Maxima Therapy 打造高互动、高插画风格网站的全过程。文章详细介绍了技术栈选型（Sanity + React Router + GSAP + TailwindCSS）、多个核心交互模块的实现思路（可拖拽轮播、SVG 水波纹、物理绳索、形状变形、贴纸动效），以及 AI（Claude Code）在实际开发中的辅助作用与局限。对于想在前端项目中融合创意动画与 AI 提效的开发者来说，这是一份非常接地气的实战参考。
文章要点：
- 技术栈选型很务实：团队选了 React Router（而非 Next.js）做静态生成，搭配 Sanity 做 CMS、Cloudflare Pages 托管，理由是配置更轻量；GSAP + Lenis 负责动画和滚动平滑，TailwindCSS 负责样式，TypeScript 做类型检查
- 首页轮播的交互设计很巧妙：把四个节目板块拆成四个旋转的
<div>，只有当前可见的板块才响应交互；切换时触发路由变化，但轮播组件通过布局隔离避免了不必要的重渲染- SVG 水波纹效果用 AI 辅助生成：Claude Code 帮忙把原始 SVG 路径转换成带 50 个控制点的系统，再结合 GSAP 实现鼠标触发的涟漪动画——AI 在创意编码这类"繁琐但规则明确"的任务上表现不错
- Lottie 动画与 Canvas 背景混合：通过离屏 Canvas 绘制固定图案，再用 Lottie 的 Canvas 渲染模式做遮罩，最后用
globalCompositeOperation 合成，实现了滚动联动的背景效果- 物理引擎让页面更有生命力：招聘页用 Matter.js 模拟"supports"单词被两根绳索悬挂的物理效果，绳索由复合体堆叠而成，SVG 文字根据物理模拟结果实时位移
- AI 是"得力助手"但不是"万能替身"：Claude Code 在 SVG 优化、Sanity 数据模型扩展、TypeScript 类型生成上帮了大忙，但也会出现结果不一致、擅自改动数据获取模式、甚至"幻觉"出不存在 SVG 路径的情况；团队建议把 AI 用在范围明确的小任务上
- ScrollTrigger 让滚动交互管理很轻松：配合
useGSAP hook 自动清理，避免了手动写 Intersection Observer 的繁琐，实现了文字显现、图片揭示、SVG 播放等丰富的滚动动效文章URL：
https://tympanus.net/codrops/2026/04/06/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai/
《垂直代码库：告别按类型分层，拥抱按业务域组织》
标签：#前端 #代码组织 #架构设计 #Monorepo #React #软件工程
总结：
本文主张前端代码库应从"水平分层"（按 components/hooks/utils 技术类型划分）转向"垂直切片"（按业务域/功能域组织）。作者以 Sentry 代码库十年演进为例，指出水平分层会导致代码分散、认知负荷高、耦合混乱；而垂直组织将同一业务域的组件、工具、类型内聚到一起，配合 Monorepo 的显式边界（exports/eslint-plugin-boundaries），能显著提升可维护性。虽然确定正确的垂直划分需要更多团队沟通，但这是支撑代码库长期演进的必要投资。
文章要点：
- 水平分层的隐患：把代码按 components / hooks / utils / types 分类虽然上手简单，但随着项目膨胀，同一业务逻辑会被拆得七零八落——比如 PageFilters 的组件、类型、工具函数散落在三个目录，改一个小需求要跳来跳去， cognitive load 直接拉满
- 垂直切片的核心思想：不按"技术类型"而按"业务域"分组，把同一个功能域（如 dashboard、profiling、billing）相关的组件、Hook、工具、类型全部收进一个目录；就像当年我们把 HTML/CSS/JS 从三层文件合并成组件一样，这次是更高维度的"关注点内聚"
- 与团队结构天然对齐：现代产品团队通常是端到端的功能团队（dashboard 团队、replay 团队），垂直代码结构让 CODEOWNERS 和包边界直接对应团队职责，谁负责什么一目了然
- 解决跨域复用焦虑：不是所有代码都严格属于某个页面，像 PageFilters 这种被多页面使用的通用能力，完全可以作为独立垂直域存在；关键是按"逻辑关联"而非"物理位置"来划分
- 用边界守护架构：垂直化后还需降低耦合，推荐通过 Monorepo + package.json#exports 显式暴露公共 API，或借助 eslint-plugin-boundaries 禁止深路径导入，把"私有实现"真正保护起来
- 没有银弹，但值得投入：确定合理的垂直域确实比"丢进 utils"更难，也可能出现不同团队重复造轮子；但作者认为这恰恰促进了团队沟通，而沟通本就是软件工程最难也最重要的部分
文章URL：
https://tkdodo.eu/blog/the-vertical-codebase
标签：#前端 #代码组织 #架构设计 #Monorepo #React #软件工程
总结：
本文主张前端代码库应从"水平分层"（按 components/hooks/utils 技术类型划分）转向"垂直切片"（按业务域/功能域组织）。作者以 Sentry 代码库十年演进为例，指出水平分层会导致代码分散、认知负荷高、耦合混乱；而垂直组织将同一业务域的组件、工具、类型内聚到一起，配合 Monorepo 的显式边界（exports/eslint-plugin-boundaries），能显著提升可维护性。虽然确定正确的垂直划分需要更多团队沟通，但这是支撑代码库长期演进的必要投资。
文章要点：
- 水平分层的隐患：把代码按 components / hooks / utils / types 分类虽然上手简单，但随着项目膨胀，同一业务逻辑会被拆得七零八落——比如 PageFilters 的组件、类型、工具函数散落在三个目录，改一个小需求要跳来跳去， cognitive load 直接拉满
- 垂直切片的核心思想：不按"技术类型"而按"业务域"分组，把同一个功能域（如 dashboard、profiling、billing）相关的组件、Hook、工具、类型全部收进一个目录；就像当年我们把 HTML/CSS/JS 从三层文件合并成组件一样，这次是更高维度的"关注点内聚"
- 与团队结构天然对齐：现代产品团队通常是端到端的功能团队（dashboard 团队、replay 团队），垂直代码结构让 CODEOWNERS 和包边界直接对应团队职责，谁负责什么一目了然
- 解决跨域复用焦虑：不是所有代码都严格属于某个页面，像 PageFilters 这种被多页面使用的通用能力，完全可以作为独立垂直域存在；关键是按"逻辑关联"而非"物理位置"来划分
- 用边界守护架构：垂直化后还需降低耦合，推荐通过 Monorepo + package.json#exports 显式暴露公共 API，或借助 eslint-plugin-boundaries 禁止深路径导入，把"私有实现"真正保护起来
- 没有银弹，但值得投入：确定合理的垂直域确实比"丢进 utils"更难，也可能出现不同团队重复造轮子；但作者认为这恰恰促进了团队沟通，而沟通本就是软件工程最难也最重要的部分
文章URL：
https://tkdodo.eu/blog/the-vertical-codebase
tkdodo.eu
The Vertical Codebase
Let's take a look at why the common, horizontal code structure is not ideal, where it breaks down, and what we can do about it.
《2026年JavaScript生态全景指南》
标签：#前端 #JavaScript #ECMAScript2025 #ECMAScript2026 #React #Vue #Svelte #NodeJS #TypeScript #Vite #Bun #Deno #TemporalAPI #IteratorHelpers #ImportAttributes
总结：
本文全面梳理了2026年JavaScript生态系统的最新发展，涵盖ECMAScript 2025（迭代器助手、Set方法、Promise.try等）和2026预期特性（Temporal API、资源管理），React/Vue/Svelte框架动态，Node.js原生TypeScript支持、Bun和Deno运行时竞争，Vite 8与Turbopack构建工具演进，TypeScript v6及AI编程趋势。文章强调掌握基础原理比追逐工具更重要，特别是在AI辅助编程时代，架构能力和代码品味尤为关键。
文章要点：
- **ECMAScript 2025超实用新玩具**：迭代器终于能链式调用`.map()
- **2026年最期待的Temporal API**：Date对象终于被拯救了！处理时区和日期计算不会再莫名其妙多出几天，浏览器原生支持即将到来，告别 moment.js 大礼包的时代要来啦～
- **框架圈的大新闻**：React 19的Server Components和Compiler还在消化中，Vue 3.6祭出Vapor Mode性能大招，Svelte 5的Runes API让响应式更细粒度； Next.js 16默认切到Turbopack，Astro被Cloudflare抱走，Remix正在酝酿去React化的大胆实验～
- **运行时三国杀**：Node.js 22+能直接跑.ts文件啦（虽然只是剥离类型），Bun被Anthropic(Claude家)收编后1.3版本速速飞起，Deno 2稳如老狗主打安全牌，三足鼎立格局越来越有意思～
- **TypeScript登顶GitHub第一**：v6严格模式默认开启，v7要用Go重写编译器提速10倍；92%的开发者都在用AI写代码，但文章提醒我们——基础原理和架构品味才是AI时代真正的护城河呀！
文章URL：https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
标签：#前端 #JavaScript #ECMAScript2025 #ECMAScript2026 #React #Vue #Svelte #NodeJS #TypeScript #Vite #Bun #Deno #TemporalAPI #IteratorHelpers #ImportAttributes
总结：
本文全面梳理了2026年JavaScript生态系统的最新发展，涵盖ECMAScript 2025（迭代器助手、Set方法、Promise.try等）和2026预期特性（Temporal API、资源管理），React/Vue/Svelte框架动态，Node.js原生TypeScript支持、Bun和Deno运行时竞争，Vite 8与Turbopack构建工具演进，TypeScript v6及AI编程趋势。文章强调掌握基础原理比追逐工具更重要，特别是在AI辅助编程时代，架构能力和代码品味尤为关键。
文章要点：
- **ECMAScript 2025超实用新玩具**：迭代器终于能链式调用`.map()
和.filter()`啦，而且是惰性求值不耗内存；Set之间可以玩集合运算，轻松找出技能交集和差集；`Promise.try()`让同步异步错误一网打尽；还有`RegExp.escape()`终于解决了用户搜索时特殊字符炸正则的问题～- **2026年最期待的Temporal API**：Date对象终于被拯救了！处理时区和日期计算不会再莫名其妙多出几天，浏览器原生支持即将到来，告别 moment.js 大礼包的时代要来啦～
- **框架圈的大新闻**：React 19的Server Components和Compiler还在消化中，Vue 3.6祭出Vapor Mode性能大招，Svelte 5的Runes API让响应式更细粒度； Next.js 16默认切到Turbopack，Astro被Cloudflare抱走，Remix正在酝酿去React化的大胆实验～
- **运行时三国杀**：Node.js 22+能直接跑.ts文件啦（虽然只是剥离类型），Bun被Anthropic(Claude家)收编后1.3版本速速飞起，Deno 2稳如老狗主打安全牌，三足鼎立格局越来越有意思～
- **TypeScript登顶GitHub第一**：v6严格模式默认开启，v7要用Go重写编译器提速10倍；92%的开发者都在用AI写代码，但文章提醒我们——基础原理和架构品味才是AI时代真正的护城河呀！
文章URL：https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
Frontend Masters
What To Know in JavaScript (2026 Edition)
We’ve done posts like this for CSS, but JavaScript deserves the same dangnabit! Especially as JavaScript does a better job of versioning itself anyway. We’ll cover new stuff in the language itself, but being a JavaScript practitioner involves more than the…
《前端内存泄漏：500仓库静态分析与五场景基准测试实证研究》
标签：#前端 #内存泄漏 #性能优化 #React #Vue #Angular #useEffect #静态分析 #基准测试
总结（一段话概括）
该研究对500个开源前端仓库（React/Vue/Angular）进行AST静态分析，发现86%的代码库存在至少一处缺失清理的内存泄漏模式，共识别55,864个潜在泄漏点，其中定时器清理缺失占比最高（43.9%）。通过五个控制变量的基准测试（各50轮×100次挂载循环）证实：每处未清理模式每次挂载/卸载循环平均泄漏约8KB内存，呈线性累积趋势；而正确清理的版本内存增长接近零（约2KB总计）。研究揭示了内存泄漏在前端生产代码中的普遍性及其对长会话应用（如仪表板、视频会议）的性能威胁，并提供了针对性的修复方案。
文章要点：
- 高普遍性：扫描714,217个文件发现55,864处潜在泄漏，430/500个仓库（86%）存在至少一处缺失清理模式，涵盖Kibana、Next.js等知名项目
- 主要泄漏源：定时器未清理（43.9%，22,384处）居首，其次是事件监听器（19.0%）、订阅未取消（13.9%）、useEffect无清理函数（9.3%）
- 统一泄漏成本：五个跨框架场景（React useEffect、Vue onMounted、Angular subscribe、Vue watch、RAF）均显示每循环约8KB线性内存增长，标准差极小（±0.6–37KB），而正确清理版本仅2-3KB噪声基线
- 统计显著性：效应量Cohen's d > 200（BAD与GOOD分布零重叠），p < 0.001，统计功效超99.99%，证实清理缺失是内存占用的主导变量
- 框架差异：React占发现总量62.3%（样本加权），Vue的
- 高危上下文：组件生命周期代码（32.9%）和事件绑定（24.5%）是高发区，因路由切换、标签页切换会频繁触发挂载/卸载
- 实际影响：单泄漏模式200次导航累积1.6MB，多模式叠加可达8MB/会话，足以触发移动端浏览器（iOS Safari 80-120MB阈值）杀标签页
- 修复成本低：92.3%的修复仅需单行代码（返回清理函数、存储stop handle、takeUntil模式），ROI极高
- 工具链缺口：现有ESLint规则（如react-hooks/exhaustive-deps）无法检测清理函数缺失，需借助AST级静态分析或生产环境堆内存监控
文章URL
https://stackinsight.dev/blog/memory-leak-empirical-study/
标签：#前端 #内存泄漏 #性能优化 #React #Vue #Angular #useEffect #静态分析 #基准测试
总结（一段话概括）
该研究对500个开源前端仓库（React/Vue/Angular）进行AST静态分析，发现86%的代码库存在至少一处缺失清理的内存泄漏模式，共识别55,864个潜在泄漏点，其中定时器清理缺失占比最高（43.9%）。通过五个控制变量的基准测试（各50轮×100次挂载循环）证实：每处未清理模式每次挂载/卸载循环平均泄漏约8KB内存，呈线性累积趋势；而正确清理的版本内存增长接近零（约2KB总计）。研究揭示了内存泄漏在前端生产代码中的普遍性及其对长会话应用（如仪表板、视频会议）的性能威胁，并提供了针对性的修复方案。
文章要点：
- 高普遍性：扫描714,217个文件发现55,864处潜在泄漏，430/500个仓库（86%）存在至少一处缺失清理模式，涵盖Kibana、Next.js等知名项目
- 主要泄漏源：定时器未清理（43.9%，22,384处）居首，其次是事件监听器（19.0%）、订阅未取消（13.9%）、useEffect无清理函数（9.3%）
- 统一泄漏成本：五个跨框架场景（React useEffect、Vue onMounted、Angular subscribe、Vue watch、RAF）均显示每循环约8KB线性内存增长，标准差极小（±0.6–37KB），而正确清理版本仅2-3KB噪声基线
- 统计显著性：效应量Cohen's d > 200（BAD与GOOD分布零重叠），p < 0.001，统计功效超99.99%，证实清理缺失是内存占用的主导变量
- 框架差异：React占发现总量62.3%（样本加权），Vue的
watch未存储stop handle（3,989处）和Angular的.subscribe()未取消（5,327处）均为高危模式- 高危上下文：组件生命周期代码（32.9%）和事件绑定（24.5%）是高发区，因路由切换、标签页切换会频繁触发挂载/卸载
- 实际影响：单泄漏模式200次导航累积1.6MB，多模式叠加可达8MB/会话，足以触发移动端浏览器（iOS Safari 80-120MB阈值）杀标签页
- 修复成本低：92.3%的修复仅需单行代码（返回清理函数、存储stop handle、takeUntil模式），ROI极高
- 工具链缺口：现有ESLint规则（如react-hooks/exhaustive-deps）无法检测清理函数缺失，需借助AST级静态分析或生产环境堆内存监控
文章URL
https://stackinsight.dev/blog/memory-leak-empirical-study/
StackInsight
Frontend Memory Leaks: A 500-Repository Static Analysis and Five-Scenario Benchmark Study
We scanned 500 public React, Vue, and Angular repositories with AST-based static analysis and found 55,864 missing-cleanup patterns — 86% of repos had at least one. Then we benchmarked five common leak scenarios (useEffect listeners, onMounted timers, RxJS…
《理解 React Fiber 存在的意义》
标签：#前端 #React #React_Fiber #性能优化 #并发渲染 #Virtual_DOM
总结（一段话概括）
React Fiber 是 React 16 对核心协调算法的彻底重写，旨在解决 React 15 中 Stack Reconciler 同步递归更新导致的主线程阻塞问题。通过将组件树重构为链表结构的 Fiber 节点，React 实现了可中断的异步更新、任务优先级调度和时间切片机制，使高优先级任务（如用户输入）能插队执行，避免页面卡顿，并为 Concurrent Mode、Suspense 等现代特性奠定基础。
文章要点：
- React 15 的瓶颈：Stack Reconciler 采用递归遍历，更新一旦开始无法中断，复杂组件树会导致主线程长时间阻塞，造成掉帧和交互卡顿
- Fiber 的本质：将同步更新改为可中断的异步更新，每个 Fiber 节点是一个执行单元，通过
- 时间切片（Time Slicing）：利用
- 优先级调度：引入 Lanes 机制，区分 Immediate（最高）、UserBlocking、Normal、Low、Idle 五级优先级，确保紧急更新优先处理
- 双缓冲机制：维护
- Phase 分离：将更新分为 Render 阶段（可中断，构建 Fiber 树）和 Commit 阶段（不可中断，同步执行 DOM 操作），支持错误边界（Error Boundaries）捕获
- 架构演进：从 React 15 的两层（Reconciler + Renderer）增至 React 16+ 的三层（Scheduler + Reconciler + Renderer），调度器负责任务分配和中断控制
文章URL：https://inside-react.vercel.app/blog/understanding-why-react-fiber-exists
标签：#前端 #React #React_Fiber #性能优化 #并发渲染 #Virtual_DOM
总结（一段话概括）
React Fiber 是 React 16 对核心协调算法的彻底重写，旨在解决 React 15 中 Stack Reconciler 同步递归更新导致的主线程阻塞问题。通过将组件树重构为链表结构的 Fiber 节点，React 实现了可中断的异步更新、任务优先级调度和时间切片机制，使高优先级任务（如用户输入）能插队执行，避免页面卡顿，并为 Concurrent Mode、Suspense 等现代特性奠定基础。
文章要点：
- React 15 的瓶颈：Stack Reconciler 采用递归遍历，更新一旦开始无法中断，复杂组件树会导致主线程长时间阻塞，造成掉帧和交互卡顿
- Fiber 的本质：将同步更新改为可中断的异步更新，每个 Fiber 节点是一个执行单元，通过
child、sibling、return 指针形成链表树，取代递归调用栈- 时间切片（Time Slicing）：利用
requestIdleCallback polyfill（基于 MessageChannel），在浏览器每帧（16.6ms）中预留时间（默认 5ms）给 React，超时即让出主线程控制权- 优先级调度：引入 Lanes 机制，区分 Immediate（最高）、UserBlocking、Normal、Low、Idle 五级优先级，确保紧急更新优先处理
- 双缓冲机制：维护
current Fiber 和 workInProgress Fiber 两棵树，通过 alternate 指针关联，渲染完成后直接切换指针指向，避免重复创建对象- Phase 分离：将更新分为 Render 阶段（可中断，构建 Fiber 树）和 Commit 阶段（不可中断，同步执行 DOM 操作），支持错误边界（Error Boundaries）捕获
- 架构演进：从 React 15 的两层（Reconciler + Renderer）增至 React 16+ 的三层（Scheduler + Reconciler + Renderer），调度器负责任务分配和中断控制
文章URL：https://inside-react.vercel.app/blog/understanding-why-react-fiber-exists
Inside React
Understanding Why React Fiber Exists
Understanding Why React Fiber Exists and how it lets React pause, prioritize
《人生苦短，何必手写 API 类型：OpenAPI 驱动的 React 开发》
标签：#前端 #React #OpenAPI #TypeScript #Hey_API #MSW #Nanoquery #Contract_First
总结
本文是 Evil Martians 团队"契约优先"系列第三篇，介绍如何通过 OpenAPI 规范驱动 React 前端开发。核心思路是将 OpenAPI Spec 作为单一事实来源，利用 Hey API 自动生成 TypeScript 类型、SDK 客户端和 Zod 验证模式，配合 Nanostores 与 Nanoquery 实现类型安全的状态管理，并使用 MSW 在浏览器层面拦截网络请求进行模拟，实现前后端并行开发。当后端契约变更时，重新生成代码即可让 TypeScript 立即暴露所有需要更新的地方，避免生产环境出现类型不匹配错误。
文章要点：
- **手写 API 类型的痛点**：类型与后端脱节、缺乏运行时验证、重复样板代码、错误只能在生产环境发现
- **Hey API 自动生成**：通过
- **Nanostores + Nanoquery 状态管理**：将 API 数据视为全局状态存储在组件外，支持缓存、自动重取、跨组件共享，避免传统 Hooks 的数据获取陷阱
- **MSW 网络层模拟**：在浏览器层面拦截真实 HTTP 请求返回模拟数据，支持随机延迟、分页、过滤、错误场景，实现不依赖后端的功能开发
- **完整实战示例**：包含酒店管理系统代码，展示表单验证、CRUD 操作、路由集成、环境配置切换等完整开发流程
- **契约优先工作流**：后端更新 Spec → 前端重新生成 → TypeScript 报错定位 → 修复代码，确保集成一次成功
文章URL：https://evilmartians.com/chronicles/lifes-too-short-to-hand-write-api-types-openapi-driven-react
标签：#前端 #React #OpenAPI #TypeScript #Hey_API #MSW #Nanoquery #Contract_First
总结
本文是 Evil Martians 团队"契约优先"系列第三篇，介绍如何通过 OpenAPI 规范驱动 React 前端开发。核心思路是将 OpenAPI Spec 作为单一事实来源，利用 Hey API 自动生成 TypeScript 类型、SDK 客户端和 Zod 验证模式，配合 Nanostores 与 Nanoquery 实现类型安全的状态管理，并使用 MSW 在浏览器层面拦截网络请求进行模拟，实现前后端并行开发。当后端契约变更时，重新生成代码即可让 TypeScript 立即暴露所有需要更新的地方，避免生产环境出现类型不匹配错误。
文章要点：
- **手写 API 类型的痛点**：类型与后端脱节、缺乏运行时验证、重复样板代码、错误只能在生产环境发现
- **Hey API 自动生成**：通过
openapi-ts 从 OpenAPI Spec 生成 TypeScript 类型、SDK 函数、Zod 验证模式和客户端配置，实现编译时与运行时双重安全- **Nanostores + Nanoquery 状态管理**：将 API 数据视为全局状态存储在组件外，支持缓存、自动重取、跨组件共享，避免传统 Hooks 的数据获取陷阱
- **MSW 网络层模拟**：在浏览器层面拦截真实 HTTP 请求返回模拟数据，支持随机延迟、分页、过滤、错误场景，实现不依赖后端的功能开发
- **完整实战示例**：包含酒店管理系统代码，展示表单验证、CRUD 操作、路由集成、环境配置切换等完整开发流程
- **契约优先工作流**：后端更新 Spec → 前端重新生成 → TypeScript 报错定位 → 修复代码，确保集成一次成功
文章URL：https://evilmartians.com/chronicles/lifes-too-short-to-hand-write-api-types-openapi-driven-react
evilmartians.com
Life's too short to hand-write API types: OpenAPI-driven React—Martian Chronicles, Evil Martians’ team blog
Transform your React development with contract-first APIs. Generate TypeScript types, build type-safe clients, and develop with mocks while backend implements—no more waiting, no more integration chaos.
《使用 SurveyJS 在 React 中构建动态 JSON 驱动表单》
标签：#前端 #React #SurveyJS #JSON_Schema #Form_Builder #Dynamic_Forms #No_Code
总结
本文介绍了 SurveyJS 表单构建器在 React 应用中的集成与使用方法。通过 JSON Schema 定义表单结构，开发者可实现运行时动态渲染表单，避免硬编码。文章详细讲解了安装配置、组件初始化、主题定制、数据持久化（localStorage/服务端）、图片上传处理、PDF 导出等核心功能，并提供了完整的 Next.js 集成示例代码，帮助开发者快速搭建自托管、数据可控的动态表单解决方案。
文章要点：
- **JSON Schema 驱动**：表单结构通过 JSON 定义，支持运行时动态加载和修改，实现真正的数据驱动表单渲染
- **可视化构建器**：Survey Creator 提供拖拽式界面，非技术人员也能设计表单，实时生成对应 JSON 配置
- **React 集成方案**：需安装
- **数据持久化**：通过
- **扩展功能**：支持 Ace 编辑器集成（JSON 编辑）、图片上传至服务器（非 Base64 存储）、PDF 导出、自定义主题等高级功能
- **商业化许可**：Survey Creator 商用需购买许可证，否则界面会显示警告横幅
文章URL：https://surveyjs.hashnode.dev/build-dynamic-json-driven-forms-react
标签：#前端 #React #SurveyJS #JSON_Schema #Form_Builder #Dynamic_Forms #No_Code
总结
本文介绍了 SurveyJS 表单构建器在 React 应用中的集成与使用方法。通过 JSON Schema 定义表单结构，开发者可实现运行时动态渲染表单，避免硬编码。文章详细讲解了安装配置、组件初始化、主题定制、数据持久化（localStorage/服务端）、图片上传处理、PDF 导出等核心功能，并提供了完整的 Next.js 集成示例代码，帮助开发者快速搭建自托管、数据可控的动态表单解决方案。
文章要点：
- **JSON Schema 驱动**：表单结构通过 JSON 定义，支持运行时动态加载和修改，实现真正的数据驱动表单渲染
- **可视化构建器**：Survey Creator 提供拖拽式界面，非技术人员也能设计表单，实时生成对应 JSON 配置
- **React 集成方案**：需安装
survey-creator-react 和 survey-creator-core`，组件不支持 SSR，在 Next.js 中需使用动态导入并设置 `ssr: false- **数据持久化**：通过
saveSurveyFunc 回调可将表单配置保存至 localStorage 或后端服务，支持加载已有 JSON 配置继续编辑- **扩展功能**：支持 Ace 编辑器集成（JSON 编辑）、图片上传至服务器（非 Base64 存储）、PDF 导出、自定义主题等高级功能
- **商业化许可**：Survey Creator 商用需购买许可证，否则界面会显示警告横幅
文章URL：https://surveyjs.hashnode.dev/build-dynamic-json-driven-forms-react
Schema-Driven Forms in React: A Practical Guide to Forms as Data
Schema-Driven Forms in React: Practical Guide
Learn how to define forms as data, manage logic in JSON, and build scalable React forms using SurveyJS.
十亿行数据的虚拟滚动技术——HighTable 的五大实现方案
标签：#前端 #React #虚拟滚动 #性能优化 #大数据表格 #HighTable #DOM优化
总结：本文介绍了 HighTable 组件实现十亿级数据表格渲染的五大核心技术：懒加载仅获取可视区域数据、表格切片只渲染可见行、无限像素技术通过缩放滚动条突破浏览器高度限制、双模式滚动实现全局跳转与本地精确定位、两步随机访问分离垂直与水平滚动逻辑。这些方案完全基于原生 HTML 与 CSS，无需 Canvas 或自定义滚动条即可在浏览器中流畅处理海量数据。
文章要点：
- 技术1：懒加载：仅加载可视区域单元格数据，通过 DataFrame 接口异步获取并缓存数据，将 1TB 数据缩减为仅需加载约 3KB 的可见区域
- 技术2：表格切片：引入 Canvas 层作为定位参考，仅渲染可见行（约 30 行）而非全部十亿行，将 DOM 元素数量控制在恒定范围内
- 技术3：无限像素：设置 Canvas 最大高度（800 万像素），超过阈值时通过 downscaleFactor 缩放滚动条分辨率，突破浏览器元素高度限制（Firefox 约 1700 万像素）
- 技术4：像素级精确滚动：实现本地滚动（小幅度移动保持行连续性）与全局滚动（大幅度跳转）双模式，通过 globalAnchor 和 localOffset 状态管理，确保 2 万亿行内可达任意像素
- 技术5：两步随机访问：解耦垂直与水平滚动逻辑，先计算目标位置并垂直滚动，渲染完成后再处理水平定位与焦点设置，支持键盘导航和程序化跳转至任意单元格
链接：https://rednegra.net/blog/20260212-virtual-scroll/
标签：#前端 #React #虚拟滚动 #性能优化 #大数据表格 #HighTable #DOM优化
总结：本文介绍了 HighTable 组件实现十亿级数据表格渲染的五大核心技术：懒加载仅获取可视区域数据、表格切片只渲染可见行、无限像素技术通过缩放滚动条突破浏览器高度限制、双模式滚动实现全局跳转与本地精确定位、两步随机访问分离垂直与水平滚动逻辑。这些方案完全基于原生 HTML 与 CSS，无需 Canvas 或自定义滚动条即可在浏览器中流畅处理海量数据。
文章要点：
- 技术1：懒加载：仅加载可视区域单元格数据，通过 DataFrame 接口异步获取并缓存数据，将 1TB 数据缩减为仅需加载约 3KB 的可见区域
- 技术2：表格切片：引入 Canvas 层作为定位参考，仅渲染可见行（约 30 行）而非全部十亿行，将 DOM 元素数量控制在恒定范围内
- 技术3：无限像素：设置 Canvas 最大高度（800 万像素），超过阈值时通过 downscaleFactor 缩放滚动条分辨率，突破浏览器元素高度限制（Firefox 约 1700 万像素）
- 技术4：像素级精确滚动：实现本地滚动（小幅度移动保持行连续性）与全局滚动（大幅度跳转）双模式，通过 globalAnchor 和 localOffset 状态管理，确保 2 万亿行内可达任意像素
- 技术5：两步随机访问：解耦垂直与水平滚动逻辑，先计算目标位置并垂直滚动，渲染完成后再处理水平定位与焦点设置，支持键盘导航和程序化跳转至任意单元格
链接：https://rednegra.net/blog/20260212-virtual-scroll/
#React
https://blog.logrocket.com/react-has-finally-solved-its-biggest-problem-useeffectevent/
useEffectEvent 让 useEffect 摆脱对状态的依赖，彻底解决过期闭包与无限循环等顽疾。https://blog.logrocket.com/react-has-finally-solved-its-biggest-problem-useeffectevent/
LogRocket Blog
React has finally solved its biggest problem: The joys of useEffectEvent - LogRocket Blog
Jack Herrington breaks down how React's new useEffectEvent Hook stabilizes behavior, simplifies timers, and enables predictable abstractions.
#React React 19.2 新增
配套推出的 Performance Tracks 把 React 内部任务、组件渲染与 SSR 耗时一次性可视化，让开发者快速定位并消除拖慢 INP 的瓶颈。
https://calendar.perfplanet.com/2025/react-19-2-further-advances-inp-optimization/
<Activity> 组件，可在保留状态的前提下以最低优先级渲染隐藏内容，显著降低主线程压力并加速交互响应。 配套推出的 Performance Tracks 把 React 内部任务、组件渲染与 SSR 耗时一次性可视化，让开发者快速定位并消除拖慢 INP 的瓶颈。
https://calendar.perfplanet.com/2025/react-19-2-further-advances-inp-optimization/
Web Performance Calendar
React 19.2. Further Advances INP Optimization
Last year, in the article “5 tips to effectively optimize INP in React,” we focused on what developers often underestimate when optimizing React.
React is not automatically fast, and long JavaScript tasks can arise from perfectly common constructs. A larger…
React is not automatically fast, and long JavaScript tasks can arise from perfectly common constructs. A larger…
#React 异步从手动处理迈向声明式协调
https://blog.logrocket.com/the-next-era-of-react/
https://blog.logrocket.com/the-next-era-of-react/
LogRocket Blog
The next era of React has arrived: Here's what you need to know - LogRocket Blog
Aurora Scharff discusses React's async coordination primitives, and how React’s new era signals a fundamental shift in how devs build software.
