React 中 useEffect 语法详解

1. 基本语法

useEffect(effectFn, deps)

effectFn:回调函数

deps:函数的依赖

2. 能力描述

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

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

3. 案例演示

3.1. 修改标题

javascript 复制代码
import { useEffect } from "react"

function App() {
    // 页面加载完成后,修改标题
    useEffect(()=>{
        document.title="React后台管理系统"
    })
    return (
        <div>
            <p>欢迎学习React后台课程</p>
        </div>
    )
}
export default App

3.2. 修改状态值

javascript 复制代码
import { useEffect,useState } from "react"

function App() {
    const [count,setCount] = useState(0)
    // 页面加载完成后,修改状态值
    useEffect(()=>{
        setCount(count+1);
    },[])
    // 一定要有依赖,否则发生死循环
	return (
		<div>
            <p>
                Count:{count}
            </p>
        </div>
	)
}

export default App

3.3. 根据依赖修改状态值

javascript 复制代码
import { useEffect,useState } from "react"


function App() {

    const [count,setCount]= useState(0);
    const [total,setTotal] = useState(0);


    // 页面加载完成后,根据依赖修改状态值
    useEffect(()=>{
        setTotal(count * 5)
    },[count])


    return (
        <div>
            <p>
                Count:{count}
                Total:{total}
            </p>
        </div>
    )
}

export default App

3.4. 销毁定时器

javascript 复制代码
import { useEffect,useState } from "react"


function App() {
    const [count,setCount] = useState(0)
    // 页面关闭后,消毁定时器
    useEffect(()=>{
        const timer = setInterval(()=>{
            setCount(count=>count+1);
        },1000)
        return ()=>{
            clearInterval(timer);
        }
    },[])

	return (
		<div>
            <p>
                Count:{count}
            </p>
        </div>
	)
}

export default App

3.5. 自定义Hook

javascript 复制代码
import { useWindowSize } from './useWindowSize.tsx'
function App() {
    const [size] = useWindowSize()
	return (
		<div>
            <p>
                window width : {size.width}
                window height : {size.height}
            </p>
        </div>
	)
}
export default App

上面代码中引入的组件如下:

javascript 复制代码
import { useEffect,useState } from "react"

export function useWindowSize(){

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

    const handleResize=()=>{
        setSize({
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        })
    }

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

    return [size]
}
相关推荐
全栈老李技术面试3 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kidding7234 天前
微信小程序怎么分包步骤(包括怎么主包跳转到分包)
前端·微信小程序·前端开发·分包·wx.navigateto·subpackages
zyk_5208 天前
前端渲染pdf文件解决方案
javascript·pdf·react
百锦再11 天前
Python实现浏览器模拟访问及页面解析的全面指南
开发语言·前端·javascript·python·vue·框架·react
zy01010112 天前
useEffect
开发语言·前端·javascript·react·useeffect
~央千澈~14 天前
剖析AI与5G:是夸大其词,还是时代变革的引擎?-优雅草卓伊凡
物联网·5g·前端开发
ace_TiAmo14 天前
React8+taro开发微信小程序,实现lottie动画
微信小程序·小程序·react·taro
百锦再17 天前
Reactive编程框架与工具
前端·javascript·python·django·vue·框架·react
黄毛火烧雪下19 天前
umi框架开发移动端h5
react·umi
疏狂难除20 天前
【Tauri2】013——前端Window Event与创建Window
前端·javascript·rust·react·tauri2