react--自定义Hook实现

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

import { useState } from "react"
  //问题：布尔切换的逻辑，和当前组件耦合在一起
  // 不可以复用，想要在任意地方方面复用--自定义hook函数--useToggle
  function useToggle(){
    //可复用的逻辑
    
 const [value,setValue]= useState(true)
 const toggle = ()=>setValue(!value)
 //那些状态和回调函数，需要在其他组件中使用
 return {
  value,
  toggle
 }
  }

//封装自定义hook的思路：
// 先去声明一个以use大头的函数，
// 在函数体内封装我们可复用的函数，
// 把组件中用到的状态或者回调return出去（以对象数组都可以）
// 在每个组件中要用到这个逻辑，或执行这个函数，解构出来的状态和回调进行使用

function App () {
  const {value,toggle}=useToggle()
  return (
    <div>
      {value &&<div>this is div</div>}
      <button onClick={toggle}>toggle</button>
      
    </div>
  )
}

export default App