ZoeLandia-优快云博客

原创 React11：数据请求与 TanStack Query

本课核心是掌握 TanStack Query 如何管理服务端状态，解决列表页数据缓存、去重、自动刷新等问题。通过 QueryClientProvider 全局挂载缓存实例，使用 useQuery 以 queryKey 唯一标识数据，实现参数变化时自动重查、缓存秒出；结合 useMutation 与 invalidateQueries 完成写操作后自动刷新。强调区分客户端状态（useState）与服务端状态（React Query），明确其在中后台项目中的必要性，避免滥用 useEffect 请求。

2026-10-27 14:49:43 509

原创 React10：状态管理 Zustand

本课讲解 React 状态管理核心工具 Zustand，类比 Vue 的 Pinia，解决 props 钻井与 Context 重渲染问题。通过 create 创建类型安全的 store，state 与 actions 同层定义，支持细粒度 selector 订阅避免冗余渲染。可于组件外调用 getState()/setState()，结合 persist 中间件实现持久化。对比 Redux Toolkit，Zustand 更轻量、易用，成为企业新项目的首选状态管理方案。

2026-10-27 14:29:11 332

原创 React09：React Router 路由

本课系统讲解 React Router 路由核心用法：掌握组件式与对象式路由配置，理解布局路由与 <Outlet> 嵌套机制；熟练使用动态路由 :id 及 useParams 获取参数，配置 * 实现 404 兜底；通过 <Link>/<NavLink> 实现声明式导航，结合 useNavigate 实现编程式跳转（支持 push、replace、back）；利用 useSearchParams 管理查询参数；最后学习 React.lazy + <Suspense> 实现路由懒加载，并封装 <Require

2026-10-26 15:35:55 180

原创 React08：自定义 Hook

本课讲解自定义 Hook 的核心概念与实战应用：以 use 开头、内部调用内置 Hook，实现逻辑复用。强调两条规则——顶层调用与仅在函数组件/自定义 Hook 中使用，确保状态顺序稳定。手写企业常用 Hook：useToggle（状态切换）、useLocalStorage（持久化）、useDebounce（防抖值）、useFetch（请求三态），并掌握组合使用（如 useTodos 组合 useLocalStorage），遵循“底层管机制、上层管业务”原则。返回值设计兼顾对象与数组形式，结合 TypeSc

2026-10-26 14:36:57 435

原创 React07：性能优化三件套

React 性能优化核心在于理解“无自动依赖追踪”的心智模型：状态更新时，父组件全量重渲染，子组件默认也重执行。需通过 React.memo 做浅比较跳过无变化的子组件，但其效果依赖 props 引用稳定——必须配合 useCallback（锁函数）和 useMemo（锁对象/计算结果）确保引用不变。优化前先用渲染计数、日志与 Profiler 量化问题，优先做结构性优化（如状态下沉、key 设定），避免盲目加 memo。记住：90% 的组件无需优化，只有大列表、昂贵计算或高频更新场景才值得动刀。

2026-10-26 10:48:41 269

原创 React06：组件通信

本课梳理了React组件通信全景图：父传子用props，子传父用回调函数props（如onToggle），跨层通信用Context，兄弟组件通过状态提升，全局状态用Zustand等。重点掌握回调props实现子传父、Context三步法（createContext/Provider/useContext）、useImperativeHandle暴露方法，并强调“能用props就不用Context，能用Context就不滥用ref”的企业级选型原则。

2026-10-23 17:01:11 260

原创 React05：useEffect 与副作用

本课详解 React 的 useEffect 作为「挂载、监听、卸载」三合一的副作用处理机制，强调其与 Vue watch 的核心差异：useEffect 每次渲染后必执行一次，依赖数组需手动填写且使用浅比较。通过三形态依赖数组（不写、[]、[a,b]）掌握执行时机，理解清理函数在依赖变化和卸载时的双重触发机制。重点掌握企业级数据请求模式：三态管理（loading/error/data）与 ignore 标志防竞态，并依据官方“无需 effect”标准识别冗余代码，提升组件健壮性与可维护性。

2026-10-22 16:48:27 286

原创 React04：事件处理与受控表单

