react hooks 中useCallback的作用，实例讲解

useCallback如何起作用？实例讲解

import React, { useState, useCallback, useEffect } from 'react';

const set = new Set();

export default function Parent() {
  const [count, setCount] = useState(1);
  const [val, setVal] = useState('');

  const callback = useCallback(() => {
    console.log(count);
    return count
  }, [count]); //count更新时执行
  set.add(callback); //借助ES6新增的数据类型Set来判断当依赖count变更时是否返回新的函数
  console.log(set);


  return <div>
    <h4>parent count:{count}</h4>
    <h4>set size:{set.size}</h4>
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <input value={val} onChange={event => setVal(event.target.value)}/>
    </div>

    <Child callback={callback} />
  </div>;
}

const Child = ({callback}) =>{
  const [count,setCount] = useState(0);
  
  useEffect(()=>{
    setCount(callback())
  },[callback]) //当callback更新时执行callback函数，得到parent组件最新的count

  return <>
    child count:{count}
  </>
}

我们可以看到，每次修改count，set.size就会+1，这说明useCallback依赖变量count，count变更时会返回新的函数；而val变更时，set.size不会变，说明返回的是缓存的旧版本函数。

• 实用场景：
  有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新。