react自定义hooks函数

xue03052024-12-19 21:12

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

例如：这里多个地方要使用一个函数来控制元素的显示隐藏

javascript 复制代码

import { useState } from "react"

function useToggle () {
  // 可复用的逻辑代码
  const [value, setValue] = useState(true)
  const toggle = () => setValue(!value)
  // 哪些状态和回调函数需要在其他组件中使用 return
  return {
    value,
    toggle
  }
} 
export {useToggle}


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

export default App

封装UI组件

UI组件是负责数据的渲染，不需要use开头也就是一些通用的html

React Hooks使用规则

只能在组件中或者其他自定义Hook函数中调用例如在function App () {)函数当中调用
只能在组件的顶层调用，不能嵌套在if、for、其它的函数中