- 博客(48)
- 收藏
- 关注
RSS订阅原创 Nest-管道
NestJS 管道与验证机制解析 NestJS 的管道（Pipe）是一种强大的预处理机制，主要用于控制器方法执行前的数据验证和转换。管道通过实现 PipeTransform 接口，可以在请求到达控制器前对输入数据进行处理。 核心功能 数据验证：自动验证输入数据，不符合规则时直接抛出异常 数据转换：将输入数据转换为所需格式（如字符串转数字、普通对象转DTO实例） 内置管道 Nest 提供多个开箱即用的管道： ParseIntPipe：字符串转整数 ValidationPipe：结合 class-validat
2025-12-10 17:55:06
736
原创 LINQ语法
LINQ（Language Integrated Query）是.NET框架中的查询技术，提供两种语法形式：类SQL的查询语法和使用Lambda表达式的方法语法。核心功能包括数据筛选（Where/OfType）、投影（Select/SelectMany）、排序（OrderBy/ThenBy）、分组（GroupBy）、连接（Join/GroupJoin）、集合操作（Distinct/Union）、分页（Skip/Take）、聚合（Sum/Average）以及类型转换（Cast/ToArray）等。LINQ支持
2025-12-04 16:16:08
717
原创 学习React-27-导航
React Router导航功能摘要（149字）： React Router提供多种导航方式：1）Link组件生成<a>标签，支持to/replace/state等参数控制跳转行为；2）NavLink可自动高亮匹配路由，支持active/pending状态样式控制；3）useNavigate钩子实现编程式导航，支持路径跳转、历史记录操作和状态传递；4）redirect用于权限路由跳转，v6推荐在loader中返回redirect()；5）通配路由"*"处理404页面。关键特性
2025-11-25 17:45:16
803
原创 学习React-26-路由操作(loader&action)
React Router v6.4+引入了loader和action作为数据路由的核心功能。loader用于路由渲染前异步加载数据，通过useLoaderData访问返回数据；action处理路由级数据提交，常与<Form>组件配合。两者都支持异步操作，loader在路由匹配后执行，action处理表单提交。典型流程：页面加载触发loader，用户交互触发action，完成后重新调用loader更新数据。需注意返回可序列化数据，配合错误处理机制使用。
2025-11-25 16:30:12
372
原创 学习React-25-路由懒加载
本文介绍了React Router中的懒加载和useNavigation两大核心功能。懒加载通过React.lazy()和Suspense实现路由组件按需加载，优化首屏性能，并详细说明了其实现方法和注意事项。useNavigation钩子则用于获取导航状态（idle/loading/submitting）和编程式导航，提供了优化用户体验的方案，包括加载状态提示的实现。文章通过代码示例和效果演示，展示了如何在项目中应用这些技术，同时强调了版本兼容性和使用限制等关键点。
2025-11-24 14:43:22
583
原创 学习React-24-路由传参
本文介绍了React Router中三种传递参数的方式： 动态路由（useParams）：通过URL路径传参，如/user/123，适合RESTful路由参数 查询字符串（useSearchParams）：通过URL查询参数传参，如/search?keyword=react，适合筛选、分页等场景 状态传递（state）：通过路由状态对象传参，不暴露在URL中，但刷新后会丢失，适合临时数据传递 三种方式在URL暴露性和刷新保留性上各有特点，可根据具体场景选择使用。
2025-11-24 11:44:23
273
原创 学习React-23-React-router
React Router v7 整合了原先拆分的包，只需安装 react-router。演示了基本路由配置和四种路由模式（BrowserRouter、HashRouter、MemoryRouter、StaticRouter）的特点及适用场景。详细介绍了嵌套路由、布局路由和索引路由的实现方式，包括子路由占位符<Outlet />的使用和懒加载优化建议。提供了从基础配置到高级用法的完整路由解决方案，适用于不同项目需求。
2025-11-22 17:59:49
586
原创 学习React-22-Zustand
Zustand 是一个轻量级 React 状态管理库，提供简洁的 Hook API 和高效性能。其核心特性包括极简的 store 创建方式（create 函数）、无需 Provider 嵌套、自动渲染优化以及中间件支持（如 immer 实现不可变状态、persist 数据持久化）。通过 useShallow 可优化多状态选择时的渲染性能。相比 Redux，Zustand 更适合中小项目，以更简单的代码实现全局状态管理。安装使用方便（npm install zustand），支持 TypeScript 类型推
2025-11-20 13:03:41
733
原创 Docker核心概念与实战指南
Docker是一种轻量级的容器化技术，通过共享宿主机内核实现高效资源利用，相比虚拟机具有启动快、占用小等优势。其核心组件包括镜像（只读模板）、容器（运行实例）和仓库（镜像存储中心）。安装方式支持Linux（原生最佳）、Windows（需WSL）和Mac系统，主要通过命令行操作。常用命令包括镜像管理（pull/images/rmi）、容器管理（run/stop/ps）等，支持端口映射(-p)、后台运行(-d)等参数配置。Docker Hub是官方镜像仓库，可通过配置镜像站解决网络问题，同时需注意不同CPU架构
2025-11-10 17:06:18
788
1
原创 学习React-21-受控组件&非受控组件
在React中，表单处理分为受控组件和非受控组件。受控组件通过state和onChange事件实时控制表单值，适合需要即时反馈和验证的场景，但可能影响性能。非受控组件由DOM管理数据，通过ref在提交时获取值，性能更优但实时性差。开发中应根据需求选择：复杂交互用受控组件，简单表单用非受控组件。示例代码展示了两种实现方式。
2025-10-21 15:29:44
443
原创 学习React-20-useId
useId 是 React 18 新增的 Hook，用于生成唯一且稳定的 ID，主要解决服务端与客户端渲染时 ID 不匹配的问题。它适用于表单元素和无障碍访问场景，可通过拼接字符串为多个关联元素生成 ID。注意：生成的 ID 含特殊字符，不适合直接用于 CSS 选择器；也不应替代列表 key。相比传统手动生成 ID 的方式，useId 确保了跨环境一致性，但需要 React 18+ 支持。
2025-09-29 12:02:14
368
原创 学习React-19-useDebugValue
useDebugValue是React Hooks提供的调试工具，用于在开发者工具中为自定义Hook添加调试标签。它接受两个参数：要展示的值和可选的格式化函数。该Hook主要用于提升自定义Hook的可读性和调试体验，特别是对复杂状态的可视化。使用时需注意：仅适用于自定义Hook，生产环境无影响，且应避免滥用以免干扰开发者工具。配合React Developer Tools使用效果更佳，该工具可通过浏览器扩展商店安装。
2025-09-29 11:54:08
388
原创 学习React-18-useCallBack
React 的 useCallback Hook 用于缓存函数实例，优化性能。它通过依赖项控制函数重建，避免子组件不必要的渲染。适用于函数作为 props 传递或依赖函数引用的场景。需正确设置依赖项，避免闭包问题。通常与 React.memo 配合使用，但要注意避免过度优化。通过对比可见，合理使用能有效减少渲染次数，提升性能。其核心是保持函数地址稳定，而非阻止函数重建。
2025-09-29 09:59:17
566
原创 学习React-17-useMemo
React.memo和useMemo是React中两大性能优化工具。React.memo通过浅比较props避免不必要的组件渲染，适合纯展示型组件；useMemo则通过缓存计算结果优化高开销运算，需配合依赖项使用。二者都可减少重复渲染，但需注意：React.memo仅比较props，useMemo要避免过度使用。典型应用场景包括复杂计算、频繁更新的子组件和引用类型数据缓存。合理使用这些API能有效提升应用性能，但需平衡优化收益与比较开销。
2025-09-26 15:15:47
1011
原创 学习React-16-useContext
摘要：useContext是React Hooks中用于访问Context的API，可避免组件树中逐层传递props。通过React.createContext创建上下文，用Provider提供值，在子组件中用useContext获取。示例展示了主题切换的实现，并说明多Context使用、性能优化（如useMemo）及注意事项（如避免内联对象导致的重复渲染）。React19中已简化Provider语法。
2025-09-24 15:45:43
277
原创 学习React-15-useImperativeHandle
useImperativeHandle 是 React 的一个 Hook，用于自定义子组件向父组件暴露的 ref 属性和方法。它通常与 forwardRef 配合使用，可限制父组件仅能访问指定的实例方法或数据，增强封装性。 核心功能： 通过 createHandle 函数返回需要暴露的对象 依赖项数组控制何时重新计算暴露内容 典型应用场景： 表单校验（父组件调用子组件的提交/重置方法） 封装第三方库时隐藏底层细节 性能优化（避免父组件直接操作子组件DOM） 示例展示了父子组件联动：子组件通过 useImpe
2025-09-23 14:51:08
506
原创 Cordova打包Vue项目成APK——真机调试
Apache Cordova 是一个开源移动开发框架，允许使用HTML/CSS/JS构建跨平台应用。本文详细介绍了Cordova的安装配置及APK打包流程： 环境准备： 安装Node.js和Cordova CLI 配置Java JDK、Android SDK和Gradle 设置ANDROID_HOME等环境变量 项目创建： 使用cordova create命令初始化项目 添加Android平台支持 打包流程： 修改Vue项目的publicPath配置 执行npm run build打包前端资源 将生成文件复
2025-09-20 17:18:10
833
原创 学习React-14-useRef
本文介绍了React中的useRef Hook及其用法。useRef用于创建可变引用对象，在组件生命周期内保持不变，不会触发重新渲染。主要用途包括访问DOM节点和存储可变值。文章通过代码示例展示了基本语法、访问DOM节点、数据存储和计时器案例的两种实现方式（不使用和使用useRef），并对比了效果差异。最后总结了useRef的注意事项：不会随渲染重新初始化、修改不会触发渲染、不能作为hooks依赖项、不能直接获取子组件实例。这些知识点帮助开发者正确理解和使用useRef。
2025-09-18 10:48:09
433
2
原创 学习React-13-useLayoutEffect
摘要： useLayoutEffect是React中用于同步DOM操作的Hook，在浏览器绘制前执行，适合测量布局或防止UI闪烁。与useEffect（异步执行）不同，它会阻塞渲染，适用于需要即时DOM更新的场景，如定位元素、动画初始化等。文中通过对比实验展示了二者的差异：useLayoutEffect会同步处理大量状态更新导致渲染延迟，而useEffect则保持流畅；动画案例中，useLayoutEffect因同步执行导致动画失效。典型应用包括滚动位置恢复、防闪烁调整等，并提供了滚动条记忆的代码示例。使用
2025-09-17 18:02:40
1037
原创 学习React-12-useEffect
本文介绍了纯函数与副函数的区别，重点讲解了React中的useEffect Hook。纯函数具有确定性输出且无副作用，而副函数会修改外部状态或进行I/O操作。useEffect用于管理组件的副作用，其基本用法包含一个effect函数和可选的依赖数组。文章展示了三种使用模式：无依赖（每次渲染后执行）、空依赖（挂载后执行一次）和指定依赖（变量变化时执行）。通过用户信息查询的案例，演示了useEffect的实际应用。最后强调了注意事项：effect异步执行、清理函数调用、避免死循环、正确填写依赖数组，以及Reac
2025-09-15 10:37:10
317
原创 学习React-11-useDeferredValue
React 18的useDeferredValue是一个性能优化Hook，用于延迟非关键内容更新。它会返回状态的延迟版本，在高优先级任务（如用户输入）完成后才更新，适用于输入联想搜索、大数据列表等场景。与useTransition不同，它处理的是被动接收的值而非主动发起的更新。示例展示了如何用它延迟搜索结果的渲染，通过比较原始值和延迟值可显示加载状态。该Hook与并发模式配合，能有效提升交互流畅性。
2025-09-10 16:39:33
507
原创 学习React-10-useTransition
本文介绍了React的useTransition Hook及其应用场景。useTransition用于标记非紧急状态更新，在并发模式下延迟渲染以避免阻塞高优先级交互。它返回isPending标志和startTransition函数，适用于优化渲染性能（如大型列表筛选）和提升用户输入响应。文章通过搜索列表组件示例展示了具体用法，包括API请求封装和列表更新优化。同时指出了两个常见错误：滥用useTransition包裹所有更新以及忽略isPending状态导致用户无法感知过渡状态。示例代码展示了如何正确使用m
2025-09-10 15:07:26
348
原创 学习React-9-useSyncExternalStore
useSyncExternalStore是React 18新增的Hook，用于安全同步外部数据源（如localStorage、Redux、全局变量等）到组件内部，支持并发渲染。它通过subscribe订阅数据变化、getSnapshot获取当前状态快照，并可选的getServerSnapshot处理SSR场景。相比传统useState/useEffect方案，它更安全高效，能避免并发模式和SSR下的常见问题。文章还展示了两个实用案例：实现跨标签页同步的useStorageHook和监听URL变化的useHi
2025-09-03 15:46:53
426
原创 学习React-8-useImmer
useImmer是基于Immer的React Hook，允许以可变方式处理不可变数据。它通过Proxy拦截修改操作，自动生成新对象，保持React不可变性原则。相比原生useState，useImmer简化了嵌套数据的更新（如draft.x.y=z），减少样板代码，但需额外安装。示例展示了对象、数组和reducer的操作方式，对比表格显示useImmer在复杂场景更优，而简单操作稍慢。适合需要频繁更新深层状态或大型对象的场景。
2025-09-02 15:25:31
380
原创 网络通信常见响应码
HTTP和FTP错误代码分类解析：HTTP包含2xx成功(200 OK)、3xx重定向(301)、4xx客户端错误(400/404)、5xx服务器错误(500/503)；FTP包含2xx成功(200/226)、3xx中间响应(331)、4xx/5xx错误(421/530/550)，分别表示服务不可用、登录失败、文件权限等问题。这些状态码帮助开发者快速定位网络请求问题。
2025-08-28 14:49:45
431
原创 学习React-7-useReducer
本文介绍了React中的useReducer钩子，它用于集中式管理组件状态，适合处理复杂数据类型。文章首先说明了useReducer的基本用法，包括引入、定义方式及其参数说明（操作函数、初始值和可选初始化函数）。然后通过计数器示例展示了useReducer的实际应用，包括状态更新和派发操作。最后重点演示了一个购物车案例，完整实现了商品增删改查、数量调整和总额计算等功能，并提供了TypeScript类型定义和CSS样式。该案例体现了useReducer在管理复杂状态时的优势，遵循了React的不可变原则和组件
2025-08-27 16:18:21
221
原创 学习React-6-useState
React useState 状态管理摘要 useState 是 React Hooks 的核心 API，用于函数组件中的局部状态管理。
2025-08-25 15:54:13
432
原创 委托&事件
本文介绍了C#中的委托(delegate)和事件(event)机制。委托是一种引用类型，类似于函数指针，可用于实现回调方法和事件处理。通过快递派送的生动例子，展示了如何定义委托类型、创建委托实例，并通过委托调用方法。事件机制则通过智能温控器的案例，演示了如何定义事件、订阅事件以及触发事件。最后还展示了委托与事件结合的经典用法，说明发布器类如何通过委托类型事件通知订阅器类。这些机制实现了程序的解耦，使对象间的交互更加灵活高效。
2025-08-13 15:45:36
421
原创 VsCode 配置C#调试工具
本文介绍了在VS Code中配置.NET开发环境的步骤。首先需要安装三个核心插件：.NET Install Tool、C#语言服务和C# Dev Kit，分别负责SDK安装、基础开发功能和高级开发工具。接着详细说明了如何配置调试文档launch.json，包括调试器类型、程序路径、工作目录等关键参数设置，并提供了完整的JSON配置示例。通过图文结合的方式展示了配置文件生成和编辑过程，帮助开发者快速搭建.NET调试环境。
2025-08-13 10:33:19
456
原创 学习React-4-组件
什么是组件就不赘述了。一句话来说一个可以单独拎出来的功能、模块都可以是组件，一个页面也可以作为组件。这样就可以实现在任何页面无需引入就可以直接使用。在 App.tsx 中使用。在main.tsx中引入。
2025-08-06 11:07:55
215
原创 CryptoJs加解密
CryptoJS是一个JavaScript的加解密的工具包。它支持多种算法：MD5、SHA1、SHA2、SHA3、RIPEMD-160 的哈希散列，以及进行 AES、DES、Rabbit、RC4、Triple DES 加解密。定义自己的格式，以便与其他加密实现兼容。format有两个对象方法stringify和parse，在CipherParams对象和密文字符串之间进行转换。// 创建ciphertext对象//可选添加 iv 和 salt// 转换成json字符串},
2025-07-31 18:02:53
1116
原创 学习React-2-TSX语法
JSX 是一种 JavaScript 的语法扩展，结合了 JavaScript 的灵活性和 XML 的直观性。它常用于 React 和 Vue 等框架中，用于描述用户界面。JSX 的核心特点是将 HTML 结构嵌入到 JavaScript 中，使代码更具可读性和可维护性。TSX和JSX并无二至,只不过丰富了一下语法.
2025-07-21 11:21:06
312
原创 学习React-1-简介
React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。React 中文文档。
2025-07-16 16:28:58
315
原创 动态创建SVG元素添加到指定位置
神奇的函数来在指定位置创建一个小按钮。小按钮会绑定一个弹出框的方法，点击时会打开弹出框提供数据。需求：当支付方式为预收款账户时，右侧输入金额列需要添加一个可以选择预收款单据金额的小按钮。思路： 当选择支付方式的时候进行判断，如果时预收款，则调用。
2024-08-01 16:08:09
416
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人