自定义Hook的简单案例

最新推荐文章于 2024-08-16 08:46:29 发布

前端小白白....

最新推荐文章于 2024-08-16 08:46:29 发布

阅读量364

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/m0_60322879/article/details/124604767

版权

react 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

自定义滑动距离top的高度的hook：

import { useState } from 'react'
export function useWindowScroll() {
  const [y, setY] = useState(0)
  // 在滚动行为发生的时候获取滚动距离，交给y
  window.addEventListener('scroll', () => {
    const h = document.documentElement.scrollTop
    setY(h)
  })
  return [y]
}

自定义本地存储hook:

import { useState, useEffect } from "react";

export function useLocalStorage(key, defaultValue) {
  const [message, setMessage] = useState(defaultValue)
  // 只要每次message变化都会同步到本地
  useEffect(() => {
    window.localStorage.setItem(key, message)
  }, [message, key])
  return [message, setMessage]
}

然后导入到app中

import { useWindowScroll } from './Hook/useWindowScroll.js'
import { useLocalStorage } from './Hook/useLocalStorage.js'

function App12() {
  const [y] = useWindowScroll()
  const [message, setMessage] = useLocalStorage('hook-key', '李非')
  setTimeout(() => {
    setMessage('代国永')
  }, 5000)
  return (
    <div style={{ height: '1200px' }}>
      函索组件{y}----{message}
    </div>
  )
}
export default App12