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;