React Hook的useCallback,memo,usememo的使用

1、useCallback

每当组件重新渲染的时候，我们之前定义的函数就会被重新声明一次，即使这个函数不需要做出改变。这时可以使用useCallback。useCallback主要用于缓存一个函数。

useCallback接收两个参数，第一个参数为一个回调函数，第二个参数为依赖数组。只有当依赖数组中的成员发生变化时，才进行重新声明该回调函数。

一个简单的demo

mport React,{useCallback,useState} from 'react'

export default function UseCallback() {
    const [text,settext] = useState("小明")
    const fun = useCallback(()=>{
        console.log(text)  
    },[text])
    return (
        <div>
            <button onClick={_=>{
                fun()
                settext("小美")
            }}>click</button>
        </div>
    )
}
           

这段代码第一次点击的时候，输出为小明，第二次点击输出为小美。说明fun函数被重新声明了。当吧依赖数组中的text取消变为空数组之后，第一次和第二次点击都输出小明，说明fun函数的内容已经被缓存起来了。

使用useCallback可以进行性能优化，减少不必要的性能损耗！

memo

memo其实和类组件中的purecomponent的功能一直，都是用来做组件的性能优化的。

现在我们有如下的场景，父组件是一个呈现事件的组件，每一秒刷新一次当前时间，子组件只是一个普通的文字组件。我们知道，每当父组件状态被改变，子组件也会被重新渲染，这时在hook里我们就可以用memo进行性能的优化。

父组件：

function Memo() {
    var [time,settime] = useState()
    useEffect(()=>{
        setInterval(()=>{
            settime(new Date().toString())
        },[time])
    },[time])
    
    return (
        <div>
            当前时间为-{time}
            <Child ></Child>
        </div>
    )
}
           

子组件：

var Child = React.memo(function Child(){
    console.log("我被重新渲染了")
    return (
        <div >我是子组件</div>
    )
},(prevprops,nextprops)=>{
    if(prevprops === nextprops){
        return false
    }
    return true
})
           

memo是一个高阶组件，它接受两个参数，第一个是一个组件，第二个是一个函数。第二个函数中，会接受之前的属性和之后的属性，我们可以通过对比这两个属性，来决定第一个组件进步进行重新渲染。

useMemo

useMemo和useCallback功能相似，都是用来做性能的优化，用来缓存数据。不同的是useMemo返回的是一个函数执行的结果，而useCallback返回该函数本身。