ReactHook CallbackHook

用于改善回调函数,当依赖项更新时才会重新渲染返回新的函数
除了第一次以外,只有当依赖项更新才能重新触发函数
主要是对函数进行缓存

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);