Mantine Hooks 中 useLocalStorage 的同步控制优化

背景介绍

Mantine 是一个流行的 React UI 组件库，其中的 @mantine/hooks 包提供了许多实用的自定义 Hook。useLocalStorage 是其中一个常用的 Hook，它简化了在 React 应用中使用 localStorage 的过程。

当前实现分析

目前，useLocalStorage Hook 默认会在不同浏览器标签页之间同步 localStorage 的变化。这是通过在 window 对象上监听 'storage' 事件实现的。当 localStorage 的值发生变化时，Hook 会自动更新所有打开的应用标签页中的状态。

这种默认行为在大多数情况下是有用的，因为它确保了应用状态在不同标签页间的一致性。然而，在某些特定场景下，开发者可能需要更精细的控制，不希望某些 localStorage 的变化触发跨标签页同步。

需求场景

以下是一些可能需要禁用同步功能的场景：

1. 敏感数据操作：当处理敏感信息时，可能不希望变更立即传播到其他标签页
2. 性能优化：对于频繁更新的数据，禁用同步可以减少不必要的事件处理
3. 特定业务逻辑：某些业务场景需要独立维护不同标签页的状态

技术实现建议

可以通过为 useLocalStorage Hook 添加一个 sync 参数来实现这一功能：

interface UseLocalStorageOptions<T> {
  key: string;
  defaultValue?: T;
  sync?: boolean; // 新增参数，默认为 true 保持向后兼容
  // ...其他现有参数
}

在内部实现上，只需要在 dispatchStorageEvent 调用前检查 sync 参数的值：

function createStorageHandler<T>(key: string, sync: boolean) {
  return (event: StorageEvent) => {
    if (event.key === key && sync) {
      // 处理存储事件
    }
  };
}

使用示例

优化后的 Hook 可以这样使用：

// 默认行为，保持同步
const [value1, setValue1] = useLocalStorage({ key: 'sync-data' });

// 禁用同步
const [value2, setValue2] = useLocalStorage({
  key: 'no-sync-data',
  sync: false
});

兼容性考虑

这种修改是完全向后兼容的，因为：

1. sync 参数默认为 true，保持了现有行为
2. 不改变现有 API 签名
3. 不影响现有功能的使用方式

性能影响

禁用同步功能可以带来以下性能优势：

1. 减少不必要的事件监听和处理
2. 降低 React 组件的重渲染次数
3. 对于高频更新的数据，可以显著提升性能

总结

为 useLocalStorage Hook 添加同步控制功能是一个简单而有价值的改进。它提供了更大的灵活性，使开发者能够根据具体需求优化应用性能和行为。这种改进符合 Mantine 的设计理念，即在提供开箱即用功能的同时，也允许开发者进行精细控制。