javascript - 从 React 钩子(Hook)返回 JSX 元素是不好的做法吗？

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它.


去年关闭。


社区在 3 个月前审查了是否重新打开此问题并将其关闭:

原始关闭原因未解决






Improve this question




我为警报框编写了以下钩子(Hook):

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>
    };
};

我将这个钩子(Hook)集成到其他功能组件中:

import { useAlert } from './useAlert';

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

我知道从 React 钩子(Hook)返回功能组件是不好的做法，因为钩子(Hook)会在每次渲染时生成组件的新实例。
但是，在这里，我返回的是 JSX 元素而不是组件。这仍然是不好的做法吗？

Answer 1

从自定义钩子(Hook)返回 JSX 是一种反模式。虽然它有效，但几乎没有理由从自定义钩子(Hook)返回 JSX。
返回 JSX 的函数可以简单地转换为带有钩子(Hook)的函数组件。把它写成一个组件会在很多方面帮助你

提供传递 Prop 以轻松控制行为的灵 active

如果没有任何变化，它也更容易内存功能组件以防止额外的渲染。您也可以使用自定义 Hook 来执行此操作，但是您必须使用 useMemo

它使定义清晰的元素层次结构变得更加容易。