如何将类组件生命周期相关代码正确重写为React Hooks实现

核心实现 #

原有类组件的生命周期逻辑本质是：组件首次挂载、以及props传入的userId发生变化时，执行用户信息拉取逻辑，可以直接用useEffect完全覆盖，改写代码如下：

import { useEffect } from 'react';

// 你的函数组件，userId从props传入
function UserInfo({ userId }) {
  // 以下三个回调对应你原有类组件的同名方法，按需保留原有逻辑即可
  const onUserLoading = () => { /* 加载中状态处理 */ };
  const onUserLoaded = (userData) => { /* 拉取成功状态处理 */ };
  const onError = (err) => { /* 拉取失败状态处理 */ };

  useEffect(() => {
    // 对应原有updateUser的判断逻辑
    if (!userId) return;

    onUserLoading();
    // 新增请求取消逻辑，解决原有类组件可能存在的竞态/内存泄漏问题
    const abortController = new AbortController();

    API.getUser(userId, { signal: abortController.signal })
      .then(onUserLoaded)
      .catch(err => {
        // 忽略主动取消产生的请求错误
        if (err.name !== 'AbortError') {
          onError(err);
        }
      });

    // 清理函数：组件卸载/ userId变化时，取消未完成的旧请求
    return () => abortController.abort();
  }, [userId]); // 依赖项仅需填写userId，完全匹配原有生命周期触发时机

  // 组件其余渲染逻辑
  return <div>用户信息展示</div>
}

最小兼容版本（和原有类组件逻辑完全一致，无额外优化） #

如果你的请求工具不支持AbortController，也可以用标识位实现基础的竞态规避，或者完全保留原有逻辑：

useEffect(() => {
  if (!userId) return;
  onUserLoading();
  // 完全和原有逻辑一致的写法
  API.getUser(userId)
    .then(onUserLoaded)
    .catch(onError);
}, [userId]);

常见错误说明 #

• 不要把useEffect的依赖数组留空：留空只会在组件首次挂载时执行一次，userId变化时不会重新拉取用户信息，丢失原有的componentDidUpdate逻辑。
• 必须正确声明依赖：如果你的onUserLoading、onUserLoaded等回调是在组件内部定义的，建议将其移到组件外部，或者用useCallback包裹后加入useEffect的依赖数组，避免不必要的重复执行。

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