Question

我想创建一个React组件，它可以像https://material-ui.com/components/expansion-panels/这样展开扩展面板，并且我正在使用materialUI库。

    import React from "react";
    import { makeStyles } from "@material-ui/core/styles";
    import ExpansionPanel from "@material-ui/core/ExpansionPanel";
    import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
    import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
    import Typography from "@material-ui/core/Typography";
    import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

    export default function ControlledExpansionPanels() {
      [...]
      const [expanded, setExpanded] = React.useState(false);

      const handleChange = panel => (event, isExpanded) => {
        setExpanded(isExpanded ? panel : false);
      };

      return (
        <>
          <ExpansionPanel
            expanded={expanded === "panel1"}
            onChange={handleChange("panel1")}
          >
            [...]
          </ExpansionPanel>
          <ExpansionPanel
            expanded={expanded === "panel2"}
            onChange={handleChange("panel2")}
          >
            [...]
          </ExpansionPanel>
        </>
      );
    }

其组件使用onChange道具，该道具执行组件的handleChange来返回callBack函数。

此方法有什么区别：

   [...]
      const handleChange = (event, isExpanded, panel) => {
        setExpanded(isExpanded ? panel : false);
      };

      return (
        <>
          <ExpansionPanel
            expanded={expanded === "panel1"}
            onChange={(event, isExpanded) => handleChange(event, isExpended, "panel1")}
          >
            [...]

我想知道运行返回返回回调的函数或将回调直接放入onChange之间有什么区别？我觉得这是一个优化问题，它声明了匿名函数的数量，但是据我所知，这段代码通过执行handleChange声明了一个匿名函数，因此为每个onChange创建了一个CallBack。

我想知道何时以及为什么应该使用每种解决方案。预先感谢您的澄清。

Answer 1

您是正确的，这与声明的匿名函数的数量有关。
由于它声明了一个附加的匿名函数，因此使用它们的handleChange进行操作的效率稍低，但是差异是如此之小，以至于主要的推动因素可能只是为了使代码易于阅读且看上去美观。

他们肯定已经确定要在onChange上执行的代码块太大而无法放在此处，因此他们想将其包装在另一个函数中以保持代码井井有条。

返回回调的onClick函数和直接放在onClick中的callBack有什么区别？

1 个答案: