react useCallback的用法

useCallback 介绍

useCallback是react中比较重要的一个hook，用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用。
useCallback 还可以用于优化函数的性能。它的主要作用是缓存一个回调函数，以确保在组件重新渲染时不会创建新的回调函数，从而减少不必要的性能开销。useCallback 通常与 React.memo 或 shouldComponentUpdate 一起使用，以避免不必要的组件重新渲染。

基础用法

useCallback的用法与useState的用法基本一致，但最后会返回一个函数，用一个变量保存起来。

const memoizedCallback = useCallback(
  callbackFunction,
  dependenciesArray
);

callbackFunction：要缓存的回调函数。
dependenciesArray：一个数组，包含了影响回调函数的依赖项。当依赖项发生变化时，会重新创建回调函数。

const a = useCallback(() => {
	return function() {
		console.log(b)
	}
},[b])

console.log(a)
console.log(a())

返回的函数a会根据b的变化而变化，如果b始终未发生变化，a也不会重新生成，避免函数在不必要的情况下更新。
记得子组件导出时使用memo包裹一下，其作用是对组件前后两次进行浅对比，阻止不必要的更新

父子组件函数式传参

既然使用useCallback减少了函数式参数不必要的更新，子组件收到的参数不变，自然也不会更新，从而减少了组件间不必要的更新。

父组件

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

import CC from './cc';

const Props: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [p, setP] = useState('1');
  const [ccVisible, setCCVisible] = useState(false);

  console.log('-- Props --');

  const onClick = useCallback(() => {
    console.log('onClick');
    setCCVisible(true);
  }, []);

  const onClose = useCallback(() => {
    console.log('onClose');
    setCCVisible(false);
  }, []);

  useEffect(() => {
    setTimeout(() => {
      setP('2');
      setLoading(false);
    }, 1000);
  }, []);

  if (loading) {
    return <div>loading</div>;
  }

  return (
    <div>
      <p>
        <span onClick={onClick2}>ddd</span>
      </p>
      <CC visible={ccVisible} onClick={onClick} onClose={onClose} text={p} />
    </div>
  );
};

export default Props;

子组件

import React, { useState, useEffect, memo } from 'react';
import { Modal } from 'antd';

interface CCProps {
  visible: boolean;
  text: string;
  onClick: () => void;
  onClose: () => void;
}

const CC: React.FC<CCProps> = ({ visible, onClick, onClose, text }) => {
  console.log('-- CC --');
  const [ccc, setCCC] = useState('00000');
  const onClickC = () => {
    console.log('onClickC');
  };

  useEffect(() => {
    setTimeout(() => {
      console.log('-- effect setCCC --');
      setCCC('3333');
    }, 2000);

    return () => {
      console.log('-- delete CC --');
    };
  }, []);

  return (
    <div>
      {visible ? 'show' : null}
      <p onClick={onClick}>323 - {ccc}</p>

      <p>
        <span onClick={onClickC}>ccc -- ddddddd</span>
      </p>

      <Modal visible={visible} onCancel={onClose} footer={null}>
        Modal
      </Modal>
    </div>
  );
};

export default memo(CC);

避免不必要的 useEffect 调用

另一个常见的用例是在 useEffect 中使用 useCallback 缓存回调函数，以确保它的依赖项是最新的。

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

function ExampleComponent() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  // 使用 useCallback 缓存回调函数，以确保它的依赖项是最新的 count
  const memoizedIncrement = useCallback(increment, [count]);

  useEffect(() => {
    console.log(`Count has changed to ${count}`);
    // 在 count 变化时执行一些副作用操作
  }, [memoizedIncrement]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={memoizedIncrement}>Increment</button>
    </div>
  );
}

export default ExampleComponent;

在上述示例中，memoizedIncrement 函数被传递给 useEffect，并且它的依赖项是 count。这确保了在 useEffect 中的副作用操作只有在 count 发生变化时才会执行，避免了不必要的调用。