Question

这是React JS中的一个教程。

  class Square extends React.Component {
    render() {
        return (
        <button
            className="square"
            onClick={() => this.props.onClick()}
        >
            {this.props.value}
        </button>
        );
    }
  }

   function Square(props) {
        return (
            <button className="square" onClick={props.onClick}>
            {props.value}
            </button>
        );
    }

以上组件也做同样的事情。本教程中有一条声明

“”当我们将Square修改为功能组件时，我们还将onClick = {（）=> this.props.onClick（）}更改为较短的onClick = {props.onClick}（请注意，括号中没有双方）。

我不明白为什么在功能组件的右侧没有括号？不是函数调用吗？

Answer 1

这不是函数调用吗？

不，不是。它是一个功能。您将其传递为onClick属性的值。

该函数除了调用foo并返回其值外什么也不做。

() => foo()

这是函数foo：

foo

除非foo关心this的值或它得到的参数，否则最终结果大致相同。

如果在短版本中添加了()，则将立即调用该函数并将返回值传递给onClick。由于该返回值（可能）不是一个函数，并且您不希望在单击发生之前运行该函数，所以这无济于事。

function run_me(a_function) {
    a_function();
}

function foo() {
    console.log("foo has run");
}

run_me(foo);
run_me(() => foo());
run_me(foo());

Answer 2

在传递处理程序时，我们实际上需要传递对函数的引用。

我不明白为什么在右侧没有括号功能组件？不是函数调用吗？

放置括号时，您正在调用该函数。
因此，在执行此操作时：

onClick={props.onClick()}

我们正在传递该函数的返回值，而不是对其的引用。

功能组件和组件类之间的区别？

2 个答案: