十、【react】自定义Hook函数

1. 先自定义一个use开头的函数
2. 在函数中添加要复用的部分
3. 需要在外面用到的给他return回去
4. 在要使用的地方直接解构赋值导入即可使用

import { useEffect, useState } from "react";

function useToggle(){
    const [show, setShow] = useState(true);
    const toggle = () => {
        setShow(!show);
    }
    return {show, toggle};
}

function Son(){

    useEffect(()=>{
        const timer = setInterval(()=>{
            console.log("定时器执行中...");
        },1000)
        return () => {
            console.log("useEffect清除定时器...");
            clearInterval(timer);
        }
    },[])

    return (
        <div>
            {"Son"}
        </div>
    )  
}

  

function App4(){
    const {show, toggle} = useToggle();

    return (
        <div>
            {show && <Son/>}
            <button onClick={() => toggle()}>{show? "显示" : "隐藏"}</button>
        </div>
    )
}

export default App4;

使用规则

1. 只能在组件中或者其他自定义Hook函数中调用
2. 只能在组件的顶层调用，不能嵌套在 if、for、其他函数中