- 博客(89)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 react-transition-group 让你的 React 应用拥有流畅优雅的页面过渡效果
React页面过渡效果库提供10+精心设计的动画效果，包括滑入、3D翻转等基础与特殊过渡，支持移动端优化。基于ReactTransitionGroup实现，提供简单API和CSS变量自定义功能。最佳实践建议根据场景选择适当效果，并注意性能优化与用户体验平衡。
2025-06-12 00:17:14
826
原创 触摸滑动交互插件——Swiper.js React Demo实现
一个基于 React.js 和 Tailwind CSS 的 Swiper 组件演示项目，包含了 Swiper 的所有主要功能和效果的完整实现。Swiper 是一款专注于移动端触摸滑动交互的开源插件 ，提供轮播图、画廊、内容切换等功能，具有高性能、多特效、跨平台兼容和易定制化特点。支持 JavaScript 原生实现与 CSS 滚动吸附两种技术路径，适用于网页开发中的动态内容展示场景。
2025-06-09 21:00:50
1481
原创 大前端扫地僧之必备技能Zod
Zod作为一个现代的模式验证与类型推导工具，具有以下优势，使其成为前端进阶必备的工具：与TypeScript无缝集成：Zod允许在定义模式的同时自动生成TypeScript类型，无需重复定义数据结构。运行时验证：TypeScript只能在编译时检查类型，而Zod可以在运行时验证实际数据的正确性，避免潜在的错误。轻量且直观：相比其他工具（如Yup和AJV），Zod的API更加简洁，无需学习复杂的JSON Schema。功能强大：Zod支持嵌套结构、自定义验证、多种数据类型以及异步验证，几乎可以满足所
2024-12-07 23:26:52
1841
原创 nuxt3-admin-template一款基于Nuxt3、Vue 3的新一代管理后台模板，支持服务器端渲染 (SSR) 功能
nuxt3-admin-template 是一款基于Nuxt3、Vue 3的新一代管理后台模板，旨在为开发者提供一个快速、易用的开发框架。无论你是前端新手还是资深开发者，nuxt3-admin-template 都能帮助你快速搭建起一个功能完善、性能优越的管理后台系统。
2024-11-27 16:54:50
1168
7
原创 beautiful-react-hooks库——入门实践常用hook详解
Beautiful-react-hooks是一个高质量的React自定义Hooks集合，提供了事件处理、状态管理、生命周期控制等20+实用Hook。主要特性包括：useToggle实现状态切换、usePreviousValue记录历史值、useValidatedState带验证的状态管理、useLocalStorage持久化存储等。该库通过简洁API简化组件开发，支持防抖节流、暗黑模式、网络状态检测等常见需求，大幅提升代码复用性和开发效率。安装简单，文档完善，是React开发者提升开发体验的高效工具。
2025-07-16 22:25:42
227
原创 React Hooks 数据请求库——SWR使用详解
SWR是Vercel推出的React数据请求库，基于HTTP缓存策略实现高效数据获取和自动更新。核心功能包括：自动缓存/请求去重、实时数据更新（轮询/焦点刷新）、灵活错误处理和加载状态管理。支持RESTful/GraphQL等多种数据源，提供useSWR基础Hook和useSWRInfinite分页功能。通过mutate手动触发请求，配置选项可自定义刷新间隔、错误重试等行为。SWR作为前端缓存工具，与后端API配合实现数据库交互，显著提升用户体验。
2025-07-16 17:18:04
404
原创 React强大且灵活hooks库——ahooks入门实践之开发调试类hook（dev）详解
ahooks是一个实用的React Hooks库，提供开发调试类hooks帮助优化React应用。其中useTrackedEffect可追踪副作用执行和依赖变化，useWhyDidYouUpdate分析组件重渲染原因。本文通过代码示例展示了这两个核心hooks的用法，并演示了如何组合使用它们进行高效调试。这些工具能显著提升开发效率，是React项目调试的实用选择。
2025-07-15 10:16:52
207
原创 React强大且灵活hooks库——ahooks入门实践之高级类hook（advanced）详解
ahooks是一个高效的React Hooks库，其中高级类hooks专门处理复杂场景。主要包括：useControllableValue（受控值管理）、useCreation（稳定值创建）、useEventEmitter（组件通信）、useIsomorphicLayoutEffect（同构副作用）、useLatest（最新值引用）、useMemoizedFn（记忆化函数）和useReactive（响应式状态）。这些hooks显著提升了React开发效率，特别适合处理性能优化、状态管理和跨组件通信等高级需求
2025-07-15 10:14:42
437
原创 React强大且灵活hooks库——ahooks入门实践之DOM类hook（dom）详解
ahooks是一个强大的React Hooks库，提供了丰富的自定义hooks来简化开发。其中DOM类hooks特别实用，包含20多种处理DOM操作的功能，如事件监听(useEventListener)、元素检测(useInViewport)、拖拽交互(useDrag/useDrop)、响应式布局(useResponsive)等。这些hooks封装了常见DOM操作逻辑，开发者只需简单调用即可实现复杂功能，如useFullscreen可轻松控制全屏状态，useMutationObserver能监听DOM变化。
2025-07-14 10:39:02
645
原创 React强大且灵活hooks库——ahooks入门实践之副作用类hook（effect）详解
ahooks是一个强大的React Hooks库，提供了多种实用的副作用处理Hooks。本文重点介绍了ahooks中的副作用类Hooks，包括useUpdateEffect（更新时执行副作用）、useAsyncEffect（处理异步操作）、useDebounceEffect（防抖处理）、useThrottleEffect（节流处理）等，每种Hooks都配有详细的代码示例和使用场景说明。这些Hooks能有效优化React应用性能，简化开发流程，是React开发者提升开发效率的利器。
2025-07-14 10:35:30
815
原创 React强大且灵活hooks库——ahooks入门实践之状态管理类hook（state）详解
ahooks是一个实用的React Hooks库，提供多种状态管理hooks。主要功能包括：对象状态管理(useSetState)、布尔值管理(useBoolean)、值切换(useToggle)、URL同步(useUrlState)、存储管理(useCookieState/localStorage/sessionStorage)、防抖节流(useDebounce/useThrottle)、集合管理(useMap/useSet)等。这些hooks简化了React状态管理，提升了开发效率。文章详细介绍了15种
2025-07-13 15:31:50
526
原创 React强大且灵活hooks库——ahooks入门实践之生命周期类hook（lifecycle）详解
ahooks是一个实用的React Hooks库，其中生命周期类hooks是其核心功能之一。主要包括：useMount(组件挂载时执行操作)、useUnmount(组件卸载时清理资源)和useUnmountedRef(检测组件是否卸载)。这些hooks简化了组件生命周期管理，可有效处理数据加载、事件监听、异步操作等场景。通过示例代码展示了如何在实际开发中应用这些hooks，并提供了使用场景说明和速查表。ahooks的生命周期hooks能帮助开发者更高效地构建React应用，避免常见的内存泄漏和状态更新问题。
2025-07-13 14:51:54
268
原创 React强大且灵活hooks库——ahooks入门实践之场景类（scene）hook详解
ahooks是一个实用的React Hooks库，提供了多种场景类hooks简化开发。主要功能包括：表格集成（useAntdTable/useFusionTable）、无限滚动（useInfiniteScroll）、分页管理（usePagination）、动态列表（useDynamicList）、虚拟列表（useVirtualList）等数据交互功能；历史记录（useHistoryTravel）、网络状态（useNetwork）、多选管理（useSelections）等状态管理功能；以及倒计时（useCou
2025-07-13 14:17:31
440
原创 React强大且灵活hooks库——ahooks入门实践之常用场景hook
ahooks是一个React Hooks库，提供丰富的自定义hooks解决特定业务场景问题。核心场景类hooks包括：useRequest处理异步请求（支持轮询、防抖、缓存），useAntdTable简化表格表单联动，useLocalStorageState实现状态持久化，以及生命周期管理、事件监听、性能优化等实用hooks。这些hooks显著提升React开发效率，简化复杂逻辑，优化用户体验。ahooks还提供虚拟列表、网络状态监听、主题管理等特色功能，是React开发者必备的高效工具集。
2025-07-13 11:43:54
790
原创 React强大且灵活hooks库——ahooks入门实践介绍
《ahooks：高效的React Hooks工具库》摘要 ahooks是一个功能丰富的React Hooks库，提供80+开箱即用的自定义Hooks，覆盖状态管理、网络请求、DOM操作等场景。核心特点包括：完整的TypeScript支持、轻量级设计（支持Tree Shaking）、简洁的API和活跃的社区维护。典型Hooks如： useRequest：智能化网络请求管理 useSetState：对象状态便捷操作 useClickAway：点击外部区域关闭组件 useSize：监听DOM尺寸变化 useLoc
2025-07-13 00:39:47
441
原创 React 实现五子棋人机对战小游戏
基于React+Vite+TailwindCSS的五子棋人机对战游戏，具有以下特点：1)支持易、中、难三种AI难度，采用启发式评分与邻域搜索算法；2)自适应棋盘，最大支持20×20规格；3)纯前端实现，界面美观，采用SVG绘制棋盘，棋子具有立体感；4)包含胜负判定、回合管理等功能。项目适用于前端展示、算法教学及休闲娱乐，提供完整React状态管理方案和AI算法实现细节。
2025-07-10 18:20:29
590
原创 React 自定义Hook——页面或元素滚动到底部监听 Hook
useReachBottom是一个React自定义Hook，用于监听页面或元素滚动到底部事件。它支持监听body或任意滚动容器，提供兼容性处理、偏移量设置等功能，适用于无限加载、底部提示等场景。该Hook无需第三方依赖，通过简单API返回布尔值判断是否到达底部。文章包含使用示例和完整源码，展示了如何监听页面和特定div的滚动到底部状态。源码实现了scroll事件监听和位置计算逻辑，具有通用性强、易用性高等特点。
2025-07-10 15:35:12
471
原创 H3初识——入门介绍之事件处理器
H3是一个轻量级Node.js框架，其核心是事件处理器机制。事件处理器是接收H3Event并返回响应的函数，支持多种处理方式：1)基础用法通过defineHandler定义简单响应；2)获取请求参数和请求体分别使用getQuery和readBody方法；3)对象语法支持中间件和元数据配置；4)特殊处理器包括延迟处理器(defineLazyEventHandler)和适配器(fromWebHandler/fromNodeHandler)用于兼容不同风格的处理器。
2025-07-09 22:38:37
116
原创 React 快乐记单词——儿童英语拼写游戏
《快乐记单词》是一款专为3-8岁儿童设计的英语拼写学习游戏，采用React18+Vite技术栈开发。核心功能包括：1）互动拼写系统，支持点击字母完成单词组合；2）语音播放功能，点击中文释义可听标准发音；3）智能反馈机制，实时验证答案并给予鼓励性评价；4）多主题词库，涵盖水果、动物、颜色等8类生活词汇；5）游戏化设计，包含倒计时动画、成就系统等趣味元素。该应用特色在于：响应式布局适配多设备、60fps流畅动画、离线可用，通过粉色/蓝色为主的可爱界面和水果动物装饰元素，营造轻松学习氛围。
2025-07-09 09:13:44
1601
原创 H3初识——入门介绍之常用中间件
H3是Nuxt3和Nitro的核心HTTP框架，提供高效中间件机制。中间件在请求到达前执行，用于认证、日志等通用逻辑。特点包括：极简API、高性能、灵活组合、类型安全、与Nuxt/Nitro深度集成。示例展示了日志记录、响应时间统计、CORS处理、IP限制等常见应用场景。通过app.use()注册中间件，支持按路径条件使用，能实现请求预处理、缓存、国际化等功能。H3中间件机制简洁高效，是构建现代Node.js应用的理想选择。
2025-07-08 19:06:06
400
原创 H3初识——入门介绍之路由、路由元数据
H3是一个高性能的Node.js路由系统，支持GET/POST/ALL/ANY等多种HTTP方法，提供动态参数、通配符路由和中间件功能。通过路由元数据(meta)可实现权限控制等功能示例展示了基础路由定义、参数获取以及结合中间件的授权验证方案。H3灵活的路由机制适用于现代Web开发，文档详细且易于上手。
2025-07-07 23:15:38
151
原创 H3初识——入门介绍之serveStatic、cookie
H3是一个基于现代JavaScript标准的轻量级服务器框架，具有极简、快速和无依赖的特点。它直接使用Web标准原语（如Request、Response），兼容多种运行时环境。框架支持中间件和自定义路由，提供静态资源处理、Cookie操作等核心功能。相比Koa和Express，H3更轻量、性能更高，且天然支持TypeScript，是现代云原生和Serverless应用的理想选择。其简洁设计和标准兼容性使其成为Nuxt3等框架的底层HTTP引擎。
2025-07-07 22:31:01
585
原创 React 英语单词消消乐一款专为英语学习设计的互动式记忆游戏
英语单词消消乐是一款基于React.js开发的互动式学习游戏，通过经典消消乐玩法帮助用户记忆英语单词。游戏支持多种单词主题库（水果、动物等），包含语音朗读功能（可调节语速），提供实时进度追踪和得分系统。技术栈采用React.js+TailwindCSS+WebSpeechAPI，具有响应式设计、流畅动画和简洁UI。核心功能包括智能匹配系统、双语语音朗读、单词库自由切换等，使英语学习变得有趣高效。游戏规则简单明了：点击匹配英文和中文卡片得分，完成所有配对即通关。
2025-07-06 23:32:20
554
原创 React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
基于React+TailwindCSS开发的专业颜色转换工具，支持HEX(3/6位)、RGB/RGBA、HSL/HSLA、HSV和CMYK等多种格式的实时互转。该工具提供完整的颜色空间支持，包含HEX到RGB转换（支持3位缩写）、RGB到HEX、RGB到HSL、HSL到RGB、RGB到HSV以及RGB到CMYK等核心算法实现，适用于CSS开发、主题系统构建和颜色调试等场景。通过React组件化开发，结合TailwindCSS实现响应式UI，为设计师和开发者提供便捷的颜色格式转换解决方案。
2025-07-06 17:13:40
626
原创 React 极简响应式滑块验证组件实现，随机滑块位置
React滑块验证组件(SliderCaptcha)是一款现代化响应式验证工具，具有智能拖拽、随机目标位置和容错验证等核心功能。采用React Hooks和TypeScript开发，支持触摸操作和响应式设计，提供流畅动画和即时状态反馈。组件适用于登录注册、表单提交等场景，具备安全随机化、服务端验证等防护机制。支持主题定制，未来将扩展多种验证模式和无障碍访问。该方案平衡了用户体验与安全性，是防止机器人操作的理想选择。
2025-07-05 22:36:17
691
原创 Css的FC格式化上下文之一文打尽，BFC、IFC、GFC、FFC详解
CSS格式化上下文(FC)是页面渲染的重要概念，主要分为四种类型：BFC（块级格式化上下文）、IFC（内联格式化上下文）、GFC（网格格式化上下文）和FFC（弹性格式化上下文）。BFC通过特定CSS属性创建独立容器，用于清除浮动、防止外边距折叠等；IFC控制内联元素布局，可实现水平/垂直居中；GFC专用于网格布局；FFC适用于弹性布局。每种FC都有其独特的渲染规则和应用场景，理解它们有助于开发者更好地控制页面布局和元素定位。通过合理使用不同类型的FC，可以解决常见的CSS布局问题。
2025-07-05 12:01:50
1012
原创 轻量级、无依赖、响应式粒子背景动画库——tsparticles、@tsparticles/engine、@tsparticles/react
tsparticles-demo是一个基于React和tsparticles的可视化粒子特效库，提供多种炫酷动画效果（如闪烁、雪花、彩色气泡等），支持鼠标交互和响应式设计。项目采用Vite构建，性能优异，兼容主流前端框架（Vue/Angular等），适用于官网背景、登录页等场景。通过JSON配置即可自定义粒子参数，内置主题切换功能，开发便捷。技术栈包含React18、tsparticles和TailwindCSS，源码结构清晰，支持快速二次开发。 （98字）
2025-07-05 07:30:00
370
原创 轻量级、无依赖、响应式粒子背景动画库——tsparticles、@tsparticles/vue3
基于Vue3和tsparticles粒子库构建的可视化项目，提供多种粒子动画效果（如闪烁、气泡、雪花等），支持实时切换和交互响应。该项目采用现代化技术栈（Vue3/Vite/TailwindCSS），具有高性能渲染、JSON可配置性、跨框架兼容（支持React/Angular等12种框架）等特点。通过组件化方式集成粒子特效，适用于网站背景、活动页面等场景，开发者可快速实现酷炫的动态效果。项目包含完整示例代码和配置参数，并推荐使用官方在线生成器进行效果定制。
2025-07-05 07:30:00
282
原创 鸿蒙系统（HarmonyOS）应用开发之手势锁屏密码锁（PatternLock）
基于鸿蒙平台开发的手势密码锁应用，提供安全便捷的身份验证方案。支持自定义手势密码设置与验证，具备动态提示、密码重置功能，采用现代化UI设计并集成动画与震动反馈。技术架构使用OpenHarmony的ETS语言，核心组件包括PatternLock和状态管理。适用于设备解锁、金融验证、智能家居等多场景。源码完整实现密码验证逻辑，包含错误处理、视觉效果和交互反馈，展现鸿蒙应用开发的典型范例。
2025-07-04 15:27:52
540
原创 React 实现的图案解锁组件，响应式3×3 的点阵上绘制解锁图案
LockScreenPassword是一个基于React开发的图案解锁组件，支持在3×3点阵上绘制解锁图案。该组件采用SVG渲染技术，提供流畅的交互体验，兼容PC和移动端。主要功能包括：实时追踪绘制路径、高亮显示选中点、生成图案序列，适用于App解锁、网页验证、儿童教育等多种场景。组件代码简洁高效，包含完整的触摸/鼠标事件处理逻辑，并支持样式自定义与功能扩展，可直接集成到React项目中。源码通过状态管理实现图案记录与验证功能，开发者可轻松修改用于不同业务场景。
2025-07-04 07:30:00
382
原创 React 强大的表单验证库formik之集成Yup、React Hook Form库
Formik是React开发中常用的表单管理库，提供状态管理、验证和提交处理功能。其核心优势包括自动跟踪表单状态、支持声明式验证规则（可集成Yup）以及良好的扩展性。与React Hook Form相比，Formik更侧重整体表单管理，而后者更注重性能优化。通过示例代码展示了Formik的基本用法、与Yup的集成方式，以及三种验证方案的对比：原生validate函数（灵活但冗长）、Yup声明式验证（简洁易维护）和React Hook Form（高性能）。建议简单表单用原生validate，复杂表单用Yup，
2025-07-03 20:52:37
1244
原创 React Tailwind css 大前端考试、问卷响应式模板
基于React和TailwindCSS开发的大前端知识考试系统。该系统具有美观简洁的UI界面，支持单选/多选两种题型，涵盖React、CSS、JavaScript等核心知识点。主要功能包括：实时进度显示、自动评分、答题状态保存和移动端适配。技术亮点包括React Hooks状态管理、TailwindCSS样式设计和组件化开发。适用于前端面试准备、在线课程测试、企业内训等多种场景。系统纯前端实现，无需后端支持，开箱即用。源码采用函数式编程思想，结构清晰，便于二次开发和集成。
2025-07-03 18:32:06
359
原创 react+antd Anchor(锚点组件)通讯录字母索引实现
基于React框架开发的通讯录页面，结合AntDesign组件库和TailwindCSS实现。核心功能包括字母分组展示联系人、右侧字母索引导航（使用AntDesignAnchor组件）、响应式布局和美观的UI设计。技术亮点包括React组件化开发、深度定制的AntDesignAnchor组件、TailwindCSS原子化样式，以及平滑滚动和吸顶效果优化。该方案适用于各类联系人管理系统，具有高扩展性，支持后续集成搜索等附加功能。文中还提供了完整的源码实现，特别解决了Anchor组件在弹框内使用的滚动容器问题。
2025-07-03 00:55:59
1180
原创 鸿蒙系统（HarmonyOS）应用开发之仿微信通讯录页面实现
一款基于鸿蒙ArkTS开发的联系人管理组件，具有智能分组和字母导航功能。该组件支持中英文联系人自动分类，中文按拼音首字母、英文按首字母分组；提供右侧字母索引栏实现快速跳转；采用现代化UI设计，集成高性能ListScroller确保流畅滚动。技术架构采用ArkUI组件化设计，使用Map数据结构高效映射分组。适用于通讯录、社交应用、企业管理系统等场景，能有效提升联系人查找效率和使用体验。
2025-07-02 07:30:00
405
原创 react 仿微信风格通讯录功能实现
一款仿微信风格的React通讯录组件，采用现代化设计，支持字母分组和索引栏快速导航。组件特点包括：自动按首字母分组联系人、右侧字母索引栏点击跳转、滚动时动态高亮当前分组、彩色圆形头像展示。技术实现基于React Hooks和TailwindCSS，零第三方依赖，性能优异，适用于企业通讯录、社交应用等场景。源码简洁易维护，支持自定义扩展，可完美集成到各类React项目中。
2025-07-02 07:15:00
463
原创 鸿蒙系统（HarmonyOS）应用开发之经典蓝色风格登录页布局、图文验证码
集成图文验证码的HarmonyOS登录界面，采用ArkTS语言和ArkUI框架实现。核心功能包括：1）可随机生成字符/颜色/干扰元素的验证码组件；2）表单完整性校验与错误提示；3）现代化UI设计适配多终端。技术亮点在于通过@Component组件化解耦、@State状态管理及多重随机算法实现高安全性验证码，支持点击刷新。该方案适用于企业系统、移动App、IoT设备管理等需要安全认证的场景，具有易集成、可扩展的特点，有效防范自动化攻击。
2025-07-01 13:35:44
716
原创 鸿蒙系统（HarmonyOS）应用开发之实现电子签名效果
基于OpenHarmony平台开发的DevEco电子签名应用，该应用提供精准手写签名功能，支持4种颜色选择和1-10级线条粗细调节，采用Canvas绘图技术实现流畅签名体验。应用包含撤销、清除画布和即时保存等实用功能，界面简洁直观，自适应不同屏幕尺寸。技术架构使用ArkTS/ETS语言开发，通过CanvasRenderingContext2D实现高精度绘图，并采用离屏渲染技术优化性能。适用于合同签署、会议纪要、法律文件等多种场景，为移动办公提供便捷安全的电子签名解决方案。
2025-07-01 12:27:45
903
原创 React页面水印效果的实现简直不要太so easy
Web开发中实现页面水印的多种方法，包括原生Canvas、第三方库@pansy/watermark和watermarkjs。水印主要用于版权保护（防止盗用）、品牌宣传（展示Logo）和安全防护（追踪泄露）。文章详细展示了React组件实现方案，涵盖文字/图片水印、旋转角度、透明度等参数配置，并对比了不同技术方案的代码实现。所有示例代码均可免费获取，为开发者提供完整的页面水印解决方案。
2025-06-29 20:59:10
630
原创 react强大且灵活的动画库——react-spring
React-Spring是一款基于弹性物理模型的React动画库，提供高性能、流畅自然的动画效果。主要特性包括物理驱动动画、声明式API、多种动画类型支持（spring、trail、transition等），与React生态无缝集成。适用于页面过渡、列表动画、拖拽交互等场景。通过简洁的语法实现复杂动画，如useSpring淡入效果、useTrail列表动画、useChain链式动画等。还提供@react-spring/parallax插件创建视差滚动效果。
2025-06-29 10:58:06
404
原创 鸿蒙系统（HarmonyOS）应用开发之实现瀑布流图片展示效果
《科技图库》是一款基于鸿蒙系统的图片浏览应用，采用双列瀑布流布局展示精选科技主题图片。应用支持高清图片预览、加载状态展示和完善的容错机制，提供流畅的浏览体验。采用ArkTS和ArkUI框架开发，具备智能缓存、延迟加载等优化功能。适用于科技爱好者获取灵感、设计师素材收集及科技教育辅助。源码包含图片数据管理、瀑布流布局实现和图片预览对话框等核心功能，展示了鸿蒙应用的开发实践。
2025-06-28 01:01:12
1420
React 触摸滑动交互插件-swiper.js，高性能、多特效、跨平台兼容和易定制化
2025-07-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人