如何写一个react自定义的hooks？-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何写一个react自定义的hooks？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用过useState，也使用过ahook的useSetState，我们知道useState和useSetState左边赋值的第一个参数是接收初始值的变量和设置变量的方法，这里左边用的是数组解构实现的。所以，这里我们想一下，如何自定义一个hooks，也可以像useState和useSetState那样呢？

[a, setA] = useState();

按我个人的理解，react自定义hooks其实就是个函数，函数里可以使用useState、useSetState、useEffect，可以任意返回结果。下面我们以hooks的useBoolean为例，我写一个hooks。

1.写一个hooks


import {useEffect, useState} from 'react';

function useBoolean(b: boolean = true): any {
  const [B, setB] = useState(false);
  const toggle = () => setB(!B);
  const set = () => setB(b);
  const setTrue = () => setB(true);
  const setFalse = () => setB(false);
  useEffect(() => {
    setB(b);
  }, []);
  return [B, { toggle, set, setTrue, setFalse }];
};

export default useBoolean;

我们定义一个useBoolean的函数，函数使用useState定义一个B变量和setB方法用于改变状态，给B赋一个初始值false，在useEffect里设置调用useBoolean时赋的值，然后返回一个数组，数组的值分别是B变量，包含toggle, set, setTrue, setFalse等设置B变量的方法。至此，一个简单的hooks就实现了。

2.使用

const [B, { toggle, set, setTrue, setFalse }] = useBoolean();
console.log(B, new Date().getTime())

这里调用useBoolean，然后输出B变量，会发现B变量输出了两次，问题出在哪呢？原来是useBoolean hooks里的useEffect赋了值导致的。所以我们改进一下，注释掉useEffect，把const [B, setB] = useState(false);改成const [B, setB] = useState(b);，不使用useEffect去赋B变量初始值了。文章来源地址https://www.toymoban.com/news/detail-840184.html

import {useEffect, useState} from 'react';

function useBoolean(b: boolean = true): any {
  const [B, setB] = useState(b);
  const toggle = () => setB(!B);
  const set = () => setB(b);
  const setTrue = () => setB(true);
  const setFalse = () => setB(false);
  // useEffect(() => {
  //   setB(b);
  // }, []);
  return [B, { toggle, set, setTrue, setFalse }];
};

export default useBoolean;

到了这里，关于如何写一个react自定义的hooks？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！