在开发 React 应用时，如何优化数据加载和渲染效率是一个非常重要的问题。一种常用的优化手段就是使用数据缓存技术。
数据缓存可以分为两种：客户端缓存和服务器端缓存。其中客户端缓存主要针对经常变化但读取频率高的数据，在用户首次请求数据后将其缓存于浏览器端，之后每次读取数据时直接从缓存中获取，避免了频繁地向服务器发起请求。服务器端缓存则是针对相对稳定的数据进行缓存，例如某些静态页面的数据，在用户访问这些静态页面时可以直接从缓存中获取数据，无需每次都从数据库中读取。
本文将重点讲解客户端缓存技巧。
localStorage 和 sessionStorage
localStorage 和 sessionStorage 是 HTML5 提供的 API，它们可以在浏览器端存储字符串类型的数据。其中，localStorage 可以存储较为长期的数据，即使关闭浏览器窗口或重启电脑，数据也会一直存在。而 sessionStorage 则只能存储在当前会话（即当前浏览器窗口）中，关闭浏览器窗口或刷新页面后数据就会消失。
示例代码：
-- ----- ------------ - --------------------------- --------- -- - ------------ ----- ----- ----- - ---------------------------- -- - ------------ ----- ------------------------------- -- -- ------------ ---------------------
-- ----- -------------- - ----------------------------- --------- -- - -------------- ----- ----- ----- - ------------------------------ -- - -------------- ----- --------------------------------- -- -- -------------- -----------------------
需要注意的是，因为 localStorage 和 sessionStorage 只能存储字符串类型的数据，所以如果要存储其它类型的数据，需要通过 JSON.stringify 和 JSON.parse 进行转换。例如：
----- ---- - - ----- ------- ---- -- -- -- ----- ------------ - ---------------------------- ---------------------- -- - ------------ ----- ----- -------------------- - -----------------------------------------
Redux
Redux 是一个 JavaScript 状态容器，它可以让 React 应用中的所有组件共享同一个状态。Redux 中的状态存储在一个全局的 store 中，每次状态的更新都是通过 dispatch 一个 action 动作来触发的。Redux 的一个重要特性就是对于每个 action，都对应一个纯函数 reducer，它用来计算新的状态。这个过程被称为“数据流”，数据流的顺序是：actions -> reducers -> store -> subscribers。
Redux 中的状态是永久的，如果要清空状态，需要通过派发一个特殊的 action 来实现。
示例代码：
------ - ----------- - ---- --------
-- -- -------
-------- ------------- - --- ------- -
------ ------------- -
---- ---------------
------ ---------------
---- --------------
------ ---
--------
------ ------
-
-
-- -- -----
----- ----- - ---------------------
-- -- ----- ---
------------------ -- -
------------------------------
---
-- -------- -----------
---------------- ----- --------------- -------- ---- ------ ---
-- -------- -----------
---------------- ----- ------------- ---react-query
react-query 是一个前端数据请求库，它的主要特点是对请求进行了多种优化，包括请求 deduplication、缓存数据、自动再请求等等。其中对于数据缓存，它采用的是默认的客户端缓存方式，即在首次请求数据时将其缓存于内存中，在下次请求该数据时，如果缓存中存在该数据，则直接返回缓存数据，否则再向服务器发起请求。
示例代码：
------ ----- ---- --------
------ - -------- - ---- --------------
----- ---------- - ----- -- -- -
----- -------- - ----- ----------------------------------------------------
----- ---- - ----- ----------------
------ -----
--
-------- ----------- -
----- - ------- ---- - - ----------------- ------------
-- ------- --- ---------- -
------ ----------------------
-
-- ------- --- -------- -
------ -----------------
-
------ -
----
-------------- -- -
--- ------------------------------
---
-----
--
-在该示例中，useQuery 的第一个参数 'users' 表示该查询的名称，用来唯一标识该查询。第二个参数则是一个异步函数，返回数据的形式为 Promise。在首次请求数据时，react-query 会将数据缓存于内存中，之后每次调用 useQuery 都会先检查缓存中是否存在该数据，如果存在则直接返回缓存数据。如果需要强制从服务器重新获取数据，可以通过设置 forceFetch 参数为 true 实现。例如：
----- - ------- ---- - - ----------------- ----------- - ----------- ---- ---
结论
数据缓存技术是优化 React 应用的一个重要手段。一般来说，我们应该尽量避免频繁地向服务器发起请求，而是通过客户端缓存技术来减轻服务器负担，提高应用的加载和渲染效率。常用的客户端缓存方式包括 localStorage 和 sessionStorage、Redux、react-query 等。具体选择哪种技术，要根据应用的具体情况来决定。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6714780dad1e889fe213f1f8