在 React 开发过程中，有时我们需要在函数组件的某个阶段或事件处理函数中访问到上一次的状态值。然而，React 并未提供直接获取上一状态的内置机制。为了解决这个问题，我们可以采用一种名为 usePrevious 的自定义 Hook。本文将详细介绍 usePrevious 的实现原理与应用，并以实际代码示例展示其在 React 函数组件中的使用。
usePrevious 的实现原理
usePrevious Hook 主要依赖于 React 的两个核心特性：useRef 和 useEffect。下面我们将逐一解释这两个特性在实现 usePrevious 中的作用。
useRef
useRef 是 React 提供的一个 Hook，，用于创建一个可变的引用对象。这个引用对象具有稳定的 .current 属性，其值可以在组件的整个生命周期中保持不变，即使组件重新渲染。这意味着我们可以将任何类型的值赋给 .current，并在后续的渲染周期中访问到它，不受重新渲染的影响。
useEffect
useEffect 是 React 中处理副作用的 Hook，它允许我们在函数组件中执行那些需要清理的操作，如订阅、手动更改 DOM、设置定时器等。在实现 usePrevious 时，我们利用 useEffect 监听指定状态的变化，并在变化发生时更新 useRef 引用对象的 .current 值。
usePrevious 的实现
基于上述原理，我们可以编写 usePrevious 自定义 Hook 如下：
import { useEffect, useRef } from 'react';
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
在这个 Hook 中：
- 首先，通过 useRef() 创建一个引用对象 ref，初始值为空。
- 接着，定义一个 useEffect，其回调函数将传入的 value 赋值给 ref.current 数组 [value]，确保当 value 变化时才会触发 useEffect。
- 最后，usePrevious 返回 ref.currentlue 的值。
使用 usePrevious 获取上一状态
现在，我们可以在函数组件中使用 usePrevious 来追踪某个状态变量（如 count）的上一值。以下是一个简单的计数器组件示例：
import React, { useState } from 'react';
import { usePrevious } from './usePrevious'; // 引入自定义 Hook
const Counter = () => {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
return (
<div>
<p>Previous count: {prevCount}</p>
<p>Current count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
在这个组件中：
- 我们使用 useState 初始化并管理 count 状态。
- 通过 usePrevious(count) 调用自定义 Hook，获取 count 的上一值，并将其赋值给 prevCount。
- 在 JSX 渲染部分，分别展示 prevCount（上一状态值）和 count（当前状态值）。
- 当用户点击 “Increment” 按钮时，触发 setCount(count + 1)，更新 count 状态。
每当 count 状态发生变化时，useEffect 内部的回调函数会执行，将新的 count 值保存到 ref.current。由于 ref 引用对象在组件重新渲染时保持不变，usePrevious 返回的 prevCount 总是保持着 count 的上一次状态。这样，即便 count 增加，prevCount 依然显示更新前的值，实现了展示上一状态的功能。
总结来说，usePrevious 自定义 Hook 结合了 React 的 useRef 和 useEffect 特性，为我们提供了一种便捷的方法来追踪和访问 React 组件中上一状态的值。这一技巧在处理依赖于前后状态差异的逻辑时尤为有用，有助于提高代码的清晰度和可维护性。
本文由mdnice多平台发布
