React -- useCallback

useCallback是React Hooks中的一个函数，用于对函数组件中的回调函数进行优化。

作用

useCallback的作用就是将回调函数进行记忆化，确保每次组件重新渲染时，如果依赖项没有发生变化，那么返回的回调函数仍然是相同的引用，从而避免不必要的重新创建和传递给子组件。

语法

useCallback函数接受两个参数：回调函数和依赖项数组。当依赖项数组中的任何一个值发生变化时，useCallback会返回一个新的回调函数；否则，它会返回之前记忆的回调函数

使用场景

主要用于优化传递给子组件的回调函数，避免不必要的重新创建和渲染

demo

import React, { useCallback } from 'react';

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

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

可以看到，在上面的例子中，handleClick回调函数会被记忆化，只有在组件的依赖项发生变化时才会重新创建。通过useCallback，我们可以确保每次组件渲染时，传递给<button>组件的onClick属性都是相同的引用，避免不必要的渲染。