React自定义Hook

itmacy2024-10-11 9:42

自定义Hook函数

概念：自定义Hook是以use打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用

js 复制代码

import {useState} from "react";

function CompA () {
    return <div>这是子组件</div>
}

// 自定义hook
function useToggle() {
    const [show, setShow] = useState(true)
    const toggle = () => setShow(!show)
    return {
        show,
        toggle,
    }
}

function App() {
    const {show, toggle} = useToggle()
    return (
        <div>
            {show && <CompA/>}
            <button onClick={() => toggle()}>点击</button>
        </div>
    );
}

React Hook使用规则

使用规则

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