aafeng avatar

React Query

aafeng

Published: 05 Jul 2021 › Updated: 05 Jul 2021React Query

React Query

最近试用了一下React Query,感觉真的很香,在考虑是否在项目中引入这个出色的库。

image
图源:官网截图

在React APP中不可避免的要调用很多REST API对数据进行CRUD操作。对于每一个API endpoint,我们都需要考虑状态管理,数据同步,缓存,错误处理等诸多细节。这就会使我们的程序变得非常臃肿。而有了React Query,无需借助全局状态,就能实现这些功能。

如果不使用React Query,最常见的方式就是使用useState及useEffect来实现状态的管理。比如:使用一个state来管理loading,另一个state来关联error,再找一个state来关联真正的数据。这样,在每一个调用API获取数据的部分都需要将调用API的状态和这些状态变量关联,非常繁琐。

同时,还会有一些其他的问题,比如:

  • 如果数据在不同人之间共享,那么当别人更改了你正在读取数据的时候,你的数据其实就已经“过时”了。怎么解决这种问题?
  • 维护一个本地缓存并在需要的时候使数据过期,并发出新的数据请求

这时可以通过自定义一个hook来处理数据的获取及各种状态,比如loading,error等。这样就可以在初始获取后缓存数据,在后台重新获取数据等。

React Query是通过维护一个服务器状态树来管理服务端状态的。同时,在React Query中还有它特有的缓存策略,来进行数据的存储和更新。这样,我们就可以把所有和服务器端相关的状态从其他状态管理库中提取出来,交给React Query。

目前唯一顾虑的就是React Query不是React官方维护的。这就存在一种潜在的风险,和Redux类似。早期的时候很多项目中都使用了Redux。但现在在最新的React版本中,不使用Redux也能进行全局状态的管理。那么是否在将来,React官方也会把React Query做的事情自己实现了呢?

Leave React Query to:

Written by

Experience is everything.

Read more #cn posts


Best Posts From aafeng

We have not curated any of aafeng's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From aafeng