在开发 React 应用时，如何优化数据加载和渲染效率是一个非常重要的问题。一种常用的优化手段就是使用数据缓存技术。
数据缓存可以分为两种：客户端缓存和服务器端缓存。其中客户端缓存主要针对经常变化但读取频率高的数据，在用户首次请求数据后将其缓存于浏览器端，之后每次读取数据时直接从缓存中获取，避免了频繁地向服务器发起请求。服务器端缓存则是针对相对稳定的数据进行缓存，例如某些静态页面的数据，在用户访问这些静态页面时可以直接从缓存中获取数据，无需每次都从数据库中读取。
本文将重点讲解客户端缓存技巧。
localStorage 和 sessionStorage
localStorage 和 sessionStorage 是 HTML5 提供的 API，它们可以在浏览器端存储字符串类型的数据。其中，localStorage 可以存储较为长期的数据，即使关闭浏览器窗口或重启电脑，数据也会一直存在。而 sessionStorage 则只能存储在当前会话（即当前浏览器窗口）中，关闭浏览器窗口或刷新页面后数据就会消失。
示例代码：
-- -------------------- ---- ------- -- ----- ------------ - --------------------------- --------- -- - ------------ ----- ----- ----- - ---------------------------- -- - ------------ ----- ------------------------------- -- -- ------------ ---------------------
-- -------------------- ---- ------- -- ----- -------------- - ----------------------------- --------- -- - -------------- ----- ----- ----- - ------------------------------ -- - -------------- ----- --------------------------------- -- -- -------------- -----------------------
需要注意的是，因为 localStorage 和 sessionStorage 只能存储字符串类型的数据，所以如果要存储其它类型的数据，需要通过 JSON.stringify 和 JSON.parse 进行转换。例如：
const data = { name: 'John', age: 20 };
// 存储对象到 localStorage 中
localStorage.setItem('data', JSON.stringify(data));
// 从 localStorage 中读取对象
const dataFromLocalStorage = JSON.parse(localStorage.getItem('data'));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 实现。例如：
const { status, data } = useQuery('users', fetchUsers, { forceFetch: true });结论
数据缓存技术是优化 React 应用的一个重要手段。一般来说，我们应该尽量避免频繁地向服务器发起请求，而是通过客户端缓存技术来减轻服务器负担，提高应用的加载和渲染效率。常用的客户端缓存方式包括 localStorage 和 sessionStorage、Redux、react-query 等。具体选择哪种技术，要根据应用的具体情况来决定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6714780dad1e889fe213f1f8