React项目迁移TypeScript时如何处理useEffect中异步函数的取值及清理问题

原来的代码存在两个问题：

1. registerListener 是异步函数，返回值是 Promise 类型，不能直接同步解构拿到 listener 实例
2. useEffect 不支持直接传入 async 回调函数，因为 async 函数默认返回 Promise，而 useEffect 要求回调只能返回清理函数或者 undefined，会导致类型报错和清理逻辑失效

我们需要将listener实例存在组件顶层的ref中（遵守React Hook调用规则，避免闭包陷阱），在useEffect内部定义立即执行的异步函数，同时增加组件卸载标记避免内存泄漏。选择ref而非state存储listener是为了保证清理函数始终能访问到最新的listener实例，也不需要额外的重渲染开销。

完整TypeScript代码如下：

import React from 'react'

// 先定义listener的实际类型，可根据你的业务逻辑替换
type ListenerType = Awaited<ReturnType<typeof someAsyncAction>>

// 你的业务组件
const YourComponent = () => {
  // ref要放在组件顶层，符合Hook调用规则
  const listenerRef = React.useRef<ListenerType | null>(null);

  const registerListener = async (): Promise<{ listener: ListenerType }> => {
    const listener = await someAsyncAction();
    return { listener };
  };

  React.useEffect(() => {
    // 标记组件是否已卸载，避免异步返回后操作已卸载的组件
    let isUnmounted = false;

    // 内部异步立即执行函数
    (async () => {
      const { listener } = await registerListener();
      if (isUnmounted) return;
      listenerRef.current = listener;
    })();

    // 清理函数
    return () => {
      isUnmounted = true;
      if (listenerRef.current) {
        removeListener(listenerRef.current);
      }
    };
  }, []);

  // 其余组件逻辑
  return <></>
}

• 用Awaited<ReturnType<typeof someAsyncAction>>可以自动推导someAsyncAction返回的异步值类型，不用手动重复写类型定义
• registerListener的返回类型显式标注为Promise<{ listener: ListenerType }>，符合你要求的返回Promise的约束
• ref的类型定义为ListenerType | null，初始值为null，清理时做非空判断即可避免类型报错

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