useEffect语法讲解

最新推荐文章于 2024-07-26 20:46:33 发布

小李科技

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量231

点赞数

分类专栏： # S2.React hooks.formik 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_35812380/article/details/135188663

版权

S2.React hooks.formik 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

useEffect语法讲解

用法

useEffect(effectFn, deps)

能力

useEffect Hook 相当于 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

可以模拟渲染后、更新后、销毁三个动作。

案例演示

渲染后更新标题

useEffect(()=>{
    document.title = 'React后台课程'
},[])

渲染后更新Count值

const [count, setCount] = useState(0)

useEffect(()=>{
    setCount(count+1)
},[])

点击按钮，更新name值

const [total, setTotal] = useState(0)
const [count, setCount] = useState(0)
useEffect(()=>{
    setTotal(count*5)
},[count])

销毁定时器

const [count, setCount] = useState(0)

useEffect(() => {
  const T = setInterval(() => {
    setCount(count => count + 1)
  }, 3000)
  return () => {
    clearInterval(T)
  }
}, [])

自定义Hook（获取浏览器宽高）

export function useWindowSize() {

    const [size,setSize] = useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })

    const onResize = useCallback((node)=>{
        setSize({
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        })
    },[])

    useEffect(()=>{
        window.addEventListener('resize',onResize)
        return()=>{
            window.removeEventListener('resize',onResize)
        }
    },[])


    return [size]
}