React基础之useCallback
作用:在组件多次重现渲染的时候缓存函数
与memo类似,但是缓存的是函数
import { memo, useCallback, useMemo, useReducer, useState } from "react";
const Input=memo(function Input({onChange}){
console.log('子组件重新渲染了');
return <input type="text" onChange={(e)=>onChange(e.target.value)}></input>
})
function App() {
//传给子组件的函数
const changHandler=useCallback((value)=>console.log(value),[]);
const [count,setCount]=useState(0)
return (
<div className="App">
{/* 把函数作为prop传给子组件 */}
<Input onChange={changHandler}/>
<button onClick={()=>{setCount(count+1)}}>{count}</button>
</div>
);
}
export default App;