React中useCallback() Hook如何解决函数相等性问题？

问题背景 #

博客指出JavaScript中函数是一等公民，可像对象一样比较，并通过函数工厂示例进行说明：

function factory() {
  return (a, b) => a + b;
}

const sumFunc1 = factory();
const sumFunc2 = factory();

console.log(sumFunc1(1, 2)); // => 3
console.log(sumFunc2(1, 2)); // => 3

console.log(sumFunc1 === sumFunc2); // => false
console.log(sumFunc1 === sumFunc1); // => true

博客说明sumFunc1和sumFunc2是不同的函数对象，因此全等比较返回false。

1. 为什么sumFunc1 === sumFunc2会返回false？ #

在JavaScript里，函数属于引用类型，和对象的比较逻辑一致：每次调用factory()都会在内存中创建一个全新的函数实例，哪怕两个函数的代码逻辑完全相同。全等运算符===比较引用类型时，判断的是两个值是否指向内存中的同一个地址。sumFunc1和sumFunc2是两次调用生成的不同实例，内存地址不一样，所以全等比较返回false。而sumFunc1 === sumFunc1是同一个实例和自身比较，自然返回true。

2. useCallback() Hook是如何解决这一函数相等性问题的？ #

useCallback的核心就是缓存函数实例，它接收两个参数：要缓存的函数，以及一个依赖数组。

• 当组件重新渲染时，如果依赖数组里的所有值都和上一次渲染时完全相等，useCallback就会返回之前缓存的那个函数实例；
• 只有当依赖数组里的某个值发生变化时，它才会重新创建新的函数实例返回。

这样只要依赖不变，每次拿到的都是同一个函数引用，就能解决不同渲染周期中函数实例不一致导致的全等比较false的问题。

3. useCallback() Hook实际是如何用于记忆化（memoization）的？ #

在React中，useCallback通常和React.memo配合实现组件的记忆化优化，避免不必要的重渲染：

1. 假设子组件接收一个函数作为props，父组件每次渲染如果生成新的函数实例，哪怕函数逻辑没变，子组件也会因为props变化而重新渲染，造成性能浪费；
2. 用useCallback缓存这个函数，确保依赖不变时函数引用始终一致；
3. 给子组件包裹React.memo，让它只在props真正变化时才重新渲染。

举个实际示例：

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

// 用React.memo包裹子组件，实现props浅比较
const ChildComponent = memo(({ handleClick }) => {
  console.log('子组件渲染');
  return <button onClick={handleClick}>点击我</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  // 缓存handleClick，依赖数组为空，意味着永远返回同一个实例
  const handleClick = useCallback(() => {
    console.log('点击事件触发');
  }, []);

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
}

这个例子里，点击父组件的“增加计数”按钮会触发父组件重渲染，但handleClick被useCallback缓存，引用没有变化，子组件不会跟着重渲染，以此实现记忆化的性能优化。

内容的提问来源于stack exchange，提问作者volfcan