react中封装一个自己的hook

常用的函数我们都可以封装成一个自己的hook，文件格式一般都为"usexxx"

下面是一个二次封装的antd消息通知

useMessage.ts

import { useState, useEffect } from 'react';
import { message } from 'antd';

type MessageType = 'success' | 'error';

export const useMessage = () => {
    const [messageContent, setMessageContent] = useState<string>('');
    const [messageType, setMessageType] = useState<MessageType | null>(null);

    useEffect(() => {
        if (messageType) {
            message[messageType](messageContent);
        }
    }, [messageContent, messageType]);

    const showMessage = (type: MessageType, content: string) => {
        setMessageType(type);
        setMessageContent(content);
    };

    const showSuccess = (content: string) => {
        showMessage('success', content);
    };

    const showError = (content: string) => {
        showMessage('error', content);
    };

    return { showSuccess, showError };
};

下面是一个注册模块的具体使用