React-Hooks----useCallback()

前言

useCallback() 是一个 React Hook，它用于缓存函数的引用以及处理函数的依赖项，以避免在渲染时重复创建新的函数。

用法

该 Hook 接受两个参数，第一个是要缓存的函数，第二个是用于依赖项的数组。

当依赖项发生变化时，useCallback() 将返回一个新的函数引用，否则它将返回相同的缓存引用。这可以帮助提高性能并避免不必要的重新渲染。

例如，假设我们有一个 handleClick 函数，它是一个回调函数，将在某些事件发生时被调用。我们可以使用 useCallback() 来缓存该函数的引用并将其传递给子组件。

import React, {
    
     useCallback } from 'react';

function ParentComponent() {
    
    
  const handleClick = useCallback(() => {
    
    
    console.log('Button clicked!');
  }, []);

  return (
    <ChildComponent onClick={
    
    handleClick} />
  );
}

function ChildComponent({
     
      onClick }) {
    
    
  return (
    <button onClick={
    
    onClick}>Click Me</button>
  );
}

在这个例子中，我们使用 useCallback() 缓存 handleClick 函数的引用，并将其作为 onClick 属性传递给 ChildComponent。由于没有依赖项，useCallback() 将始终返回相同的缓存引用，这有助于避免在每次重新渲染时创建新的函数引用。