import React,{
useState,useEffect } from "react"
export default function FunComp(){
const [ count, setCount ] = useState(0)
const [ width, setWidth ] = useState(document.body.clientWidth)
const onChange = () => {
setWidth(document.body.clientWidth)
}
useEffect(() => {
// 相当于 componentDidMount
window.addEventListener('resize', onChange, false)
return () => {
console.log('销毁了')
// 相当于 componentWillUnmount
window.removeEventListener('resize', onChange, false)
}
}, [])
useEffect(() => {
document.title = count
// 相当于 componentDidUpdate
})
useEffect(() => {
console.log(`count change: count is ${
count}`)
}, [ count ])
return (
<div>
页面名称: {
count }
页面宽度: {
width }
<button onClick={
() => {
setCount(count + 1)}}>点我</button>
</div>
)
}
react useEffect 模拟生命周期
猜你喜欢
转载自blog.csdn.net/qq_42107364/article/details/120949851
今日推荐
周排行