React Hooks系列之useCallback

前言

react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react特性，而不仅限于 class 组件。react hooks 的出现，标示着 react中不会在存在无状态组件了，只有类组件和函数组件。具体可查看官网。

优势：

1. 函数组件不能使用state，遇到交互更改状态等复杂逻辑时不能更好地支持，hooks让函数组件更靠近class组件，拥抱函数式编程。
2. 解决副作⽤问题，hooks出现可以处理数据获取、订阅、定时执行任务、手动修改 ReactDOM这些⾏为副作用，进行副作用逻辑。比如useEffect。
3. 更好写出有状态的逻辑重用组件。
4. 让复杂逻辑简单化，比如状态管理：useReducer、useContext。
5. 函数式组件比class组件简洁，开发的体验更好，效率更⾼，性能更好。
6. 更容易发现无用的状态和函数。

useCallback介绍

useCallback 可以说是 useMemo 的语法糖，能用 useCallback 实现的，都可以使用 useMemo, 常用于react的性能优化。在 react 中我们经常面临一个子组件渲染优化的问题，尤其是在向子组件传递函数props时，每次 render 都会创建新函数，导致子组件不必要的渲染，浪费性能，这个时候，就是 useCallback 的用武之地了，useCallback 可以保证，无论 render 多少次，我们的函数都是同一个函数，减小不断创建的开销。

const memoCallback= useCallback(callback,array)

返回一个 memoized 回调函数。

• callback是一个函数用于处理逻辑
• array 控制useCallback重新执⾏的数组，array改变时才会重新执⾏useCallback

1. 不传数组，每次更新都会重新计算
2. 空数组，只会计算一次
3. 依赖对应的值，对应的值发生变化重新计算

• useCallback返回值是callback本身（useMemo返回的是callback函数的返回值）

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

useCallback使用

function App () {
  const [ count, setCount ] = useState(0)
  const add = useCallback(() => count + 1, [count])
  return (
    <div>
      点击次数: { count }
      <br/>
      次数加一: { add() }
      <button onClick={() => { setCount(count + 1)}}>点我</button>
    </div>
    )
}