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]
}
相关推荐
叫我阿柒啊34 分钟前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
lypzcgf2 天前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台
小浣熊喜欢揍臭臭3 天前
react+umi项目如何添加electron的功能
javascript·electron·react
叫我阿柒啊3 天前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
叫我阿柒啊3 天前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
lypzcgf3 天前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
摘星编程3 天前
Cursor Pair Programming:在前端项目里用 AI 快速迭代 UI 组件
前端·人工智能·ui·typescript·前端开发·cursorai
布兰妮甜4 天前
封装Element UI中el-table表格为可配置列公用组件
vue.js·ui·el-table·前端开发·element-ui
叫我阿柒啊5 天前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest