从 React 钩子返回 JSX 元素是不好的做法吗？ [关闭]

Posted 2023-02-21

【中文标题】从 React 钩子返回 JSX 元素是不好的做法吗？ [关闭]

【英文标题】：Is it bad practice to return a JSX element from a React hook? [closed]

【发布时间】：2021-07-09 19:13:01

【问题描述】：

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

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 元素而不是组件。这仍然是不好的做法吗？

【参考方案1】：

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

返回 JSX 的函数可以简单地转换为带有钩子的函数组件。把它写成一个组件会在很多方面帮助你

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