将状态与 localStorage 同步

最初的想法可能是，在一个位置读取 localStorage，在另一个位置写入，但两者可能逐渐不一致。忘记持久化的状态更新，或未反映到状态中的持久化值，都会导致错误。

您需要一个单一事实来源，让 React 状态与存储始终保持同步。

简洁的解决方案是使用 useLocalStorage 钩子封装 useState，并自动持久化更改。它会像 useState 一样返回值和设置函数。

使用者可以像使用普通状态一样使用它，同时无需额外操作就能获得持久化能力。

读取 localStorage 是同步操作，因此不应在每次渲染时执行。请将一个函数传给 useState，也就是使用惰性初始化函数，这样读取操作只会在挂载时执行一次。

在该函数中解析已存储的值，或者返回提供的默认值。

如果直接将初始状态计算结果作为参数传入，即使该结果在第一次渲染后会被忽略，其中的表达式仍会在每次渲染时执行。传入函数后，React 只会调用它一次。

对于 localStorage 读取，这可以避免每次渲染都重复执行同步的主线程操作。

要持久化更新，请添加一个 useEffect，使其在值发生变化时运行，并调用 localStorage.setItem(key, JSON.stringify(value))。

将该值放入依赖数组后，每次状态变化都会自动写入存储。

根据前一个值进行设置时，请使用函数式写法 setValue(prev => prev + 1)。这样可以避免陈旧闭包导致写入旧的捕获值。

对于可能捕获过时快照的事件处理程序和副作用，这一点尤其重要。

getItem 在键不存在时会返回 null。您的初始化函数必须检测这种情况，并回退到默认值，而不是尝试解析空值。

像 stored != null ? JSON.parse(stored) : defaultValue 这样的保护条件可以妥善处理首次访问。

在 TypeScript 中，您可以将钩子设为泛型：function useLocalStorage<T>(key: string, initial: T)。这样可以保留值的类型，让使用者获得完整的类型安全保障。

返回的元组类型为 [T, Dispatch<SetStateAction<T>>]，与 useState 保持一致。

随着时间推移，数据结构会发生变化，旧的存储值可能导致新代码出错。请在数据旁边存储版本键，以便检测过时的格式。

例如，保存 { version: 2, data }，并在读取时比较版本号。

当存储的版本与当前版本不匹配时，请丢弃或迁移旧值，而不要直接信任它。最简单的策略是移除过时的条目，并回退到默认值。

这样可以避免应用程序的新版本因旧版本写入的数据而崩溃。

完整的 useLocalStorage 会将安全读取并解析的惰性初始化函数、支持函数式更新的设置函数，以及通过版本管理写入数据的 useEffect 组合起来。

最终得到的是一个可直接替换 useState 的实现，并且能够在重新加载后保留数据。

检验您对状态初始化的理解。

您学习了如何构建带有惰性初始化函数的 useLocalStorage 钩子，如何通过 useEffect 持久化更改，如何使用函数式更新避免陈旧闭包，以及如何处理空值。

您还了解了 TypeScript 泛型和版本管理，以便安全地清除过时数据。