本课聚焦React事件处理与受控表单，替代Vue的@click和v-model。通过onClick驼峰绑定实现无参、带参及修饰符（.prevent/.stop）功能，强调避免onClick={func()}的陷阱；使用value + onChange模式构建受控组件，掌握ChangeEvent等类型标注规范；推广统一updateField模板管理多类型表单，区分受控与非受控场景（如文件上传），并遵循handleXxx命名约定，提升代码可维护性与团队协作效率。

2026-10-22 14:24:25 271

原创 React03：useState 与不可变更新

本课系统讲解 React 状态管理核心：useState 的使用规范与不可变更新原则。强调状态应通过 setXxx 函数式更新，避免直接修改；理解“快照”机制，连续更新需用函数式写法确保正确累加；掌握数组/对象必须创建新引用（如展开运算符、map/filter），否则视作无变化；了解批处理优化与 Object.is 判断导致的跳过渲染；最后明确派生数据应在渲染时直接计算，避免冗余状态维护，提升代码健壮性。

2026-10-22 10:51:45 301

原创 React02：组件与 Props

本课系统讲解 React 函数组件与 Props 的核心用法：组件即“props 进、JSX 出”的纯函数，首字母大写，通过接口定义类型；解构 + 默认值实现 withDefaults 效果，对象/数组默认值直接写 [] {}；children 对应默认插槽，传 JSX 为具名插槽，传函数为作用域插槽；使用 ReactNode、可选属性、联合类型进行类型约束；...rest 透传属性，遵循单向数据流——props 只读，修改需通过回调。

2026-10-21 17:01:59 307

原创 React01：JSX 与渲染心智模型

本课核心是掌握 JSX 的「模板即 JS」心智转变：不再依赖指令，直接用 JS 表达式渲染界面。通过对比 Vue 指令与 JSX 写法，掌握 v-if→&&/三目、v-for→map、class→className等无损转换。重点理解 {} 中仅支持表达式，null/false/undefined 不渲染但 0 会显示。条件渲染推荐四类写法：单分支用 &&，双分支用三目，复杂逻辑用变量承载或提前 return。列表渲染必须加 key，避免用 index 导致删除错乱。熟悉驼峰属性名（如 onClick、st

2026-10-21 16:12:13 377

原创 TypeScript 08：条件类型、infer 与手写工具类型

本文详解 TypeScript 条件类型、infer 与模板字面量，揭示工具类型底层原理。通过分发机制实现联合类型逐项处理，利用 infer 提取泛型参数，结合模板字符串构建精确类型约束。手写 Exclude、Pick、Record 等常用工具类型，掌握“约束→条件→infer→mapped”拆解逻辑，彻底理解类型系统无魔法本质。

2026-10-14 14:25:02 59

原创 TypeScript 07：工程化——import type、声明文件与 tsconfig

本文系统讲解 TypeScript 工程化核心：通过 import type 实现类型与值分离，避免运行时冗余；使用 .d.ts 声明文件让编译器“认识”外部模块；合理配置 tsconfig 的 strict 族选项（如 noImplicitAny、strictNullChecks）提升类型安全；结合 verbatimModuleSyntax 等选项，实现高效、健壮的类型管理。附高频报错速查，助力项目类型体系落地。

2026-10-14 10:17:05 348

原创 TypeScript 06：函数类型与四大特殊类型

本文详解 TypeScript 函数类型与四大特殊类型。函数类型由参数和返回值定义，支持复用与上下文推断；void 表示调用方不应使用返回值；函数重载可精确描述多组参数与返回类型；any 放弃检查，unknown 需收窄后使用，void 无有效返回值，never 表示永不返回。掌握这些类型有助于避免常见报错，提升代码安全性。

2026-10-13 16:54:27 680

原创 TypeScript 05：交叉类型、索引签名、元组与 enum

本文详解 TypeScript 中交叉类型 &、索引签名、元组与 enum 的用法。交叉类型实现类型合并，适用于扩展接口；索引签名用于动态键值对象，需注意 undefined 安全性；元组支持定长定序，标签元组提升可读性；推荐用 as const 对象替代 enum，实现类型安全且可剥离。附高频报错解析，助快速定位问题。

2026-10-13 16:36:04 319

