React类组件中是否有等价于函数组件useCallback的方案

React 类组件没有提供与函数组件useCallback完全同形态的内置API，但依托类实例的属性存储机制，完全可以实现和useCallback效果一致的函数记忆化：保持函数引用稳定，仅在指定依赖变化时重新生成函数，避免不必要的子组件重渲染。

无依赖/依赖为实例全量状态的场景 #

这是类组件里最常用、坑最少的方案，记忆化的函数引用在组件整个生命周期内保持稳定，效果等价于useCallback传入空依赖数组，还不会碰到闭包捕获旧值的问题。
有两种等价写法：

class MyComponent extends React.Component {
  state = { count: 0 }

  // 写法1：类属性箭头函数，this自动绑定到当前组件实例
  handleClick = () => {
    // 直接通过this访问最新的props、state，永远不会拿到旧值
    console.log(this.props.userId, this.state.count)
    this.setState(prev => ({ count: prev.count + 1 }))
  }

  constructor(props) {
    super(props)
    // 写法2：构造函数内手动绑定this，效果和类属性箭头函数完全一致
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit() {
    // 业务逻辑，同样通过this访问最新状态
  }

  render() {
    return (
      <>
        <button onClick={this.handleClick}>累加</button>
        <Form onSubmit={this.handleSubmit} />
      </>
    )
  }
}

这个方案不需要手动维护依赖列表，只要函数内所有状态都通过this.props、this.state访问，就能一直拿到最新值，同时函数引用全程不变，是类组件做函数记忆化的首选方案。

需要指定依赖、仅在依赖变化时更新引用的场景 #

如果需要完全对标带依赖数组的useCallback逻辑——即只有指定的props/state变化时才更新函数引用，可以在类实例上额外维护缓存的函数和上一轮的依赖值，每次render时做浅比较决定是否生成新函数：

// 浅比较逻辑可以自行实现，也可以复用项目内已有的浅比较工具
function shallowEqual(prevDeps, nextDeps) {
  if (prevDeps.length !== nextDeps.length) return false
  for (let i = 0; i < prevDeps.length; i++) {
    if (prevDeps[i] !== nextDeps[i]) return false
  }
  return true
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    // 缓存记忆化后的函数
    this._memoizedCallbacks = new Map()
  }

  useCallbackImpl(callbackFactory, deps) {
    // 用缓存键区分不同的记忆化函数，一个组件内可以存多个记忆化函数
    const cacheKey = callbackFactory
    const cached = this._memoizedCallbacks.get(cacheKey)
    if (cached && shallowEqual(cached.deps, deps)) {
      // 依赖未变化，直接返回缓存的函数
      return cached.callback
    }
    // 依赖变化，生成新函数缓存
    const newCallback = callbackFactory()
    this._memoizedCallbacks.set(cacheKey, { deps, callback: newCallback })
    return newCallback
  }

  render() {
    // 等价于 const handleSelect = useCallback((id) => { ... }, [this.props.categoryId])
    const handleSelect = this.useCallbackImpl(
      () => (id) => {
        console.log('当前分类', this.props.categoryId, '选中项', id)
      },
      [this.props.categoryId]
    )

    return <SelectList onSelect={handleSelect} />
  }
}

这个实现的逻辑和React官方useCallback的逻辑完全一致：对依赖做浅比较，依赖不变则复用旧函数引用，依赖变化则生成新函数替换缓存。

• 不要直接在render方法里写内联箭头函数传给子组件，比如<Child onClick={() => this.doSomething()} />，这种写法每次render都会生成全新的函数引用，会直接让子组件的PureComponent、React.memo优化失效，没有任何记忆化效果。
• 用类属性/构造函数绑定的方案时，不要在函数创建时就解构props/state存到局部变量里使用，否则会捕获到初始渲染的旧值，所有状态访问都通过this.前缀读取即可。
• 大部分业务场景下，直接用类属性箭头函数的方案就足够满足需求，不需要额外实现带依赖对比的记忆化逻辑，维护成本更低也不容易出bug。

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