<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[LIU_CAN的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/LIU_CAN</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; LIU_CAN]]></copyright><item><title><![CDATA[【React+TS71007】Next.js “use client” 误用导致 TS71007：客户端/服务端引入问题的完整排查与修复]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/168878559</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/168878559</guid><author>LIU_CAN</author><pubDate>Fri, 23 Oct 2026 19:19:15 +0800</pubDate><description><![CDATA[在 Next.js App Router 中，TS71007 报错源于对 "use client" 的误用。当一个叶子组件（如 FloatBar）被客户端组件引入却额外声明 "use client" 时，Next.js 会将其误判为服务端到客户端的边界，触发函数类型 props 不可序列化的检查。实际上，只要父组件已声明 "use client"，子组件无需重复添加，其客户端身份将自动传播。修复方法是移除多余 "use client"，即可消除报错且不影响运行时行为。核心原则：仅在真正的客户端入口组件上使用]]></description><category></category></item><item><title><![CDATA[【前端+RSC部署+水合问题】Next.js 静态导出软导航「整页重绘」排查：不是整页重载，而是布局被 React 重挂载]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/165622069</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/165622069</guid><author>LIU_CAN</author><pubDate>Thu, 17 Sep 2026 11:21:18 +0800</pubDate><description><![CDATA[生产环境切换页面时出现“整页重绘”现象，实为软导航成功但 (main)/layout.tsx 被 React 重挂载所致，非整页重载。因 useRef 管理的首屏动画开关依赖组件实例，重挂载后状态丢失，导致每次切换动画重放。本地 dev 正常因 RSC 未触发重挂载。通过无头浏览器验证无 document 请求、DOM 节点同一性实验锁定真因。解决方案：在 window 级设置首屏闩锁，并配合 RSC 补丁确保软导航稳定，实现一致的无动画切换体验。]]></description><category></category></item><item><title><![CDATA[【Next+build】解决 Next.js 构建报错：Cannot find module for page: /neperf 的完整排查过程]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/164252144</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/164252144</guid><author>LIU_CAN</author><pubDate>Tue, 01 Sep 2026 09:57:57 +0800</pubDate><description><![CDATA[<think>我们要求根据内容生成≤150字的文章摘要。从提供的内容中提取关键点：Next.js构建报错Cannot find module for page: /neperf (ENOENT)，根因是.next缓存损坏，解决方法是清理缓存后重新构建。需要总结成摘要，不超过150字。注意要简洁。</think>在一次 Next.js 静态导出构建中，Cannot find module for page: /neperf（ENOENT）报错导致构建失败。排查确认页面源码无误，根因是 .next 构建缓存损坏]]></description><category></category></item><item><title><![CDATA[【前端+SVG+Figma】SVG 兼容性复盘：Figma 导入文字“缩很小/不见“的发现、分析与解决]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163541569</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163541569</guid><author>LIU_CAN</author><pubDate>Fri, 07 Aug 2026 15:49:33 +0800</pubDate><description><![CDATA[SVG文件在浏览器中显示正常，但导入Figma后文字缩成1像素的问题，根源在于pattern+scale嵌套位图与Figma对objectBoundingBox的兼容性问题。通过多环境对比分析，发现Figma不支持部分SVG高级特性。解决方案包括：1）用兼容性子集重写SVG结构，替换嵌套位图为image标签；2）批量处理文件并保留原件；3）建立双版本资产管线。该方法论适用于跨工具兼容性问题诊断，强调实物验证、量化分析和脚本化批量处理。最终通过结构简化和属性归一化实现浏览器与Figma的兼容性修复。]]></description><category></category></item><item><title><![CDATA[【前端+docker】NMS 容器启动失败？可能只是缺少一个 `/etc/nms/nacos` 文件]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163496954</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163496954</guid><author>LIU_CAN</author><pubDate>Wed, 05 Aug 2026 10:56:12 +0800</pubDate><description><![CDATA[新版NMS容器服务启动失败问题排查总结 问题现象：升级NMS Deb包后，容器反复重启，外部访问返回Connection reset，Supervisor显示服务uptime始终为0。 排查路径： 确认服务处于崩溃重启循环 定位到业务日志/var/log/nms_*.log 发现关键错误提示配置文件缺失或格式错误 对比正常容器环境，检查Deb包内容 根本原因： 缺失强制配置文件/etc/nms/nacos 配置文件存在换行符导致解析失败 解决方案： 使用printf命令创建无换行符的配置文件后重启容器 经验]]></description><category></category></item><item><title><![CDATA[【前端+WebAssembly】深入理解 WebAssembly：从入门到决策指南]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163398287</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163398287</guid><author>LIU_CAN</author><pubDate>Sat, 01 Aug 2026 22:37:34 +0800</pubDate><description><![CDATA[摘要： WebAssembly（wasm）是一种高性能的二进制指令格式，允许开发者用C/C++/Rust等语言编写代码并在浏览器中运行。本文系统介绍了wasm的概念、工作原理、核心优势（接近原生性能、跨平台、安全沙箱）及典型应用场景（游戏引擎、音视频处理等）。通过工具链对比和开发流程示例（如Emscripten编译C++代码），展示了如何与JavaScript互操作。文章还提供了wasm与JS/原生代码的技术对比矩阵，并探讨了WASI在服务端的应用前景。帮助开发者全面了解wasm技术栈并做出合理技术选型。]]></description><category></category></item><item><title><![CDATA[【前端+双重渲染】React ECharts 双重渲染？终极剖析与解决方案]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163368119</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163368119</guid><author>LIU_CAN</author><pubDate>Sat, 01 Aug 2026 08:00:00 +0800</pubDate><description><![CDATA[摘要 echarts-for-react 组件闪白和双重渲染问题的根源在于组件挂载时与 useEffect 的时序冲突。本文通过源码分析揭示了问题本质：组件内部自动调用 setOption 与开发者手动调用形成双重渲染。常见解决方案如 EMPTY_OPTION、shouldSetOption 等均存在缺陷。最终提出最佳实践方案：使用 useMemo 在渲染阶段构建完整配置，通过 option prop 一次性传递，避免后续手动调用。该方案从架构层面消除了双重绘制问题，保持代码简洁高效，同时兼容异步数据场景。]]></description><category></category></item><item><title><![CDATA[【前端+循环依赖无限循环】React 无限更新实战复盘：一个 formData 依赖引发的循环链]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163341248</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163341248</guid><author>LIU_CAN</author><pubDate>Fri, 31 Jul 2026 08:00:00 +0800</pubDate><description><![CDATA[摘要 React开发中常见的"Maximum update depth exceeded"错误通常由useCallback依赖了被useEffect间接修改的状态（如formData）引发，形成"渲染→回调重建→effect触发→状态更新→渲染"的死循环。本文通过真实案例剖析了这种闭环依赖链的形成机制，指出问题根源在于将仅需读取最新值的"只读状态"误作"响应式依赖"。解决方案是使用useRef持有最新值并移除错误依赖，同时提供了判断标准：若状态变化需要重建函数则保留依赖，否则改用useRef。文章还给出了包]]></description><category></category></item><item><title><![CDATA[【前端+首屏交互】Next.js 登录页 Loading 异常复盘：从 dynamic SSR 失效到异步状态管理]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163327656</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163327656</guid><author>LIU_CAN</author><pubDate>Fri, 31 Jul 2026 08:00:00 +0800</pubDate><description><![CDATA[文章摘要 本文剖析了Next.js登录页按钮"首次失效、二次正常"的疑难Bug，其根源在于dynamic({ ssr: false })导致的组件初始化延迟与finally代码块的时序陷阱。分析表明：首屏交互组件禁用SSR会破坏事件绑定，而finally无条件清除状态会中断导航过渡效果。解决方案采用三端策略：1) 移除dynamic保证组件即时渲染；2) 用ref构建防重提交屏障；3) 按场景精确管理loading状态——仅在失败时清除，成功时保持至页面跳转。最终方案通过Mermaid流程图呈现决策逻辑，对]]></description><category></category></item><item><title><![CDATA[【前端+Ant Design】Ant Design 展开行子表刷新困境：从三层缓存陷阱到精准重建 | 深度复盘]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163312555</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163312555</guid><author>LIU_CAN</author><pubDate>Thu, 30 Jul 2026 00:15:38 +0800</pubDate><description><![CDATA[本文深入分析了Ant Design表格展开行子表数据更新失效的问题。现象表现为API调用成功后UI仍显示旧数据，手动刷新才更新。通过分层排查发现三层缓存机制叠加导致： Ant Design Table对展开行的缓存机制，使得dataSource更新时不会重新渲染已展开行 CEditTable内部通过useMemo派生数据，因上层缓存导致依赖失效 异步操作中的闭包陷阱捕获了过期状态引用 最终解决方案包括： 新增refreshSubscriptionData函数强制更新 简化保存/删除逻辑 为CEditTabl]]></description><category></category></item><item><title><![CDATA[【前端+Next.js App Router】深入剖析：React底层如何识别与处理Next.js约定文件（not-found/error/global-error）]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163308943</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163308943</guid><author>LIU_CAN</author><pubDate>Thu, 30 Jul 2026 00:02:59 +0800</pubDate><description><![CDATA[flowchart TD %% 主流程：从上到下垂直布局 A["用户访问 /example/page"] --> B["app/layout.tsx（根布局）"] B --> C["app/example/layout.tsx（segment布局）"] C --> D["app/example/page.tsx（页面组件）"] %% 正常渲染路径（右侧） D -- "正常渲染" --> E["✅ 渲染成功显示页面内容"] %% 错误路径（左侧） D -- "抛出错误" --> F["❌ 错误捕获流程"] F]]></description><category></category></item><item><title><![CDATA[【前端+docker】一次 Docker 容器服务静默崩溃的排查实录：从 strace 追踪到环境变量缺失]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163280357</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163280357</guid><author>LIU_CAN</author><pubDate>Tue, 28 Jul 2026 19:05:54 +0800</pubDate><description><![CDATA[摘要： 本文记录了一次线上服务“静默崩溃”的完整排查过程。新版本部署后，容器内服务无日志退出，常规手段失效。通过strace追踪系统调用，发现程序因读取/etc/nms/nacos文件失败而崩溃。对比老环境发现关键差异：新容器缺失NACOS环境变量，导致代码误入本地文件读取分支。解决方案是通过supervisor注入缺失的环境变量，服务立即恢复。核心经验： 静默崩溃时用strace抓系统调用； 环境变量差异是常见隐形杀手，需对比env输出； 代码逻辑变更必须同步更新部署配置。 （全文148字）]]></description><category></category></item><item><title><![CDATA[【前端+Vuex】深入理解 Vuex：核心属性与使用指南]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163252807</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163252807</guid><author>LIU_CAN</author><pubDate>Tue, 28 Jul 2026 08:00:00 +0800</pubDate><description><![CDATA[Vuex是Vue.js官方推荐的状态管理库，通过集中式存储管理应用的所有组件的共享状态。本文深入解析Vuex的五大核心属性：state（唯一数据源）、getters（派生计算属性）、mutations（同步修改state）、actions（处理异步操作）和modules（模块化拆分），并介绍辅助函数mapState、mapGetters等简化代码的方法。文章还提供了决策流程图帮助开发者选择合适属性，以及常见问题解决方案和调试技巧。对于大型项目，推荐使用modules进行模块化管理。最后对比了Vuex与Vue]]></description><category></category></item><item><title><![CDATA[【前端+登录页】登录页背景性能优化实战：从 722 KB 到 200 KB，LCP 从 2.5s 到 1.2s]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163234016</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163234016</guid><author>LIU_CAN</author><pubDate>Mon, 27 Jul 2026 11:01:48 +0800</pubDate><description><![CDATA[本文分享了一个Next.js登录页性能优化案例，通过五个关键步骤将背景图片从722KB压缩到200KB，LCP时间从2.5s降至1.2s，单次登录流量节省85%。优化措施包括：1）消除重复图片加载；2）压缩并转换为WebP格式；3）实施局部preload；4）使用Next.js Image组件替代CSS背景；5）简化页面加载动画。这些改动显著改善了首屏加载速度、用户交互体验和带宽消耗，使Core Web Vitals评分从中等提升到优秀。文章提供了详细的实施步骤、效果对比和渐进式优化建议，可立即应用于实际项]]></description><category></category></item><item><title><![CDATA[【前端+项目分析】`img` vs `Image`：从两个真实项目看前端图片组件的正确选择]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163222244</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163222244</guid><author>LIU_CAN</author><pubDate>Mon, 27 Jul 2026 08:00:00 +0800</pubDate><description><![CDATA[文章摘要： 本文对比分析了两个前端项目中图片组件的选择差异。Controller-git项目使用原生<img>标签而非更"现代"的Image组件，原因包括：Next.js Image组件有严格配置要求、项目对性能优化不敏感、以及务实开发策略。研究发现真正的性能问题是图片重复加载，而非组件选择。Frontend项目采用Ant Design的Image组件主要为了UI功能而非性能优化，其架构包含完善的状态管理和登录流程控制。文章最后给出优化建议：优先解决重复加载问题，关键图片预加载，再根据项目需求选择是否升级到]]></description><category></category></item><item><title><![CDATA[【前端+线上样式失效问题】Ant Design v6 Tabs 线上样式失效问题：从发现到解决的完整复盘]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163166100</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163166100</guid><author>LIU_CAN</author><pubDate>Sun, 26 Jul 2026 08:00:00 +0800</pubDate><description><![CDATA[本文记录了React+Ant Design v6项目中遇到的Tabs组件线上样式失效问题。通过对比本地与线上环境差异，发现Ant Design v6生产构建后tab panel类名从.ant-tabs-tabpane变为.ant-tabs-content系列，导致针对旧类名的CSS样式失效。排查发现该问题是Ant Design v6的构建优化导致，通过合并样式到新类名解决。文章总结了环境差异排查、DOM结构对比等关键方法，并提醒注意UI库版本升级可能带来的不兼容变更。最终方案既修复了问题，也为类似"线上/线]]></description><category></category></item><item><title><![CDATA[【前端+生产环境异常排查】Ant Design Tabs 生产环境异常排查：从 z-index 误判到 CSS 布局覆盖的深度剖析]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163165057</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163165057</guid><author>LIU_CAN</author><pubDate>Sun, 26 Jul 2026 08:00:00 +0800</pubDate><description><![CDATA[Ant Design Tabs 生产环境异常排查报告 问题现象：生产环境中 Ant Design Tabs 组件出现标签页切换卡死、内容堆叠的异常，而开发环境运行正常。初步误判为 z-index 问题，实际是 CSS 布局覆盖导致的组件功能失效。 根因分析：自定义 CSS 对 .ant-tabs-content 强制设置了 display: flex 属性，破坏了 Ant Design 原生的标签页隐藏机制（使用 visibility: hidden + width/height: 0）。flex 布局使所]]></description><category></category></item><item><title><![CDATA[【前端+css+生产环境异常排查】生产环境布局异常排查实录：从诡异错位到CSS隐藏陷阱]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163161525</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163161525</guid><author>LIU_CAN</author><pubDate>Sat, 25 Jul 2026 08:00:00 +0800</pubDate><description><![CDATA[生产环境布局异常排查实录 问题现象：同一份代码在开发环境正常，但在生产环境出现页面错位、右侧内容丢失的问题，表现为页面被拉伸后右侧内容被抛出视口外。 排查过程： 初始假设CSS类缺失（flex-grow冲突）被验证无效 关键转折点：发现布局异常发生在数据加载完成后 定位到PortSvg2dHorizontal组件中SVG的width计算问题（可能达2000px+） 根因分析：CSS Flexbox的min-width:auto默认行为阻止了flex子项收缩 环境差异：生产环境因数据量大导致SVG宽度计算值远]]></description><category></category></item><item><title><![CDATA[【前端+Next.js App Router +Next.js 的约定式路由】深入理解 Next.js App Router 约定式路由：not-found.tsx 和 error.tsx 的工作原理]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163138498</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163138498</guid><author>LIU_CAN</author><pubDate>Sat, 25 Jul 2026 08:00:00 +0800</pubDate><description><![CDATA[Next.js App Router 采用"约定优于配置"的设计理念，not-found.tsx 和 error.tsx 文件通过自动发现机制工作而无需显式导入。本文通过构建产物分析验证了这一机制：Next.js 在构建时会扫描识别约定文件，自动编译为服务端/客户端代码（可见于.next目录），并在运行时条件触发时自动调用对应组件。类似机制也适用于page.tsx、layout.tsx等约定文件。这种设计显著简化了开发流程，开发者只需遵循命名规范并正确放置文件即可获得完整功能。建议通过检查构建产物和开发工具]]></description><category></category></item><item><title><![CDATA[【前端+路由组目录+标准路由目录】Next.js 路由组与标准目录路径解析差异：trailingSlash 配置下的兼容性问题深度解析]]></title><link>https://blog.youkuaiyun.com/LIU_CAN/article/details/163137361</link><guid>https://blog.youkuaiyun.com/LIU_CAN/article/details/163137361</guid><author>LIU_CAN</author><pubDate>Fri, 24 Jul 2026 08:00:00 +0800</pubDate><description><![CDATA[**Next.js 路由组与标准目录在路径解析上存在差异，尤其在 trailingSlash: true 配置下，路由组 (login)/page.tsx 可能无法被正确识别，导致404错误，而标准目录 login/page.tsx 则可正常工作。该问题的核心在于路由组的元数据干扰了尾斜杠的追加逻辑。 解决方案： 优先使用标准目录，避免路由组带来的兼容性问题 改用布局组件替代路由组共享布局 调整配置，如可接受则禁用 trailingSlash 遵循最佳实践：路由组仅用于纯布局分组，关键路径使用标准目录 此问]]></description><category></category></item></channel></rss>