react中用useEffect模拟组件生命周期
关于useEffect
·
1. react中的生命周期
react中的class组件是拥有生命周期的。
生命周期分为:mounting,updating,unmounting三个阶段。
不同生命周期阶段包括不同的生命周期函数:
mounting阶段:constructor,componentWillMount,render,componentDidMount
updating阶段:componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate
unmounting阶段:componentWillUnmount
2. react中的函数组件可以用useEffect模拟生命周期
在16.8之后,react提供了hooks,因此函数组件也可以用hooks进行状态管理并且也可以用useEffect模拟class组件的生命周期。
// 模拟 class 组件的 componentDidMount 和 componentDidUpdate
// 第一个参数执行函数,第二个参数不传
useEffect(() => {
console.log('DidMount 和 DidUpdate')
})
// 模拟 class 组件的 componentDidMount
// 第一个参数执行函数,第二个参数传空数组[]
useEffect(() => {
console.log('加载完了componentDidMount')
}, []) // 第二个参数是 [] (不依赖于任何 state)
// 模拟 class 组件的 componentDidUpdate
// 第一个参数执行函数,第二个参数传state数组
useEffect(() => {
console.log('更新了')
}, [count, name]) // 第二个参数就是依赖的 state
// 模拟 class 组件的 componentDidMount 和 componentWillUnmount
useEffect(() => {
let timerId = window.setInterval(() => {
console.log(Date.now())
}, 1000)
// 返回一个函数
// 模拟 componentWillUnmount 组件销毁的时候 停止计时器
return () => {
window.clearInterval(timerId)
}
}, [])
3. useEffect中第一个参数是一个执行函数,在有依赖项时它的return什么时候执行?
当第二个参数依赖项不为空数组时,前一个函数中的return会在再次执行useEffect前执行,可以用于回收之前的计时器等。
React.useEffect(() => {
// 执行计时
let timeGo;
if (open) {
timeGo = setInterval(() => {
if (sec === 0) {
setSec(30);
setOpen(false);
} else {
setSec(sec - 1)
};
}, 1000);
};
return () => { clearInterval(timeGo); }
});
4. useEffect的依赖项是做浅比较
因为react中一般是浅比较,所以useEffect的依赖项如果需要比较对象类型的话,需要用JSON.stringfy来进行转换比较。
5. useEffect的副作用
useEffect第一个参数是一个回调函数,在依赖项发生变化的时候,会执行它,也被称为副作用函数。
可以在里面进行相应的生命周期阶段的操作,异步请求,设定计时器等,可以通过副作用函数的return来清除副作用,比如回收计时器。
更多推荐
已为社区贡献1条内容
所有评论(0)