用于改善回调函数,当依赖项更新时才会重新渲染返回新的函数
除了第一次以外,只有当依赖项更新才能重新触发函数
主要是对函数进行缓存
1、引入
import React, {Component,useContext } from 'react';
2、定义
const memoizedCallback = useCallback((参数) => {
操作
}, [变量,变量,...]); 当依赖项改变时,才会执行回调
3、使用
<button onClick={memoizedCallback}>click</button>
4、作用场景
(1)函数传递给子组件更新不会重复渲染
子组件必须使用了 shouldComponentUpdate 或者 React.memo 来忽略同样的参数重复渲染
(2)函数被 useEffect 内部所使用,但为了避免频繁 useEffect 造成的重新创建
(3)需要保存一个函数闭包结果,如配合 debounce、throttle 使用
代码示例:
import React,{useState,useEffect,useCallback} from 'react';
import './App.css';
function App() {
const [count,setCount] =useState(0);
const [count2,setCount2] =useState(0);
useEffect(()=>{
console.log(1);
return()=>{
}
})
function clickHandle()
{
setCount(count+1);
}
return (
<div className="App">
<p>count:{count}</p>
<button onClick={clickHandle}>增加</button>
<p>count2:{count2}</p>
<button onClick={useCallback(()=>{setCount2(count2+1)},[count])}>增加</button>
</div>
);
}
export default React.memo(App);