RavelloH's Blog
LOAD COMPLETED.
LOADING
.
.
.
NeutralPress
标签:React - 第 1 页 | RavelloH's Blog
Keywords. Connections. Traces.
标签:React
整理 & 索引 React 下的所有文章。
此标签共包含 10 个文章。
当前正在查看 标签:React。
第 1 页,共 1 页。
正在查看第 1 - 10 篇文章。
Back / 返回标签列表
使用 React 和 Framer Motion 实现一个图片灯箱
使用 React 和 Framer Motion 实现一个图片灯箱
-
开发
/
前端
---
#React
#图片
#TypeScript
#React
#图片
#TypeScript
React 和 Framer Motion 实现的图片灯箱组件。文章介绍了如何通过 data-lightbox、事件委托和 Framer Motion,为 Markdown、MDX 等动态内容中的图片提供统一的灯箱体验,并实现图片组切换、缩略图导航、键盘操作、滚轮缩放、拖拽、原图位置过渡以及预览图与高清原图分层加载等功能,同时讲解了动画状态、原图隐藏和页面滚动锁定等实现细节。
#React
#图片
#TypeScript
React 和 Framer Motion 实现的图片灯箱组件。文章介绍了如何通过 data-lightbox、事件委托和 Framer Motion,为 Markdown、MDX 等动态内容中的图片提供统一的灯箱体验,并实现图片组切换、缩略图导航、键盘操作、滚轮缩放、拖拽、原图位置过渡以及预览图与高清原图分层加载等功能,同时讲解了动画状态、原图隐藏和页面滚动锁定等实现细节。
Cap.js:基于工作量证明的自部署验证码
Cap.js:基于工作量证明的自部署验证码
-
开发
---
#React
#Next.js
#验证码
#PoW
#React
#Next.js
#验证码
#PoW
Cap.js 的自部署 PoW 验证码集成实践指南。文章介绍了工作量证明验证码与传统人机验证的区别,说明其通过提高请求计算成本来限制批量请求。随后结合 NeutralPress 项目,讲解了 Cap.js 后端存储、Challenge 创建、答案验证、Token 校验、Server Action 接入和前端 Hook 封装等实现方式,并总结了它在隐私、可自部署、无打扰体验上的优势,以及无法识别人类、设备性能差异大等局限。
#React
#Next.js
#验证码
#PoW
Cap.js 的自部署 PoW 验证码集成实践指南。文章介绍了工作量证明验证码与传统人机验证的区别,说明其通过提高请求计算成本来限制批量请求。随后结合 NeutralPress 项目,讲解了 Cap.js 后端存储、Challenge 创建、答案验证、Token 校验、Server Action 接入和前端 Hook 封装等实现方式,并总结了它在隐私、可自部署、无打扰体验上的优势,以及无法识别人类、设备性能差异大等局限。
使用物化路径与 DFS 排序来实现树状评论
使用物化路径与 DFS 排序来实现树状评论
-
开发
---
#React
#DFS
#物化路径
#React
#DFS
#物化路径
一篇探讨如何使用物化路径与 DFS 排序高效实现树状评论系统的技术文章。文章首先分析了传统平铺式与有限层级评论在上下文追溯时的痛点,随后详细展示了如何通过 Prisma 结合邻接表、物化路径(path)和 DFS 排序键(sortKey)来优化数据库结构。该方案通过后端预先编码树信息并返回扁平数组,配合前端基于标识字段直接进行缩进和折叠渲染,完美解决了无限层级评论在递归查询、分页加载及展示上的性能难题。
#React
#DFS
#物化路径
一篇探讨如何使用物化路径与 DFS 排序高效实现树状评论系统的技术文章。文章首先分析了传统平铺式与有限层级评论在上下文追溯时的痛点,随后详细展示了如何通过 Prisma 结合邻接表、物化路径(path)和 DFS 排序键(sortKey)来优化数据库结构。该方案通过后端预先编码树信息并返回扁平数组,配合前端基于标识字段直接进行缩进和折叠渲染,完美解决了无限层级评论在递归查询、分页加载及展示上的性能难题。
Timepulse:现代化高颜值计时器
Timepulse:现代化高颜值计时器
-
开发
/
前端
---
#React
#Next.js
#倒计时
#JavaScript
#React
#Next.js
#倒计时
#JavaScript
TimePulse 是一个具有现代化 UI 和交互的倒计时网页应用,致力于提供极佳的视觉体验。它采用玻璃态设计和流畅动画效果,支持多计时器管理、数据本地存储与云端同步、智能节假日识别以及 PWA 离线访问等功能,并开放了核心源码。
#React
#Next.js
#倒计时
#JavaScript
TimePulse 是一个具有现代化 UI 和交互的倒计时网页应用,致力于提供极佳的视觉体验。它采用玻璃态设计和流畅动画效果,支持多计时器管理、数据本地存储与云端同步、智能节假日识别以及 PWA 离线访问等功能,并开放了核心源码。
React 实现外链提示
React 实现外链提示
-
开发
/
前端
---
#React
#React
React 实现的外链预览组件,旨在优化站内外部链接的交互体验。当用户将鼠标悬停在 target="_blank" 的超链接上时,该组件会弹出一个包含目标网页截图、域名及安全提示的模糊背景悬浮窗。文章详细介绍了如何利用 Canvas 分析图片亮度以实现文字颜色的自适应调整,并提供了包含网页截图功能的完整版以及仅保留背景模糊效果的轻量化 Mini 版两种实现代码。
#React
React 实现的外链预览组件,旨在优化站内外部链接的交互体验。当用户将鼠标悬停在 target="_blank" 的超链接上时,该组件会弹出一个包含目标网页截图、域名及安全提示的模糊背景悬浮窗。文章详细介绍了如何利用 Canvas 分析图片亮度以实现文字颜色的自适应调整,并提供了包含网页截图功能的完整版以及仅保留背景模糊效果的轻量化 Mini 版两种实现代码。
Next.js 实现 PJAX 刷新
Next.js 实现 PJAX 刷新
-
开发
/
前端
---
#React
#Next.js
#PJAX
#React
#Next.js
#PJAX
Next.js 中实现 PJAX 无刷新跳转的技术方案。作者针对 React 与传统 PJAX 直接修改 DOM 导致的水合冲突问题,提出了一种利用 Next.js 原生 useRouter 和 usePathname 钩子的替代方案。通过拦截全局 A 标签点击事件并结合 Zustand 进行全局状态广播,实现了类似 SPA 的页面局部加载与过渡动画效果,该方案无需复杂的服务器端配置即可在 Next.js 站点中通用。
#React
#Next.js
#PJAX
Next.js 中实现 PJAX 无刷新跳转的技术方案。作者针对 React 与传统 PJAX 直接修改 DOM 导致的水合冲突问题,提出了一种利用 Next.js 原生 useRouter 和 usePathname 钩子的替代方案。通过拦截全局 A 标签点击事件并结合 Zustand 进行全局状态广播,实现了类似 SPA 的页面局部加载与过渡动画效果,该方案无需复杂的服务器端配置即可在 Next.js 站点中通用。
Zustand 实现 React 全局状态管理
Zustand 实现 React 全局状态管理
-
开发
/
前端
---
#React
#Zustand
#Hooks
#React
#Zustand
#Hooks
一种基于 Zustand 库的 React 全局状态管理方案。该方案通过封装 useBroadcast、useEvent 和 useFunction 三个自定义 Hook,分别实现了全局广播、事件管理及动态函数注册调用,有效解决了 React 组件间通信繁琐及 Context API 使用不便的问题。
#React
#Zustand
#Hooks
一种基于 Zustand 库的 React 全局状态管理方案。该方案通过封装 useBroadcast、useEvent 和 useFunction 三个自定义 Hook,分别实现了全局广播、事件管理及动态函数注册调用,有效解决了 React 组件间通信繁琐及 Context API 使用不便的问题。
React 实现图片点击放大
React 实现图片点击放大
-
开发
/
前端
---
#React
#图片
#React
#图片
React 中实现图片点击放大效果的组件开发指南。该组件通过 useEffect 监听带有 data-zoomable 属性的图片,利用 DOM 操作(克隆节点、计算位置)配合 CSS Transform 实现平滑的位移与缩放动画,并特别处理了 React Strict Mode 下可能出现的重复触发问题,适用于博客等内容展示场景。
#React
#图片
React 中实现图片点击放大效果的组件开发指南。该组件通过 useEffect 监听带有 data-zoomable 属性的图片,利用 DOM 操作(克隆节点、计算位置)配合 CSS Transform 实现平滑的位移与缩放动画,并特别处理了 React Strict Mode 下可能出现的重复触发问题,适用于博客等内容展示场景。
我妥协了,React 与 Pjax 不可兼得
我妥协了,React 与 Pjax 不可兼得
-
开发
/
前端
---
#React
#PJAX
#JavaScript
#React
#PJAX
#JavaScript
React 项目中集成 Pjax 失败的经验总结与视觉模拟方案。由于 React 的渲染机制与 Pjax 在脚本加载及 DOM 替换上存在冲突,作者最终决定放弃 Pjax,转而通过拦截 <a> 标签点击事件、延迟跳转以及 CSS 淡出动画来模拟 Pjax 的无刷新视觉效果,并利用 document.referrer 判断来源以优化下一页面的加载遮罩体验。
#React
#PJAX
#JavaScript
React 项目中集成 Pjax 失败的经验总结与视觉模拟方案。由于 React 的渲染机制与 Pjax 在脚本加载及 DOM 替换上存在冲突,作者最终决定放弃 Pjax,转而通过拦截 <a> 标签点击事件、延迟跳转以及 CSS 淡出动画来模拟 Pjax 的无刷新视觉效果,并利用 document.referrer 判断来源以优化下一页面的加载遮罩体验。
RTheme V4 部署完全指南
RTheme V4 部署完全指南
-
文档
---
#React
#Next.js
#Serverless
#React
#Next.js
#Serverless
RTheme V4 博客系统的部署完全指南。该版本采用了基于 React 和 Next.js 的混合架构(Hybrid Applications),文章详细介绍了利用 Vercel Serverless 服务与 PostgreSQL 数据库进行托管的完整流程,涵盖了从代码 Fork、环境变量配置(含加密算法设置)、域名绑定到站点初始化的所有步骤。
#React
#Next.js
#Serverless
RTheme V4 博客系统的部署完全指南。该版本采用了基于 React 和 Next.js 的混合架构(Hybrid Applications),文章详细介绍了利用 Vercel Serverless 服务与 PostgreSQL 数据库进行托管的完整流程,涵盖了从代码 Fork、环境变量配置(含加密算法设置)、域名绑定到站点初始化的所有步骤。
-
-
-
-
1
-
-
-
-
-