自定义 Hooks 函数

介绍

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

示例

App

import useToggle from '../../hooks/useToggle'

function App() {
  const { value, toggle } = useToggle()

  return (
    <div>
      {value && <p>hello</p>}
      <button type="button" onClick={toggle}>
        Click
      </button>
    </div>
  )
}

export default CustomHooks

useToggle

import { useState } from 'react'

function useToggle() {
  const [value, setValue] = useState(true)

  function toggle() {
    setValue(!value)
  }

  return {
    value,
    toggle,
  }
}

export default useToggle

React Hooks 使用规则

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

   import useState from 'react'
   
   useState() // ❌
   
   function App() {
     return <div>App</div>
   }

2. 只能在组件的顶层调用，不能嵌套在 if、for、其他函数中

   import useState from 'react'
   
   function App() {
     if (flag) {
       useState() // ❌
     }
   
     return <div>App</div>
   }