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