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;