原创 TypeScript 04：类型断言与类型守卫

本文讲解 TypeScript 中类型断言与类型守卫的使用场景。通过 as、! 进行断言，快速传递额外知识，但需谨慎；is 函数将验证逻辑封装为可复用的类型守卫，实现安全收窄；never 用于穷尽检查，确保分支全覆盖；satisfies 在保留精确类型的同时验证结构，适合配置类数据。核心原则：边界可用断言，内部优先使用类型守卫，保障类型系统的可靠性。

2026-10-13 16:06:59 158

原创 TypeScript 03：泛型与工具类型

本文介绍 TypeScript 泛型与工具类型：泛型通过类型参数实现复用与精确类型控制，避免 any 带来的类型丢失；通过 extends 约束确保类型具备特定能力；keyof 提取字段名联合类型；内置工具类型如 Partial、Pick、Omit、Record 等用于类型变换，本质是泛型结合字段遍历；typeof 与 ReturnType 可从函数提取返回类型，提升开发效率。

2026-10-13 10:39:33 222

原创 TypeScript 02：interface、type 与类型收窄

本文系统讲解 TypeScript 中 interface 与 type 的区别与使用场景，强调对象形状用 interface，联合/字面量类型用 type。重点介绍可选属性、只读字段、字面量类型及 as const 的作用。核心在于类型收窄：处理联合类型前必须通过 typeof、in 或值比较等方式缩小范围，确保类型安全。同时推荐使用 unknown 替代 any，强制收窄后再操作，提升代码健壮性。附高频报错速查表，助快速定位问题。

2026-10-13 10:06:39 122

原创 TypeScript 01：类型注解与类型推断

TypeScript 在 JavaScript 基础上引入类型系统，实现编译时类型检查，提前捕获运行时错误。通过类型注解（如 let age: number）和类型推断（如 let price = 99），可精准定义变量、数组、对象与函数类型。联合类型（string | number）支持多类型兼容，而 any 虽灵活但应慎用，推荐使用更安全的 unknown。掌握常见报错（如类型不匹配、字段缺失、参数数量不符）有助于快速定位问题，提升代码健壮性。

2026-10-12 15:59:07 161

原创基于 qiankun 的应用间页面跳转

微前端架构中的路由委托方案本文提出了一种基于控制反转（IoC）模式的微前端路由解决方案。在Vue3+qiankun架构中，通过主应用将路由能力注入微应用，解决微前端环境下的路由碎片化问题。主应用作为IoC容器，封装路由能力并通过props注入微应用，提供两种实现方式：封装导航方法（mainNavigate）或直接暴露路由实例（mainRouter）。方案支持统一拦截处理权限校验、埋点等逻辑，同时兼容多种入口路径和全局状态共享。相比传统路由方案，该委托模式实现了主微应用间的解耦，保持了无缝跳转体验和状态一致

2026-03-19 11:38:40 419

原创 Claude 结合 spec-kit 使用指南

Spec-Kit 是一个 GitHub 开源工具包，支持规格驱动开发（Spec-Driven Development），通过与 AI 编码工具集成提升代码质量。它解决了传统 AI 编码中"氛围编码"、流程不规范和质量不一致的问题，提供四阶段工作流：规格化→规划→任务分解→实现，并强制测试驱动开发（TDD）。安装需通过 uv 工具或手动克隆仓库，支持新项目和现有项目初始化。核心功能包括制定项目宪章、定义需求、生成技术方案、分解任务和执行代码生成。主要命令以/speckit.开头，如/spe

2026-03-11 14:22:52 1984

原创 Qiankun 生命周期与数据通信实战

微前端架构通过主应用集成多个独立子应用，实现模块化开发和独立部署。本文分析了基于qiankun框架的实现方案：1）主应用通过regMicroAllApp注册子应用配置，包括入口、激活规则等；2）采用双层路由体系，主应用控制子应用加载，子应用管理内部路由；3）通过生命周期管理子应用的挂载/卸载；4）提供props传递和全局状态管理两种通信方式。该方案实现了应用隔离、状态同步等核心功能，为大型前端系统提供可扩展的架构支持。

2026-01-14 18:09:07 932

原创 Vue 项目 JSON 在线编辑、校验如何选？

