前端图片缓存，页面闪烁问题
问题描述
1. 图片闪烁问题
在 React 应用开发中，当我们将 img 标签封装到组件中并在页面间切换时，经常会遇到图片闪烁的问题。这种闪烁现象严重影响了用户体验，使界面切换显得不够流畅。
2. 复杂状态管理问题
在处理复杂状态时，特别是涉及以下场景：
- 表单创建后的页面刷新
- 全局状态的调整
- 组件间数据共享
虽然使用常规的 React hooks 可以处理这些情况，但当业务逻辑变得复杂时，会导致频繁的 setState 调用。虽然可以通过自定义 hook 来优化代码结构，但仍然存在一些挑战。
例如，在一个电商应用中：
- 侧边栏需要显示商品总量
- 主页面展示商品列表
- 两个独立组件都需要调用相同的商品列表接口
这种情况下常见的解决方案是重复调用接口，虽然实现简单，但会造成不必要的性能开销。之前我主要通过 MobX 这类状态管理工具来减少重复请求。
解决方案
1. 图片加载优化
为了解决图片闪烁问题，采用了以下方案：
- 使用 CSS
background-image替代img标签 - 利用浏览器对背景图片的预加载和缓存机制
- 尽管尝试过
img标签的 lazy loading，但效果不如背景图片方案
2. 样式管理优化
引入 Tailwind CSS 来优化样式管理：
- 利用 AI 工具辅助编写 Tailwind 类名
- 享受 Tailwind 带来的样式统一性
- 利用 Tailwind 的性能优化特性
3. 数据状态管理
引入 TansStack Query 作为数据获取和缓存解决方案：
- 简化服务端状态管理
- 优化数据请求策略
- 提供开箱即用的缓存机制
- 降低重复请求的概率
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 ！
相关推荐
2024-12-16
React 图片动画加载技术详解
图片加载动画的挑战开发过程中，我遇到了一个常见的问题：页面初始加载时，多张图片未完成加载会导致动画效果丢失。这不仅影响了用户体验，也降低了页面的交互质感。 解决方案：动态监听与懒加载我们的解决方案包含两个核心策略： 图片加载监听：确保所有图片加载完成后再触发动画 滚动懒加载：延迟加载动画，提高初始页面响应速度 代码实现1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950useEffect(() => { const onLoad = () => { gsap.utils .toArray(".section-image-friends") .forEach((image: any, index) => { // 交替方向，创建更生动的视觉效果 const direction = index % 2...
2024-12-27
TypeScript 入门笔记
TypeScript 简介TypeScript 是 JavaScript 的超集，它添加了可选的静态类型和基于类的面向对象编程。TypeScript 由微软开发和维护，设计目标是开发大型应用。 常用点 类型判断 as 断言 interface record 用法 keyof typeof 类，class，type，enum 枚举 1. 基本类型1234567891011121314151617// 布尔值let isDone: boolean = false;// 数字let decimal: number = 6;let hex: number = 0xf00d;// 字符串let color: string = "blue";let sentence: string = `The color is ${color}`;// 数组let list: number[] = [1, 2, 3];let list2: Array<number> = [1, 2, 3];// 元组let x: [string, number]...
2025-03-05
Tailwind CSS 学习笔记
前言最近准备学习 Tailwind CSS，之前的前端知识除了最基础的语法外，在实际的项目中，发现如何使用标准化样式是比较难的。也就是说，如何让样式标准化，这让我了解了 Tailwind CSS。 通过浅层次的封装，Tailwind CSS 可以让页面的 CSS 效果尽可能地达到统一，并且是基于原生的标签。很多框架组件的封装其实层次高了点，也就是把样式和功能都封装了，对于一些定制化需求，难以满足样式的调整。 比如提供的 Antd 的 Input 组件，它本身就封装了众多样式调整，并且还需要配合全局的样式，有时候调整单个样式会影响到其他的组件样式。在我看来，这个封装层级还是高了点。 感觉 Tailwind CSS 的层次就挺好，能够充分满足定制化需求。当然，缺点也很明显，那就是有学习曲线，它是对于样式的再定义，增加了很多 Tailwind 自己的定义。 幸好官网有详细的文档，介绍如何使用，还有代码例子，只是需要学习和记忆，但发现很有用。刚好可以补全对于常用 HTML 标签的使用，还有一些常见组件，比如卡片，列表，人物头像，输入框的样式定义，获益良多。 之后会慢慢把下面这些 AI...
2022-04-23
Egg.js + UmiJS 开发总结
前言从 Koa 到 Egg.js 的转变让我深刻体会到框架的重要性。框架不仅提供了规范化的开发方式,还解决了日志、定时任务等通用业务问题。本文记录使用 Egg.js + UmiJS 开发过程中的经验总结。 技术栈选择后端框架 Egg.js: 企业级 Node.js 框架 NATS: 微服务通信 HTTP: 前后端通信 前端框架 UmiJS: 可插拔的企业级 React 应用框架 Ant Design: UI 组件库 项目优化经验1. 打包优化UmiJS 配置示例: 123456789101112131415161718192021222324252627282930313233343536373839404142// .umirc.tsexport default defineConfig({ nodeModulesTransform: { type: 'none' }, hash: true, exportStatic: {}, dynamicImport: {}, ...
2025-09-21
nextjs初体验
Next.js 初体验总结项目背景最近在学习 Next.js 框架进行项目开发，这是一个非常强大的 React 全栈框架，它提供了服务端渲染（SSR）、静态站点生成（SSG）等现代 Web 开发所需的关键特性。 遇到的问题：数据库连接实例丢失在开发环境（dev）中，我遇到了一个有趣的问题。具体表现为： 使用 MySQL 作为后端数据库 采用单例模式创建数据库连接 当应用发生热重载（Hot Reload）时，偶尔会出现数据库实例丢失的现象 问题分析起初，我认为这可能是单例模式实现的问题。但在对比测试其他框架（如 NestJS）后发现，这个问题似乎是 Next.js 特有的。这让我开始思考框架本身的特性： Next.js 是一个全栈框架，同时处理前端和后端逻辑 开发模式下的热重载机制可能会影响到后端状态的维护 传统的 Node.js 单例模式在这种环境下可能不够稳定 解决方案通过深入研究，发现可以使用 globalThis 来解决这个单例重复加载的问题。示例代码如下： 1234567891011121314151617// lib/db.tsimport mysql...
2022-04-23
React 开发实践与组件设计思考
项目实践在开发内部管理平台时,主要使用了以下技术栈: React Hooks (useState, useEffect, useRef) Ant Design 组件库 MobX 状态管理 组件设计经验状态管理对于简单的父子组件通信,使用 props 和 ref 就足够了。但在以下情况需要考虑使用状态管理工具: 组件层级过深 状态需要共享 状态变化复杂 组件拆分原则 功能独立 复用性高 维护方便 职责单一 实际案例12345678910111213141516171819202122// 日期范围选择组件const RangePickCondition = ({ onChange }) => { const [dates, setDates] = useState([]); const pickerRef = useRef(null); useEffect(() => { // 初始化逻辑 }, []); const handleChange = (values) => { ...
