react 如何快速刷新当前状态?

4,944 阅读1分钟

如何快速刷新页面呢,往往我们会在router里面把代码会写的很复杂,其实可以不用对router进行改造,只要可以转跳到一个没有请求的页面,再返回回来,这样效果是一样的,代码如下

const reload = () => {
    history.push('/login')
    history.goBack()
}

但是这时候有两个问题

  • 它会破坏浏览器自带的前进后退按钮的操作,也就是push遗留下来的东西, 这会导致用户迷惑。
  • 虽然页面没重新加载,但是数据被置空了,再次请求需要时间,接口请求的时间往往在半秒之内,100、200ms左右,虽然很快,但是眼睛还是可以感觉到了刷新的一瞬间(这个是最关键的)

根据第二个问题,我们可以得出一个结论,再次渲染的时候不能有一个无数据的空白期,既然如此的话,要么数据请求特别快(在本地硬盘、内存等),要么之前的数据压根就不经行清空。 解决方法两个

  • 数据请求特别快的问题,我写过一个基于Axios的请求控制频率的中间件点我查看, 这是一种办法
  • 重新执行请求即可。

如下,请求统一到一个init函数里面

这个init就可以当作reload函数了,比如在子组件调用,就可以传过去调用。

这时候无缝更新,爽歪歪。这样第一个问题也解决了,因为压根就没操作路由。

(周末水一篇文章哈,勿怪)

-- 完 --