如何在 React 中保持页面刷新之间的状态

在本文中，我将向您展示如何在 React 中在页面刷新之间保持状态。请看实际操作：

动图

这种事情称为状态持久性，它允许您即使在页面刷新或关闭浏览器时也能保持状态完整。

状态持久性有很多用例，例如，即使用户离开页面然后再回来，您可能也希望保留表单中的填充字段。

使状态持久化实际上非常容易。我们将为此利用本地存储。

该项目中的演示将使用 TypeScript，但您也可以使用 JavaScript，在这种情况下只需省略类型即可。

所以，事不宜迟，让我们开始吧！

项目结构

我们将创建一个名为 usePersistState() 的钩子，它的使用方式与普通状态钩子无异，但具有持久性。

本文假设您已经知道如何初始化项目，因此我将跳过这一部分。请随意使用任何工具（例如 CRA、Vite、NextJS 等）来创建项目。

我们的项目结构将如下所示

index.tsx - 我们将在该页面测试我们的hook
usePersistState.ts - 我们将在其中保存hook的文件

现在我们已经初始化好了项目结构，我们可以开始编写代码了！

usePresistState.ts

首先，让我们搭建我们的钩子函数：

php 复制代码

export default function usePersistState<T>(initial_value: T, id: string): [T, (new_state: T) => void] {

}

所以我们声明了一个usePersistState具有泛型类型的函数T。作为参数，您可以指定状态的初始值，以及用于识别本地存储中的状态的唯一 ID。最后，我们将其返回类型指定为包含状态和状态设置器函数的数组（就像常规的一样useState()）。

接下来，我们创建一个新_initial_state变量，该变量将确定是使用本地存储中的值还是传递给挂钩的值。

javascript 复制代码

// Set initial value
const _initial_value = useMemo(() => {
    const local_storage_value_str = localStorage.getItem('state:' + id);
    // If there is a value stored in localStorage, use that
    if(local_storage_value_str) {
        return JSON.parse(local_storage_value_str);
    } 
    // Otherwise use initial_value that was passed to the function
    return initial_value;
}, []);

我们在这里所做的是检查 localStorage 是否已经为我们的状态存储了一个项目。如果是，那么我们使用 localStorage 的值作为初始状态。否则我们使用initial_value作为参数传递给我们的钩子的。我们将其包装起来，useMemo以便_initial_value在安装时仅设置一次（因为我们只在安装时需要它）。

_initial_value接下来，让我们添加使用我们在前面的代码片段中定义的状态本身。

scss 复制代码

const [state, setState] = useState(_initial_value);

现在让我们添加一个useEffect在每次状态更改时运行的添加，以便将状态保存到本地存储中：

javascript 复制代码

useEffect(() => {
    const state_str = JSON.stringify(state); // Stringified state
    localStorage.setItem('state:' + id, state_str) // Set stringified state as item in localStorage
}, [state]);

其作用很简单，每当我们state更改时，将state值存储在 localStorage 中。

最后，让我们返回我们的state和setState()。

ini 复制代码

return [state, setState];

就这样,我们的准备工作就完成了！我们的钩子函数已经准备好了，现在我们可以测试一下了！

index.tsx

在中index.tsx，粘贴以下代码：

javascript 复制代码

import { usePersistState } from '@printy/react-persist-state/src/index';
import React from 'react'

export default function PersistStateExample() {

    const [counter, setCounter] = usePersistState(0, 'counter');

    return (
        <div>
            <button
                onClick={() => setCounter(counter + 1)}
            >
                {counter}
            </button>
        </div>
    )
}

我们在这里所做的是counter使用新制作的钩子和一个按钮创建一个状态，该按钮显示值counter并在单击时增加计数器。尝试单击几次，然后刷新页面。您将看到该状态持续存在。您甚至可以完全关闭浏览器并重新打开页面，状态将保持不变！

总结

在本文中，我们学习了如何在 React 中创建持久状态，该状态在刷新页面时不会重置。我希望这篇文章对您有用，并且您会找到使用此方法的方法。