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 天前
Vue前端开发:元素动画效果之过渡动画
前端·vue.js·前端框架·前端开发·vue前端
放逐者-保持本心,方可放逐9 天前
react 框架应用+总结+参考
前端·前端框架·react
白泽来了9 天前
我开源了一个短视频应用(Go+React)|DouTok2.0 项目介绍
微服务·开源·go·react
星辰大海141210 天前
react 基础学习笔记
前端·javascript·笔记·学习·react·1024程序员节
canonical-entropy11 天前
从React Hooks看React的本质
前端·前端框架·react·hooks·1024程序员节
不知名靓仔11 天前
React常用前端框架合集
前端框架·react
廖秋林12 天前
Vite React 项目绝对路径配置
javascript·typescript·react
长河13 天前
React18-useEffect函数
前端·react·1024程序员节
华为云开发者联盟17 天前
几行代码带你用TinyEngine低代码引擎开发侧边栏插件
低代码·开源·前端开发·tinyengine
aiguangyuan18 天前
Webpack一键打包多个环境
webpack·前端开发