如何写一个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变量初始值了。

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;