react hooks--useCallback

useCallback类似于useMemo，一般用于做缓存并优化性能，但是需要提醒下大家，不要滥用（比如对一些简单的计算逻辑或许没必要使用它们），否则会适得其反。

一、基础用法

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b])

useCallback接受两个参数，第一个为回调函数，第二个参数是依赖的数组。我们会发现，useCallback和useMemo的用法很相似，但值得注意的是，useMemo返回函数运行的结果，而useCallback返回函数。实际上，useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。在实战中，useCallback通常需要结合React.memo来使用。

二、具体案例

今天我们要利用useCallback实现以下案例：父组件有三个state：count(数字)、user（点赞人）和like（点赞数）。页面存在<数字递增>、<更改点赞人>和<点赞>三个按钮，分别可以对上述三个state值进行修改，其中<点赞>按钮放在子组件里。在案例中我们要对点赞人做唯一性判断，也就是说，只有不同的点赞人点击<点赞>按钮，点赞数才会发生变化。结合父子组件打印的内容以及各个参数值的变化，理解useCallback的作用。

父组件：UseMemoExample.tsx

import React, { useState, useCallback } from 'react';
import './index.less';
import Child from './component/child';

const UseMemoExample: React.FC = () => {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState('小红');
  const [like, setLike] = useState(0);

  const onClickButton = useCallback(() => {
    console.log('看看count和user的变化：', count, user);
    setLike(like + 1);
  }, [user]);

  return (
    
      
当前数字：{count}
      
当前点赞人：{user}
      
点赞数：{like}
       setCount(count + 1)}>数字递增
       setUser(user + 1)}>更改点赞人
      
    

  ); }; export default UseMemoExample;

子组件：Child.tsx

import React, { memo } from 'react';

type selfProps = {
  onClickButton: () => void;
};

const Child: React.FC = ({ onClickButton }) => {
  return (
    
      {console.log('子组件渲染')}
      
我是子组件
      点赞
    

  ); }; export default memo(Child);

三、效果展示

我们注意观察下图，只要不更改点赞人，无论我们怎么修改数字，我们点<点赞>按钮，点赞数并不会更改。只要user值没发生改变，useCallback函数里打印的count值不会更新，子组件也不会重新渲染。由此可见，用useCallback缓存某个函数，并把它传递给子组件，可以防止子组件的重复渲染。

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。