React中useMemo创建的实例如何在组件卸载时用destroy方法清理内存？

useMemo本质只是值缓存机制，本身不绑定任何组件生命周期钩子，既不会在组件卸载时触发回调，也没有内置的清理逻辑，要实现实例的内存清理，必须结合useEffect的卸载清理能力实现，核心实现逻辑如下：

• 保留原有的useMemo缓存类实例的逻辑，确保实例引用在组件渲染阶段即可被获取（比如作为props传递给子组件）
• 新增依赖实例引用的useEffect，将实例的destroy方法写在该effect的返回清理函数中，组件卸载时React会自动执行这个清理函数

示例代码 #

import { useMemo, useEffect } from 'react'

function CatDemo() {
  // 原有useMemo创建并缓存Cat实例的逻辑
  const cat = useMemo(() => {
    return new Cat()
  }, [])

  // 绑定组件卸载的清理逻辑
  useEffect(() => {
    // 此处可放置实例挂载后的初始化逻辑，比如注册全局事件、开启轮询等
    return () => {
      // 组件卸载时自动调用，完成实例的内存清理
      cat.destroy()
    }
  }, [cat])

  // 组件剩余渲染逻辑...
}

常见注意事项 #

• 不要尝试在useMemo的计算逻辑里实现清理：useMemo的计算执行在渲染阶段，在渲染阶段执行带副作用的清理逻辑会触发React严格模式的告警，且组件卸载时不会触发useMemo的重新计算，根本无法触发清理逻辑
• 因为示例中useMemo的依赖是固定空数组，缓存的cat实例引用在整个组件生命周期内是稳定的，对应的useEffect清理函数只会在组件真正卸载时执行一次，不会因为组件重渲染反复调用destroy
• 如果不需要在渲染阶段获取实例引用，也可以直接在useEffect内部创建实例、在清理函数里销毁，不需要额外配合useMemo

内容的提问来源于stack exchange，提问作者Иван Вольнов