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]
}