这两个函数调用有什么区别？答案

【问题标题】：What is the difference between these two function calls?这两个函数调用有什么区别？
【发布时间】：2023-01-10 06:50:16
【问题描述】：

为什么 onClick={props.onClick Function(1)}> 不起作用？

Function Button(props) {
  // const handleClick = () => setCounter(counter+1);
    return (
    <button onClick={props.onClickFunction(1)}>
      +{props.increment}
    </button>
  
}

为什么我应该使用其他功能 `

function Button(props) {
  const handleClick = () => props.onClickFunction(1)

return (
    <button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

当我尝试声明 handleclick 函数时它正在工作。

【问题讨论】：

拿着电话和打电话给别人有什么区别？

标签： javascript reactjs

【解决方案1】：

下面的 sn-p 可能最好地说明了差异，它显示了您在每个示例中有效地做的事情。

// top example
handleClick = () => props.onClickFunction(1)

// bottom example
handleClick = props.onClickFunction(1)

您正在分配错误调用 onClick 函数的结果，而您实际想要做的是分配一个函数每次调用时都会调用 onClickFunction.以下代码也将按预期工作：

function Button(props) {
    return (
    <button onClick={() => props.onClickFunction(1)}>
      +{props.increment}
    </button>
  
}

【讨论】：

【解决方案2】：

当一个组件渲染时，所有的语句都会被执行，表达式也会被评估。当组件渲染时，props.onClickFunction(1) 函数被调用，它返回 undefined ，这将导致按钮渲染为没有任何事情发生。

另一方面，handleClick 是对函数的引用。您需要将函数引用传递给 onClick ，稍后当点击发生时，它可以稍后被 React 调用。

【讨论】：

【解决方案3】：

“点击”是一个事件，所以你必须传递一个事件处理函数。当在处理函数将运行的元素上检测到单击时。

 // you are passing an event handler
 <button onClick={handleClick}>

但在这种情况下onClick={props.onClickFunction(1)}，您正在传递props.onClickFunction 函数的返回值，如果此函数不返回任何内容，其返回值将为undefined。

【讨论】：

【解决方案4】：

在第一个例子中，onClick={props.onClickFunction(1)}实际上是立即调用 onClickFunction 并将该函数调用的结果作为 onClick 道具传递。这不是你想要的。

您想要传递对函数本身的引用，以便稍后在单击按钮时可以调用它。您可以通过省略括号来做到这一点：onClick={props.onClickFunction}.

第二个示例使用了一个附加函数 handleClick，它被定义为一个箭头函数，它调用道具.onClickFunction(1).此函数作为 onClick 道具而不是原始的 onClickFunction 传递。这是有效的，因为 handleClick 函数仅在单击按钮时调用，而不是立即调用。

使用像这样的附加功能通常是为了提供一些附加的逻辑或行为，这些逻辑或行为应该在单击按钮时触发。这也是使用 React 时的常见模式，因为它可以让你避免在 JSX 中编写内联函数，这可以使代码更具可读性。

【讨论】：