В чем разница между функцией onClick, которая возвращает callBack и callBack, непосредственно помещенные в onClick?

Question

Я хочу создать реагирующий компонент, который делает панель расширений такой, как эта https://material -ui.com / components / extension-panel / , и я использую библиотеку 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")}
          >
            [...]

Мне было интересноКакая разница между запуском функции, которая возвращает callBack, или помещением callBack непосредственно в onChange?У меня складывается впечатление, что речь идет об оптимизации с указанием количества анонимных функций, но, насколько я понимаю, этот код объявляет анонимную функцию путем выполнения handleChange, поэтому для каждого onChange создается callBack.

Я быхотел бы знать, когда и почему я должен использовать каждое решение.Заранее благодарю за разъяснения.

Answer 1

Вы правы, это связано с количеством объявленных анонимных функций.
Немного менее эффективно сделать это так, как они делают со своим handleChange, так как он объявляет дополнительную анонимную функцию, но разница настолько мала, что основной мотивирующий фактор, вероятно, состоит в том, чтобы сделать код читабельным и выглядеть красиво.

Они, должно быть, решили, что блок кода, который должен быть выполнен наChange, слишком велик, чтобы поместить его туда, и они хотели обернуть его в другую функцию, чтобы сохранить код организованным.