React Hooks 是 React16.8 引入的新的特性，它可以让我们在不编写 class 组件的情况下，在函数组件中使用状态和其他 React 特性。React Hooks 提供了很多便利的 API，其中包括 useState、useEffect、useContext、useReducer 等等。本文将介绍如何利用 React Hooks 实现数据请求和缓存。
为什么使用数据缓存？
在前端开发中，数据请求是一个非常常见的场景，我们通常会使用 AJAX 或 Fetch API 来获取数据。但是，由于网络环境的不确定性，有时候我们的请求可能会变得非常缓慢，甚至请求失败。这时候，如果用户频繁操作比如多次刷新页面，那么数据请求的次数也会倍增，不仅浪费了用户的流量，而且还可能给服务器造成不必要的压力。
针对这种情况，我们可以考虑对数据进行缓存。一旦我们获取到数据，我们就将其缓存到本地，下次需要使用的时候就直接从本地获取，而不需要再次发送请求。这样可以有效减少网络请求的次数，提高页面加载速度，提升用户体验。
React Hooks 实现数据请求
在使用 React Hooks 实现数据请求之前，让我们先了解一下 React Hooks 的两个核心 API：useState 和 useEffect。
useState
useState 是 React Hooks 中最常用的 API 之一，它接收一个参数作为状态的初始值，并返回一个数组，其中第一个元素是当前状态的值，第二个元素是一个更新状态的函数。以下是 useState 的基本用法。
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
-------- ----- -
----- ------- --------- - -----------
------ -
-----
--------- -----------
------- ----------- -- -------------- - --------------
------
-
-在上面的代码中，我们使用了 useState 来实现一个计数器。count 是当前状态的值，setCount 是一个更新状态的函数，每次点击按钮时，我们都会调用 setCount 函数来改变 count 的值，从而重新渲染组件，并在页面上显示出新的 count 值。
useEffect
useEffect 是另一个常用的 React Hooks API，它的作用是在每次组件渲染之后执行一些副作用操作。副作用操作通常包括网络请求、事件监听、定时器等等。以下是 useEffect 的基本用法。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- -------
-------- ----- -
----- ------- --------- - -----------
------------ -- -
-------------- - ------- ---------
--
------ -
-----
--------- -----------
------- ----------- -- -------------- - --------------
------
-
-在上面的代码中，我们使用了 useEffect 来动态修改页面标题。每当 count 的值发生变化时，useEffect 将会执行并重新设置文档标题。这就是 useEffect 的基本用法，它可以帮助我们在组件渲染完成后执行一些副作用操作。
使用 useEffect 实现数据请求
现在让我们来看一下如何使用 React Hooks 实现数据请求。我们通常会在组件完成渲染之后发起网络请求，并在请求完成后更新组件的状态。在这个过程中，我们需要用到 useState 和 useEffect。
假设我们有一个数据请求的函数 fetchData，该函数返回一个 Promise，当 Promise resolve 时，它会返回请求的数据。以下是使用 React Hooks 实现数据请求的示例代码。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- -------
-------- ----- -
----- ------ -------- - --------------
----- ----------- ------------- - ---------------
----- -------------- ---------------- - ------------
------------ -- -
------------------
-----------
---------- -- -
-------------
-------------------
--
------------ -- -
----------------------- -- ----- ------
-------------------
--
-- ---
------ -
-----
---------- -- ------------------
------------- -- ----------------------
----- -- --------------
------
-
-在上面的代码中，我们使用了 useState 来定义三个状态：data（数据）、isLoading（是否正在加载）、errorMessage（错误消息）。接着，我们使用 useEffect 发起数据请求，并在数据请求完成后更新组件的状态。在 useEffect 中，我们可以添加一个空数组作为第二个参数，这样网络请求只会在组件刚刚渲染的时候执行一次（相当于 componentDidMount）。
React Hooks 实现数据缓存
现在我们已经成功地使用 React Hooks 实现了数据请求，下面让我们来看一下如何用 React Hooks 实现数据缓存。
假设我们已经成功地获取到了数据，我们可以将数据保存到 localStorage 中。localStorage 是一种可以将数据存储在浏览器中的 API，可以将数据存储到本地并在页面刷新后仍然有效。以下是使用 React Hooks 实现数据缓存的示例代码。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- -------
-------- ----- -
----- ------ -------- - --------------
----- ----------- ------------- - ---------------
----- -------------- ---------------- - ------------
------------ -- -
------------------
----- ---------- - ----------------------------------
-- ------------ -
-------------------
-------------------
- ---- -
-----------
---------- -- -
-------------
---------------------------------- -----
-------------------
--
------------ -- -
----------------------- -- ----- ------
-------------------
--
-
-- ---
------ -
-----
---------- -- ------------------
------------- -- ----------------------
----- -- --------------
------
-
-在上面的代码中，我们在 fetchData 的 Promise resolve 时，保存数据到 localStorage 中，这样下次访问页面时可以从 localStorage 中直接加载数据。当我们刷新页面时，useEffect 会检查本地存储中是否有数据，并将数据加载到组件中。
结语
在本文中，我们介绍了如何使用 React Hooks 实现数据请求和缓存。我们使用 useEffect 发起数据请求，同时利用 useState 定义组件的状态，并将数据保存到 localStorage 中，达到数据缓存的目的。希望本文对你有所帮助，让你更好地掌握 React Hooks 的使用，提高前端开发的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67823ad0935627c900fd8fc3
