如何将React Native类组件构造器改写为函数组件（推送通知场景）

开发者阿泽

2026-5-9

没问题，我来帮你把这段类组件代码改成React Hooks版本的函数组件，逻辑完全和原代码对齐～

首先先理清楚原类组件的核心逻辑：在constructor里初始化了NotifService实例，绑定了onRegister和onNotif两个回调方法，同时初始化了空的state。下面是改写后的函数组件代码：

import React, { useRef, useEffect } from 'react';

export default function App() {
  // 用useRef保存NotifService实例，避免每次渲染重新创建（替代类组件里的this.notif）
  const notifRef = useRef(null);

  // 定义推送注册成功后的回调函数
  const onRegister = (token) => {
    // 这里可以添加你原本在onRegister里的业务逻辑，比如保存token到状态或服务器
    console.log('设备注册成功，token:', token);
  };

  // 定义收到推送通知后的回调函数
  const onNotif = (notification) => {
    // 这里添加处理通知的业务逻辑，比如展示弹窗、更新状态等
    console.log('收到推送通知:', notification);
  };

  // 组件挂载时初始化NotifService，对应原类组件constructor的逻辑
  useEffect(() => {
    // 初始化实例并赋值给ref
    notifRef.current = new NotifService(onRegister, onNotif);

    // 可选：组件卸载时清理资源（如果NotifService提供了销毁/取消监听的方法）
    return () => {
      if (notifRef.current?.destroy) {
        notifRef.current.destroy();
      }
    };
  }, []); // 空依赖数组，确保这段逻辑只在组件首次挂载时执行一次

  // 这里写你的组件UI内容，和原类组件的render部分一致
  return (
    // 替换成你的实际组件结构
    <></>
  );
}

几个关键的改动说明：

用useRef替代类组件的实例属性this.notif：因为useRef存储的值在组件整个生命周期内保持不变，而且不会触发组件重渲染，非常适合保存这种不需要参与视图更新的服务实例。
不再需要手动bind回调：函数组件里定义的函数可以直接作为参数传递，不需要像类组件那样用bind来绑定this指向。如果你的回调依赖了其他状态/变量，可以用useCallback来缓存函数，避免不必要的性能损耗（不过这里因为初始化只执行一次，所以暂时不需要）。
用useEffect模拟constructor的初始化时机：空依赖数组的useEffect会在组件首次挂载时执行，和原类组件constructor的执行时机完全一致。同时我们还可以在useEffect的返回函数里添加清理逻辑，避免内存泄漏。

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