RavelloH's Blog
LOAD COMPLETED.
LOADING
.
.
.
NeutralPress
标签:React - 第 1 页 | RavelloH's Blog
Keywords. Connections. Traces.
标签:React
整理 & 索引 React 下的所有文章。
此标签共包含 7 个文章。
当前正在查看 标签:React。
第 1 页,共 1 页。
正在查看第 1 - 7 篇文章。
Back / 返回标签列表
Timepulse:现代化高颜值计时器
Timepulse:现代化高颜值计时器
2025/04/03
开发
/
前端
---
#React
#Next.js
#倒计时
#JavaScript
#React
#Next.js
#倒计时
#JavaScript
TimePulse 是一个具有现代化 UI 和交互的倒计时网页应用,致力于提供极佳的视觉体验。它采用玻璃态设计和流畅动画效果,支持多计时器管理、数据本地存储与云端同步、智能节假日识别以及 PWA 离线访问等功能,并开放了核心源码。
#React
#Next.js
#倒计时
#JavaScript
TimePulse 是一个具有现代化 UI 和交互的倒计时网页应用,致力于提供极佳的视觉体验。它采用玻璃态设计和流畅动画效果,支持多计时器管理、数据本地存储与云端同步、智能节假日识别以及 PWA 离线访问等功能,并开放了核心源码。
React 实现外链提示
React 实现外链提示
2025/02/11
开发
/
前端
---
#React
#React
React 实现的外链预览组件,旨在优化站内外部链接的交互体验。当用户将鼠标悬停在 target="_blank" 的超链接上时,该组件会弹出一个包含目标网页截图、域名及安全提示的模糊背景悬浮窗。文章详细介绍了如何利用 Canvas 分析图片亮度以实现文字颜色的自适应调整,并提供了包含网页截图功能的完整版以及仅保留背景模糊效果的轻量化 Mini 版两种实现代码。
#React
React 实现的外链预览组件,旨在优化站内外部链接的交互体验。当用户将鼠标悬停在 target="_blank" 的超链接上时,该组件会弹出一个包含目标网页截图、域名及安全提示的模糊背景悬浮窗。文章详细介绍了如何利用 Canvas 分析图片亮度以实现文字颜色的自适应调整,并提供了包含网页截图功能的完整版以及仅保留背景模糊效果的轻量化 Mini 版两种实现代码。
Next.js 实现 PJAX 刷新
Next.js 实现 PJAX 刷新
2025/02/05
开发
/
前端
---
#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 全局状态管理
2025/02/05
开发
/
前端
---
#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 实现图片点击放大
2025/02/05
开发
/
前端
---
#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 不可兼得
2024/10/20
开发
/
前端
---
#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 部署完全指南
2024/07/28
文档
---
#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
-
-
-
-
-