从 React hook 返回 JSX 元素是不好的做法吗？

Question

我为警报框编写了以下钩子：

import MuiAlert from '@material-ui/lab/Alert';
import { Snackbar } from '@material-ui/core';
import React from 'react';

export const useAlert = () => {
    const [open, setOpen] = React.useState(false);
    const [message, setMessage] = React.useState('');

    const openAlert = (message) => {
        setOpen(true);
        setMessage(message);
    };

    const closeAlert = (event, reason) => {    
        setOpen(false);
    };

    return {
        openAlert,
        Alert: <Snackbar open={open} onClose={closeAlert}><MuiAlert onClose={closeAlert}>{ message }</MuiAlert></Snackbar>
    };
};

我将此钩子集成到其他功能组件中，如下所示：

import { useAlert } from './useAlert';

const Dashboard = () => {
    const { openAlert, Alert } = useAlert();
    return (
        <div>{ Alert }</div>
    )
};

我知道从 React 钩子返回功能组件是不好的做法，因为钩子会在每次渲染时生成组件的新实例。

但是，在这里，我返回的是 JSX 元素而不是组件。这仍然是不好的做法吗？

Answer 1

从自定义挂钩返回 JSX 是一种反模式。虽然它有效，但没有什么理由从自定义挂钩返回 JSX。

返回 JSX 的函数可以简单地转换为带有钩子的函数组件。将其写为组件将在很多方面为您提供帮助

• 提供传递 props 的灵活性以轻松控制行为
• 如果没有任何改变，它也更容易记住功能组件以防止额外的渲染。您也可以使用自定义挂钩来执行此操作，但是您将不得不使用useMemo
• 它使得定义清晰的元素层次结构变得更加容易。