自定义 Hooks 和在 react 核心中讲的自定义高阶组件功能类似。

提示

官方文档：使用自定义 Hook 复用逻辑 (opens new window)

  下面来一个简单示例：

// 自定义hook函数必须遵循 useXxx 写法
function useLogLife() {
  useEffect(() => {
    console.log('组件被创建')

    return function cleanup() {
      console.log('组件被销毁了')
    }
  }, [])
}

const Home = memo(() => {
  useLogLife()

  return <h2>Home Page</h2>
})

监听窗口滚动位置

function useScrollPosition() {
  const [scrollX, setScrollX] = useState(0)
  const [scrollY, setScrollY] = useState(0)

  useEffect(() => {
    function handleScroll() {
      setScrollX(window.scrollX)
      setScrollY(window.scrollY)
    }

    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return [scrollX, scrollY]
}

关于 storage 操作的封装

function useLocalStorage(key) {
  const [data, setData] = useState(() => {
    const item = localStorage.getItem(key)
    if (!item) return ''
    return JSON.parse(item)
  })

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(data))
  }, [data])

  return [data, setData]
}