实现一个自定义 React Hook:UseLocalStorageState

更新日期: 2022-06-06阅读: 896标签: Hook

大家好,我是前端西瓜哥。

最近做需求,需要将数据保存到 localStorage 里,在组件初始化的时候获取,然后修改该值的时候,要保存到本地的 localStorage 中。

倒是并不难。

function App() {
  const STORAGE_NAME = 'app_theme';
  const defaultVal = '前端西瓜哥'
  const [value, setValue] = useState(() => {
    const storage = localStorage.getItem(STORAGE_NAME);
    return storage || defaultVal;
  }) 
  const changeValue = (val) => {
    localStorage.setItem(STORAGE_NAME, val);
    setValue(val);
  }
  return (
    <div>
      <input value={value} onChange={e => changeValue(e.target.value)}/>
    </div>
  );
}

很显然,这些逻辑完全可以封装为一个 react Hook,名字很容易想到为 useLocalStorageState。

const useLocalStorageState = (key, defaultValue) => {
  const data = localStorage.getItem(key);
  const [value, setValue] = useState(data || defaultValue);
  return [
    value,
    (val) => {
      localStorage.setItem(key, val);
      setValue(val);
    }
  ];
};

逻辑并不复杂。就是在读和写的时候,加上 localStorage 的读写逻辑就好了。

用法如下:

function App() {
  const STORAGE_NAME = "app_theme";
  const defaultVal = "前端西瓜哥";
  const [value, setValue] = useLocalStorageState(STORAGE_NAME, defaultVal);
  return (
    <div>
      <input value={value} onChange={e => setValue(e.target.value)} />
    </div>
  );
}

其实这个实现还是比较粗糙的,只支持字符串格式,如果你要保存对象,需要自己手动 JSON.parse 和 JSON.stringify 来扩展了数据类型的范围。

我们可以加一下序列化和反序列化支持:

const useLocalStorageState = (key, defaultValue) => {
  const data = localStorage.getItem(key);
  const [value, setValue] = useState(JSON.parse(data || defaultValue));
  return [
    value,
    (val) => {
      localStorage.setItem(key, JSON.stringify(val));
      setValue(val);
    }
  ];
};
// 使用
function App() {
  const STORAGE_NAME = "app_theme";
  const defaultVal = { name: "前端西瓜哥" };
  const [value, setValue] = useLocalStorageState(STORAGE_NAME, defaultVal);
  return (
    <div>
      <input
        value={value.name}
        onChange={(e) => setValue({ name: e.target.value })}
      />
    </div>
  );
}

另外,JSON 序列化和反序列方法如果不够用,我们可以再加个自定义序列反序列化方法:

const useLocalStorageState = (key, defaultValue, serializer, deserializer) => {
  defaultValue = localStorage.getItem(key) || defaultValue;
  const [value, setValue] = useState(
    deserializer ? deserializer(defaultValue) : JSON.parse(defaultValue)
  );
  return [
    value,
    (val) => {
      localStorage.setItem(
        key,
        serializer ? serializer(val) : JSON.stringify(val)
      );
      setValue(val);
    }
  ];
};

其实优秀的第三方 React Hook 库 ahooks 也有这个实现,我还是建议大家用一些比较成熟的轮子,我这里只是提供一下思路。

ahooks 的 useLocalStorageState 的源码:https://github.com/alibaba/hooks/blob/v3.4.0/packages/hooks/src/useLocalStorageState/index.ts。

来源: https://www.toutiao.com/article/7103547075966566923/

链接: https://www.fly63.com/article/detial/11658

分享 10 个可以使用 Vue.js 制作的有用的自定义钩hook

Vue.js 是我使用的第一个 JavaScript 框架。 我可以说 Vue.js 是我进入 JavaScript 世界的第一扇门之一。 目前,Vue.js 仍然是一个很棒的框架。 我认为有了组合 API,Vue.js 只会增长得更多

pytest插件探索——hook开发

conftest.py可以作为最简单的本地plugin调用一些hook函数,以此来做些强化功能。pytest整个框架通过调用如下定义良好的hooks来实现配置,收集,执行和报告这些过程:

React中useState Hook 示例

到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组件。编写 class Thing extends React.Component,将函数体复制到render()方法中,修复缩进,最后添加需要的状态。

useContext Hook 是如何工作的?

所有这些新的React Hook之间都有一个宗旨:就是为了使函数组件像类组件一样强大。useContext hook 与其它几个有点不一样,但它在特定场景下还是很有用的。React 的 Context API 是一种在应用程序中深入传递数据的方法

结合React的Effect Hook分析组件副作用的清除

我们在DidMount的时候通过ID订阅了好友的在线状态,并且为了防止内存泄漏,我们需要在WillUnmount清除订阅,但是当组件已经显示在屏幕上时,friend prop 发生变化时会发生什么?

结合高阶函数聊聊useMemo和useCallback

useCallback和useMemo是其中的两个 hooks,本文旨在通过解决一个需求,结合高阶函数,深入理解useCallback和useMemo的用法和使用场景。 之所以会把这两个 hooks 放到一起说,是因为他们的主要作用都是性能优化

关于为什么使用React新特性Hook的一些实践与浅见

Hook是对函数式组件的一次增强,使得函数式组件可以做到class组件的state和生命周期。Hook的语法更加简练易懂,消除了class的生命周期方法导致的重复逻辑代码,解决了高阶组件难以理解和使用困难的问题。

React封装强业务hook的一个例子

最近因为使用列表展示的需求有点多,就想着把列表分页筛选的逻辑抽象一下。看了umi的一个useTable的hook,也不能满足业务需要,于是就自己写了一个,支持本地分页筛选和接口分页筛选。

React官方团队出手,补齐原生Hook短板

然而实际上,由于回调函数被useCallback缓存,形成闭包,所以点击的效果始终是sendMessage()。这就是「闭包陷阱」。以上代码的一种解决方式是「为useCallback增加依赖项」

为什么Hook没有ErrorBoundary?

在很多全面使用Hooks开发的团队,唯一使用ClassComponent的场景就是使用ClassComponent创建ErrorBoundary。可以说,如果Hooks存在如下两个生命周期函数的替代品,就能全面抛弃ClassComponent了:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!