自定义 React localStorage Hook 以简化您的状态管理

2023-12-10 23:05:53

在React应用程序中，管理状态是至关重要的。状态是应用程序中随着时间而变化的数据，例如表单字段的值、用户首选项和购物车中的商品。

localStorage是一个浏览器API，允许我们在浏览器中存储数据，即使在浏览器关闭后数据也不会丢失。

1. 定义Hook

创建一个名为useLocalStorage的自定义React Hook。此Hook将接受一个键和一个默认值作为参数，并返回一个值和一个更新函数的数组。

import { useState } from 'react';

const useLocalStorage = (key, defaultValue) => {
  const [value, setValue] = useState(() => {
    const localStorageValue = window.localStorage.getItem(key);
    return localStorageValue !== null ? JSON.parse(localStorageValue) : defaultValue;
  });

  const updateValue = (newValue) => {
    window.localStorage.setItem(key, JSON.stringify(newValue));
    setValue(newValue);
  };

  return [value, updateValue];
};

export default useLocalStorage;

2. 使用Hook

在React组件中，您可以使用useLocalStorage Hook来存储和更新本地数据。

import useLocalStorage from './useLocalStorage';

const MyComponent = () => {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <div>
      <button onClick={() => setTheme('dark')}>Switch to Dark Theme</button>
      <p>Current theme: {theme}</p>
    </div>
  );
};

export default MyComponent;