时间戳

首页 > 解决方案 > React - 如何从组件中拆分逻辑

reactjs - React - 如何从组件中拆分逻辑

问题描述

我有以下组件：

const App = () => {
    const registerPushNotificationsToken = () => {
       ...
    };

    useEffect(() => {
       registerPushNotificationsToken();
    }, []);

    return <></>
}

如何将函数和 useEffect 移动到其他文件？我应该使用钩子还是 HOC？

标签： reactjsreact-native

解决方案

Hooks 提供了 HOC 的替代方案，并且由于您已经在使用 react-hooks 和功能组件，如果它足够通用以用于多个组件，则最好实现自定义钩子。

您可以将上述逻辑提取到自定义钩子中，例如

const usePushNotification = () {}
    const registerPushNotificationsToken = () => {
       ...
    };

    useEffect(() => {
       registerPushNotificationsToken();
    }, []);
}
 export default usePushNotification;

发布此内容，您可以在任何组件中使用它，例如

const App = () => {
    usePushNotification();

    return <></>
}

推荐阅读