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]
}
相关推荐
AI_Auto1 天前
AI Agent系列(八) -基于ReAct架构的前端开发助手(DeepSeek)
人工智能·react·ai agent
YiHanXii2 天前
Axios 相关的面试题
前端·http·vue·react
百锦再3 天前
Reactive编程:应用场景和传统比较
运维·开发语言·javascript·python·flask·react·tornado
知识分享小能手4 天前
CSS3学习教程,从入门到精通,CSS3 弹性盒子(Flexbox)布局全面指南(20)
前端·javascript·css·学习·css3·html5·前端开发
冴羽yayujs5 天前
SvelteKit 最新中文文档教程(12)—— 高级路由
前端·javascript·vue.js·前端框架·react·svelte·sveltekit
shmily_yyA6 天前
Nextjs15 - 什么是CSR、SSR、SSG和ISR
前端·react
小周不摆烂6 天前
React 揭秘:从新手到高手的进阶之路
前端框架·react
渴望成为python大神的前端小菜鸟7 天前
2025前端面试题(vue、react、uniapp、微信小程序、JS、CSS、其他)
前端·javascript·vue.js·面试·微信小程序·uni-app·react
aiguangyuan11 天前
第六篇:Setup:组件渲染前的初始化过程是怎样的?
javascript·vue·前端开发
冴羽yayujs12 天前
SvelteKit 最新中文文档教程(6)—— 状态管理
前端·javascript·vue.js·前端框架·react·svelte·sveltekit