react:自定义hook

在react中，如果某个功能被经常用到，那么可以把它封装成hook

hook就是一个普通的function，要求方法名必须以use开头:

const useXXX = () =>{
  //todo
}

来看下面这个例子：

小明接到了一个项目，组件经常需要获取window width，由于小明没有学习如何自定义hook，结果他就把代码写成这样

可以看到出现了大量重复性代码

我们帮他进行优化：

import { memo, useEffect, useState } from 'react'

const useWindwidth = () => {
  const [windowSize, setWindowSize] = useState<number>(1920)

  useEffect(() => {
    const handleWindowSizeChange = () => {
      setWindowSize(window.innerWidth)
    }

    window.addEventListener("resize", handleWindowSizeChange)

    return () => {
      window.removeEventListener("resize", handleWindowSizeChange)
    }
  }, [])
  return windowSize
}

const App = memo(() => {
  const width = useWindwidth()
  return (
    <div>
      width: {width}
    </div>
  )
})

export default App

来看看效果：

react:自定义hook a year ago