从一个 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 hooks 返回 函数组件 是不好的做法，因为钩子将在每次渲染时生成组件的新实例。

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

- mitmath514

Answer 1

从自定义钩子返回JSX有点反模式。虽然它可以工作，但没有太多理由从自定义钩子返回JSX。

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

• 提供灵活性以轻松传递道具来控制行为
• 而且，如果没有改变任何内容，记忆功能组件更容易防止额外的渲染。您也可以使用自定义钩子来实现此目的，但那时您将不得不利用useMemo
• 它使定义清晰的元素层次结构更加容易。

- Shubham Khatri