摘要：本文对比了四种JSON编辑方案，重点推荐svelte-jsoneditor方案。该方案支持可视化编辑、格式化、JSON Schema校验等功能，通过动态生成结构模板实现字段锁定。文中提供了Vue3实现代码，包含数据加载、Schema生成、编辑器初始化和保存校验等核心逻辑。其他方案如vue-json-pretty功能较弱，vue-json-editor和vue3-json-editor存在中文输入问题。

2025-09-29 15:09:08 2050

原创 Echarts -- ZRender 源码分析

ZRender是ECharts的底层2D图形绘制引擎，支持Canvas/SVG/VML三种渲染方式（5.0版本已放弃VML）。它采用MVC架构设计：数据层（Storage）管理图形数据及缓存视图层（PainterBase）提供基础绘制能力控制层（Handler）处理用户交互事件核心模块包括动画管理、工具类、图形对象及其辅助算法。源码结构清晰，包含图形元素基类、渲染器实现、事件代理等核心组件。入口文件zrender.ts提供实例管理接口，支持初始化、删除、注销等操作，并可扩展自定义渲染器。该系统实现了

2025-08-18 11:46:57 1035

原创 nginx实战分析

本文介绍了Nginx的下载安装、配置说明及常用命令。主要内容包括：Windows环境下Nginx的安装启动方法；Nginx目录结构及各配置文件功能说明（如conf、logs、html等文件夹）；详细解析了nginx.conf文件的全局块、events块、http块、server块和location块的结构与作用；提供多个配置示例；最后列举了常用的Nginx操作命令，如reload、stop、quit等，并简要说明静态资源部署方法。文章可作为Nginx入门使用指南。

2025-08-15 11:31:15 1227

原创 Vue中v-if为何报属性undefined的错

Vue中v-if指令遇到dataForm.unknowData.version报错的原因是当unknowData为undefined/null时访问其version属性会抛出TypeError。解决方案包括：1)初始化时确保数据存在；2)使用&&运算符检查dataForm.unknowData && dataForm.unknowData.version；3)在Vue3中使用可选链操作符dataForm.unknowData?.version。这些方法都能有效避免访问未定义对

2025-08-07 10:16:52 696

原创 Webpack 搭建 Vue3 脚手架详细步骤

本文介绍了如何使用Webpack和Vue3搭建前端项目。首先通过npm初始化项目并安装Vue、Webpack及相关依赖，然后创建项目结构包括Vue组件、入口文件和HTML模板。接着配置Webpack处理Vue文件、JavaScript、CSS和图片资源，并设置开发服务器。最后添加构建脚本，可通过npm run dev启动开发服务器或npm run build生成生产环境代码。整个过程涵盖了从项目初始化到开发构建的完整流程，为Vue3项目提供了基础配置方案。

2025-08-04 14:48:42 795

原创 Vite基本概念及实现原理

Vite是一款基于原生ESM的前端构建工具，由开发服务器和构建指令两部分组成。其核心优势在于极速冷启动和高效热更新(HMR)，通过原生ESM支持实现按需编译，开发速度比传统打包工具快数倍。实现原理上，Vite利用浏览器原生ESM特性动态加载模块，使用Rollup进行生产环境打包，并通过WebSocket实现实时热更新。服务器启动后会解析请求、转换模块并监听文件变化，当文件修改时通过HMR机制局部更新而无需刷新页面。这种架构使Vite在项目规模增大时仍能保持快速构建。

2025-07-30 11:35:55 1063

原创 Webpack基本概念及核心流程

Webpack是一个现代JavaScript应用的静态模块打包工具，它通过构建依赖关系图将各种资源（如JS、CSS、图片等）打包成静态文件。核心功能包括模块打包、依赖管理、文件转换、代码拆分和插件扩展。Webpack工作流程分为三个阶段：初始化阶段（参数处理、创建编译器）、构建阶段（递归解析依赖，调用loader转译模块）和生成阶段（输出打包结果）。通过配置entry、output、loader、plugin等选项，Webpack可以实现高效的资源管理和优化，支持多种文件类型的转换和按需加载，大大提升了前端

2025-07-29 10:59:39 943

空空如也

空空如也