React中useEffect、useCallBack、useLayoutEffect
在函数中使用定时器
import { useEffect, useState } from "react";
export default function Funcom() {
useEffect(() => {
setInterval(() => {
console.log('我在执行---')
}, 1000)
}, [])
return (<div>我是组件</div>)
}
当我们切换组件的时候,组件别销毁的时候。
定时器也在触发。
如何在组件卸载的时候清除定时器呢?
我们可以使用 useEffect 中使用 return () => { }
在上面这个函数里面清除定时器
函数中使用 useEffect 清除定时器器
import { useEffect, useState } from "react";
export default function Funcom() {
useEffect(() => {
let timer= setInterval(() => {
console.log('我在执行---')
}, 1000)
// 当没有依赖的时候,组件销毁的时候执行
// 当它有依赖的时候,组件更新的时候回被执行
return () => {
console.log('当没有依赖的时候,组件销毁的时候执行')
clearInterval(timer)
}
}, [])
return (<div>我是组件</div>)
}
现在当我们切换页面后,
定时器也被清除了。
特别注意的是:useEffect:当没有依赖的时候,组件销毁的时候执行 return () => { }
useEffect:当它有依赖的时候,组件更新的时候回被执行 return () => { }
ps:在一个组件中,useEffect可以使用多次。
而生命周期钩子函数只可以使用一次,后面的会覆盖前面的生命周期钩子函数
useEffect和useLayoutEffect的区别
好奇
import { useEffect, useState } from "react";
export default function Funcom() {
const [count, setCount] = useState(1)
function addHandler() {
setCount(count+1)
}
return (<div>
<button onClick={addHandler}>计数器</button>
<h1>{ count }</h1>
</div>)
}
上面这一段代码,当我们点击按钮的时候。
count的数值会+1;视图也会更新。
难道大家不好奇吗?
当我们点击按钮的时候, 整个 Funcom组件都会更新一次,重新渲染一遍。
它怎么可能会保存住 count的值?是不是是不是挺好奇的呢?
有的小伙伴可能不相信:
当我们点击按钮的时候, 整个 Funcom组件都会更新一次,重新渲染一遍。
我们通过一个小粒子来看一下
小粒子-整个 Funcom组件都会更新一次,重新渲染一遍
import { useEffect, useState } from "react";
export default function Funcom() {
const [count, setCount] = useState(1)
let myunm=1
const addHandler=()=> {
setCount(count + 1)
myunm = myunm + 1
console.log(myunm ) //永远输出的是2
}
return (<div>
<button onClick={addHandler}>计数器</button>
<h1>{count}</h1>
</div>)
}
我们发现控制台永远输出的都是2.
可是我每次点击的时候,都给 myunm新增了+1;
怎么每次都是2呢?
因为每次点击的时候 Funcom 组件都被渲染了一次。
因此myunm每次的初始值都是1。所以每次打印出来的是2
记忆函数 useCallBack
防止因为组件重新渲染,导致方法被重新定义。这样性能不太好。
为了实现起到缓存的作用。提高性能。
我们可以使用 useCallBack 记忆函数。
可以帮助我们起到缓存的作用,只有第二个参数发生变化,才会重新声明一次。
useCallback的简单使用
import { useState,useCallback } from "react";
export default function Funcom() {
const [count, setCount] = useState(1)
const addHandler = useCallback(() => {
setCount(count + 1)
}, [count])
//只有当count发生变化后, addHandler 才会被重新声明一次。 提升性能
return (<div>
<button onClick={addHandler}>计数器</button>
<h1>{count}</h1>
</div>)
}
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
支付宝
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。