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返回该函数本身。