• 如何在 React 中保持页面刷新之间的状态
  • 发布于 1个月前
  • 54 热度
    0 评论
这种事情称为状态持久性,它允许您即使在页面刷新或关闭浏览器时也能保持状态完整。状态持久性有很多用例,例如,即使用户离开页面然后再回来,您可能也希望保留表单中的填充字段。使状态持久化实际上非常容易。我们将为此利用本地存储。该项目中的演示将使用 TypeScript,但您也可以使用 JavaScript,在这种情况下只需省略类型即可。

所以,事不宜迟,让我们开始吧!

项目结构
我们将创建一个名为 usePersistState() 的钩子,它的使用方式与普通状态钩子无异,但具有持久性。本文假设您已经知道如何初始化项目,因此我将跳过这一部分。请随意使用任何工具(例如 CRA、Vite、NextJS 等)来创建项目。

我们的项目结构将如下所示
index.tsx - 我们将在该页面测试我们的hook
usePersistState.ts - 我们将在其中保存hook的文件
现在我们已经初始化好了项目结构,我们可以开始编写代码了!

usePresistState.ts
首先,让我们搭建我们的钩子函数:
export default function usePersistState<T>(initial_value: T, id: string): [T, (new_state: T) => void] {

}
所以我们声明了一个usePersistState具有泛型类型的函数T。作为参数,您可以指定状态的初始值,以及用于识别本地存储中的状态的唯一 ID。最后,我们将其返回类型指定为包含状态和状态设置器函数的数组(就像常规的一样useState())。接下来,我们创建一个新_initial_state变量,该变量将确定是使用本地存储中的值还是传递给挂钩的值。
// 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接下来,让我们添加使用我们在前面的代码片段中定义的状态本身。
const [state, setState] = useState(_initial_value);
现在让我们添加一个useEffect在每次状态更改时运行的添加,以便将状态保存到本地存储中:
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()。
return [state, setState];
就这样,我们的准备工作就完成了!我们的钩子函数已经准备好了,现在我们可以测试一下了!

index.tsx
在 中index.tsx,粘贴以下代码:
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 中创建持久状态,该状态在刷新页面时不会重置。我希望这篇文章对您有用,并且您会找到使用此方法的方法。
用户评论