【React】useEffect

1. 基本介绍

概念
语法

副作用函数+依赖项数组（空数组时，只会在组件渲染完毕后执行一次副作用函数）

2. 使用

import { useEffect, useState } from 'react'function App() {const [value, setValue] = useState(0)useEffect(() => {console.log('组件渲染完毕')}, [])useEffect(() => {console.log('value的值发生了变化')}, [value])return (<div className="App"><button onClick={() => {setValue(value+1)}}>click me, after:{value}</button></div>);
}export default App;

在这里插入图片描述

1.3 依赖项参数说明

在这里插入图片描述

import { useEffect, useState } from 'react'function App() {const [value, setValue] = useState(0)const [count, setCount] = useState(100)useEffect(() => {console.log('组件渲染完毕')}, [])useEffect(() => {console.log('value的值发生了变化')}, [value])useEffect(() => {console.log('组件初始化 或者 组件更新(value、count变化，组件都会更新）')})return (<div className="App"><button onClick={() => {setValue(value+1)}}>plus, after:{value}</button><button onClick={() => {setCount(count-1)}}>minus, after:{count}</button></div>);
}export default App;

在这里插入图片描述

1.4 清除副作用

概念：
在这里插入图片描述
执行时机：组件卸载

import { useEffect, useState } from 'react'
function Son() {useEffect(() => {const timer = setInterval(() => {console.log('定时器运行中...')}, 1000)return () => {clearInterval(timer)}}, [])return <div>子组件</div>
}function App() {// 通过控制isShow状态变量来模拟子组件的销毁const [isShow, setIsShow] = useState(true)return (<div className="App">{isShow && <Son />}<button onClick={() => { setIsShow(false) }}>点击我，隐藏子组件</button></div>);
}export default App;