React Native 使用钩子函数和组件

Question

我有一个 React Native 项目。 我是 React Native 的新手，我试图从我的 UserInfo.js 中提供的代码中确定它是否应该被分类并用作组件、辅助函数或挂钩

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

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

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

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

  return null;
};

export default UserInfoAlert;

// App.js
const App = () => {
    // other stuff here

    // should it be a hook or function

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

            {/* Should it be a component */}
        </Navigation>
    )
};

export default App

Answer 1

它不返回任何东西，所以它不是一个组件。

它调用一个 React 钩子，所以它只能在 React 组件或其他钩子的顶层被调用 - 所以它应该被称为自定义钩子，而不是（更一般的）辅助函数。 因此，它的名称可能应该是useUserInfoAlert ，以符合 React 的钩子名称约定。