在函数中使用定时器
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>) }
