React Native中UserInfoAlert应归类为组件、工具函数还是Hook？

安全阿岳

2026-8-7

UserInfoAlert的归类与最佳实践

首先明确：你现在写的UserInfoAlert是一个无UI的React组件，但从React规范和代码组织的角度，把它改造成自定义Hook会更合理。

为什么当前是组件？

它是符合React组件定义的函数：接收props（这里未用到），返回React元素（此处返回null）
内部使用了React的useEffect Hook，这在组件中是合法用法

用法上需要作为组件在JSX中渲染，比如在App.js的返回结构里添加：

<Navigation>
  <Stack.screen component={{/* */}} />
  <UserInfoAlert />
</Navigation>

为什么不是工具函数？

工具函数通常是纯逻辑封装，不依赖React生命周期或Hook。而UserInfoAlert核心是通过useEffect处理事件订阅的副作用，工具函数无法直接使用React Hook，因此不符合工具函数的定位。

推荐改造成自定义Hook

React自定义Hook专门用来封装可复用的副作用逻辑，这个场景完全匹配。改造步骤很简单：

遵循Hook命名规范，把函数名改成useUserInfoAlert
去掉返回null的语句（Hook不需要返回JSX）

改造后的代码：

// UserInfo.js
import {useEffect} from 'react';
import {Alert, NativeEventEmitter, NativeModules} from 'react-native';

const userInfoEvents = new NativeEventEmitter(
  NativeModules.ReactNativeSwiftBridge,
);

export const useUserInfoAlert = () => {
  useEffect(() => {
    const userInfoMenuListener = userInfoEvents.addListener('onMenu', data => {
      if (data.type === 'UserInfo') {
        Alert.alert(data.message);
      }
    });

    return () => {
      userInfoMenuListener.remove();
    };
  }, []);
};

export default useUserInfoAlert;

在App.js中的用法：

const App = () => {
    // 直接调用自定义Hook，无需在JSX里渲染
    useUserInfoAlert();

    return(
        <Navigation>
            <Stack.screen component={{/* */}} />
        </Navigation>
    )
};