useCallback

组件更新渲染：

• 类式组件更新渲染会重新调用render方法；函数组件更新渲染了，整个函数都会重新创建，放到useCallback里的函数，会缓存下来，当组件更新之后，不会再创建事件函数，会把上次缓存的事件函数拿出来；第二个参数，当数组里的值变化的话，第一个参数函数就会重新创建。
• 把内联回调函数及依赖项数组作为参数传入useCallback，它将返回该函数的memoized版本，该回调函数仅在某个依赖改变时才会变更。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染。
• 我们可以用useCallback指定依赖项，在无关更新之后，通过useCallback、取得的还是上一次缓存起来的函数，在下次更新渲染使用的还是上一次的事件函数。

import React,{useState,useCallback} from "react"
function App(){
   let [count,setCount]=useState(0);
   let [inpuVal,setInpuVal]=useState('');
   //useCallback体现价值的地方在于，对他指定依赖项，在无关更新之后
  // 它里面的回调函数不会重新创建，而是直接取得上次缓存的结果
   //只有它本身的依赖项发生变化时，才会重新创建回调函数。
   //因为更新组件之后，都会重新创建事件函数，只不过重新生成的事件函数和之前的是一样的
   //但这样会影响性能，所以用useCallback解决
   const inp=useCallback((e)=>{
       setInpuVal(e.target.value)
   },[])
   const changeC=useCallback(()=>{
        setCount(count+1)
   },[count])
   return <div>
      <p>
          <input type="text" onChange={inp} value={inpuVal}/>
          <h1>{inpuVal}</h1>
          <div onClick={changeC}>{count}</div>
      </p>
   </div>
}
export default App