React 学习——自定义Hook实现，使用规则

使用规则：

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

import {  useState } from "react"

// 封装函数
function useToggle(){
  const [show,setShow] = useState(true);
  const toggle = ()=> setShow(!show)
  return {
    show,toggle
  }
}
// const [num,setNum] = useState(0);//报错原因: 只能在组件(function)中使用
function App(){
  const { show,toggle } = useToggle();
  if( Math.random() > 0.5){
    // const [num,setNum] = useState(0);//报错原因：不能在条件判断中使用，for循环中也不可以
  }
  return (
    <div>
      <button onClick={toggle}>toggle切换</button>
      { show && <div>显示、隐藏div</div>}
    </div>

  )
}
export default App