从源码学 useCallback()：彻底理解其用途和用法

前端

2023-11-23 02:30:48

导言

React 的 useCallback() Hook 是一个强大工具，可通过缓存函数来提升组件性能。本文将带领读者深入源码，透析 useCallback() 的工作原理，了解其在 React 应用中的用途。

useCallback() 的本质

useCallback() 是一个接受两个参数的 React Hook：

fn： 要缓存的函数
dependencies： 确定何时更新缓存函数的依赖项数组

React 使用这些参数创建并缓存一个 memoized 函数，该函数仅在 dependencies 发生变化时才会更新。这避免了不必要的函数重新创建，从而优化组件性能。

useCallback() 的用途

useCallback() 主要用于以下场景：

回调函数： 当组件卸载时防止回调函数泄漏。
事件处理程序： 通过缓存事件处理程序，防止在每次渲染时重新创建它们。
逻辑函数： 缓存复杂的逻辑函数，避免在依赖项未更改时重新执行它们。

源码分析

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

export const useCallback = (fn, dependencies) => {
  const ref = useRef(null);

  useEffect(() => {
    ref.current = fn;
  }, [fn, ...dependencies]);

  return useCallback((...args) => ref.current(...args), []);
};

该源码揭示了 useCallback() 的内部机制：

使用 useRef() 创建一个可变引用对象 ref。
useEffect() 钩子更新 ref.current 以指向 fn，当 fn 或 dependencies 发生变化时触发更新。
返回一个 memoized 函数，该函数始终指向 ref.current，有效地缓存了 fn。

实例演示

import { useCallback } from 'react';

const MyComponent = () => {
  const handleClick = useCallback(() => {
    // 执行一些逻辑
  }, []);

  return <button onClick={handleClick}>点击</button>;
};