1.声明函数
说明：声明一个以use打头的函数
function useToggle(){}2.封装
说明：在函数体内封装可复用的逻辑
const [value,setValue]=useState(true)const toggle=()=>{setValue(!value)}3.返回
说明：把组件中用到的状态或者回调return
return {value,toggle}4.解构
说明：组件中用到这个逻辑，就执行这个函数同时解构出变量
const {value,toggle}=useToggle()5.源码
//封装自定义Hook
// 问题 ：布尔值的逻辑 当前组件耦合在一起的 不方便复用import { useState } from "react";function useToggle(){const [value,setValue]=useState(true)const toggle=()=>{setValue(!value)}return {value,toggle}
}function App() {
const {value,toggle}=useToggle()return (<div>{ value&&<div>this is div</div>} <button onClick={toggle}>toggle</button></div>);
}export default App;
6.使用规则
说明： 只能在组件中或者其他自定义Hook函数中调用；只能在组件的顶层调用，不能在if、for、其他函数中调用函数。
)
