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]
}
相关推荐
一笑code16 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
ZHOU_WUYI13 天前
GitHub OAuth 认证示例
flask·github·react
SuperherRo13 天前
Web攻防-XSS跨站&浏览器UXSS&突变MXSS&Vue&React&Electron框架&JQuery库&写法和版本
vue.js·electron·jquery·react·xss·mxss·uxss
飞鸟malred15 天前
nextjs入门
前端·react·nextjs
aiguangyuan20 天前
React 动态路由的使用和实现原理
react·前端开发
aiguangyuan20 天前
手写简版React-router
react·前端开发
aiguangyuan20 天前
React-router实现原理剖析
react·前端开发
aiguangyuan20 天前
React 19 新特性
react·前端开发
亦世凡华、21 天前
React--》使用vite构建器打造高效的React组件库
经验分享·react·组件库·组件库开发
菜鸡爱上编程21 天前
React16,17,18,19更新对比
前端·javascript·reactjs·react