React学习笔记07

一、自定义Hook函数

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

来个小需求：点击toggle按钮时控制div的显示和隐藏

 不封装直接实现：

function App(){
  const [state,set_state]=useState(true)
  const toggle=()=>set_state(!state)
  return(
    

      {state&&
this is div
}
      toggle
    
  )
}

这样实现会带来一些问题：布尔切换的逻辑是与当前组件偶合在一起的，不方便复用

那么如何解决呢？

自定义Hook

function useToggle() {
  const [state, set_state] = useState(true)
  const toggle = () => set_state(!state)

  return {
    state,
    toggle
  }
}

function App() {
  const { state, toggle } = useToggle()
  return (
    

      {state && 
this is div
}
      toggle
    
  )
}

这里和Vue中完全不同Vue中封装函数都是在script标签中封装，然后在标签中直接使用。

二、在React中封装自定义Hook通用思路：

1、声明一个以use打头的函数

2、在函数体内封装可复用的逻辑（只要是可复用的逻辑）

3、要把组件中用到的状态或者回调return出去（以对象或者数组）

4、在哪个函数中要用到这个逻辑就执行这个函数，结构出来状态和回调进行使用

*tips：这里Hook函数的封装以及使用方法与Pinia非常的相似

三、React Hooks使用规则

1、只能在组件中或者其他自定义Hook函数中使用

2、只能在组件的顶层调用，不可以嵌套在if、for、其它函数中使用

至此，自定义Hook实现与ReactHooks使用规则说明介绍完了，敬请关注下一章：Redux快速上手