{foo()} 和 {foo} 之间的区别

Question

当用户单击按钮时，我遇到了一个 JSX 表达式，必须执行一个函数。 我想知道引用函数和使用'()'调用函数的区别

例如什么时候用哪个？

1)

       <button onClick={foo}>Something here</button>

2)

       <button onClick={foo()}>Something here</button>

和函数 foo

       const foo = () => {
          console.log('something here');            
        } 

Answer 1

使用

<button onClick={foo()}>Something here</button>

每次渲染组件都会调用函数foo。

使用

<button onClick={foo}>Something here</button>

只有当按钮被点击时才会调用它。