使用过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;