从React钩子返回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的函数可以简单地转换为具有钩子的函数组件。把它写下来作为一个组件将在很多方面帮助你

• 提供了灵活性，可以轻松地传递道具来控制行为
• 此外，它更容易记忆功能组件，以防止在没有任何更改的情况下进行额外渲染。您也可以使用自定义挂钩来完成此操作，但随后您将不得不使用useMemo
• 这样可以更容易地定义清晰的元素层次结构