关于react的缓存问题

2022-07-29,

项目中遇到一个缓存问题,提交审批后刷新页面,数据状态未自动更改,要多刷很多次才能改过来。

一开始调试发现是models层state数据未修改,手动清除state后还是未能更新。

又调试发现请求接口未调用,不过以为是请求未打印的原因,或者是state状态未更新导致未发出请求,却不知道问题就在这。想着应该是react框架的diff算法问题,所以存在缓存,后面一直在改models层,致力于手动更新state触发请求数据。

后来在网上帖子偶然看到有个说是在URL请求后面添加hash更新请求可以解决浏览器的缓存问题,细搜之下才恍然不是react的缓存问题,而是浏览器的缓存问题。解决浏览器的缓存有两个方法:

一、网上说的是在URL后面添加hash值,URL++'?time='+new Date().getTime();或location.hash="#"+new Date().getTime();

原因:

浏览器在访问相同的url的时候,会根据一些头信息来判断是否重新渲染和向服务器请求资源,也就是说,如果url是相同的,浏览器就有可能偷懒直接从缓存里面加载了旧的资源。

解决:

在页面url后面加hash,可以是时间戳或者随机数,这样每次url都不同,浏览器就不会偷懒了,每次都向服务器取最新的资源,也就解决了react的大坑---浏览器缓存问题。

亲测未可行,URL中的hash不计入http请求路径,影响页面位置。

二、既然是浏览器缓存的问题,就可以从http请求入手去除缓存了,将请求头的'Cache-Control': 'no-cache',不缓存就OK了,解决。

本文地址:https://blog.csdn.net/jiangshan112/article/details/109235206

《关于react的缓存问题.doc》

下载本文的Word格式文档,以方便收藏与打印。