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

下面是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扩展了React.Component{
render（）{
返回(
this.props.onClick（）}
>
{this.props.value}
);
}
}
功能广场（道具）{
返回(
{props.value}
);
}    

上面的组件做同样的事情

“当我们将正方形修改为函数组件时，我们还将onClick={（）=>this.props.onClick（）}更改为较短的onClick={props.onClick}（注意两边都没有括号）。”

我不明白为什么函数组件的右边没有括号？这不是函数调用吗

这不是函数调用吗

不，不是。这是一个函数。您正在将其传递为

onClick

属性的值

这是一个函数，除了调用

foo

并返回其值外，它什么也不做

() => foo()

这是函数foo:

foo

除非

foo

关心

this

的值或它得到的参数，否则最终结果或多或少是相同的

---

如果在短版本中添加了

（）

，则会立即调用该函数并将返回值传递给

onClick

。由于该返回值（可能）不是函数，并且您不希望函数在单击发生之前运行，因此这不会有帮助

---

函数运行（一个函数）{
a_函数（）；
}
函数foo（）{
log（“foo已经运行”）；
}
跑我（foo）；
跑我（（）=>foo（））；
跑我（foo（））当传递处理程序时，我们实际上需要传递对函数的引用

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

在插入括号时，您正在调用函数。

因此，在这样做时：

onClick={props.onClick()}

我们传递的是该函数的返回值，而不是对它的引用。
如果为true，则会忽略示例中带有括号的
（）=>
，因此这里并没有真正描述情况。嗯，您是在谈论
类
示例吗？这不属于传递函数引用的范畴吗，或者因为它是匿名的，你认为这是不同的吗？我的观点是
onClick={（）=>this.props.onClick（）}
和
onClick={props.onClick}
都将函数传递给
onClick
，并且都不立即调用它。事实上，这也是我的观点。好了，OP问我们为什么不做
onClick={props.onClick（）}
，这就是我试图解释的。我想我没有和我的回答清楚地沟通。现在我明白了。js中的回调概念是对的，好吧，但让我返回来做出反应并再次问：为什么在组件类中我们必须分配onClick函数的返回值，而在函数组件中，我们必须引用onClick函数？“为什么在组件类中我们分配onClick函数的返回值”-在代码中有两个关于
onClick={someValue}
的示例。在第一种情况下，该值是一个新的arrow函数，它调用一个函数（
（）=>this.props.onClick（）
）。在第二种情况下，您有一个现有函数（
props.onClick
）。您没有调用函数并将其返回值传递给
onClick={here}
。