在ReactJS中，使用箭头函数和普通函数作为onClick事件处理程序有什么区别？

Question

我在ReactJS中构建了一个简单的计数器应用。以下是代码。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
    const [countNum, setCountNum] = useState(0);

    function increaseCount() {
        setCountNum(countNum + 1);
    }

    function decreaseCount() {
        if (countNum > 0) {
            setCountNum(countNum - 1);
        }
    }

    function disableChecker() {
        if (countNum === 0) {
            return true;
        } else {
            return false;
        }
    }

    return (
        <div className="App">
            <button onClick={() => decreaseCount()} disabled={disableChecker()}>Decrease</button>
            <button onClick={() => increaseCount()}>Increase</button>
            <h2>{countNum}</h2>
        </div>
    );
}

我只想知道为什么onClick={() => increaseCount()} 能够正常工作，而 onClick={increaseCount()} 或者 onClick={() => increaseCount} 不能工作？

作为一个初学者，请指导我找到答案。

- ChhikaraBRUH

---

因为其中一个调用函数并将其返回作为处理程序传递，而另一个在处理程序被调用时返回但不调用该函数。 - jonrsharpe

另外，请注意 disabled={countNum === 0} 就足够了，不需要使用函数。 - Emile Bergeron

在JavaScript中，通过在函数名后面使用括号()来调用函数。 - jsejcksn

@EmileBergeron 谢谢你提供这个。从现在开始我会使用它。 - ChhikaraBRUH

Answer 1

onClick={() => increaseCount()} -> 将函数作为事件处理程序指派给 onclick。该函数的主体内包含 increaseCount()。所以当函数运行时（触发事件时），increaseCount被执行/运行。

onClick={increaseCount()} -> 当这段代码遇到时，React 立即运行 increaseCount。 increaseCount 更改状态并导致重新渲染，在下一个渲染周期中相同的事情发生，从而导致循环。 这应该会无限渲染。

onClick={() => increaseCount} -> 和第一个例子一样，但是在函数体内，() 在 increaseCount 后面丢失。这不会在事件发生时执行函数 increaseCount。 一个没有括号的简单语句将什么也不做。

- Tushar Shahi

---

所以，由于箭头函数是异步函数，它会等待用户点击并在单击发生时执行其中的函数。但是，如果我们直接传递increaseCount()，那么在单击后它会不断更改状态并导致无限循环？ - Aladdin

你不会称呼一个函数为异步的，因为它只在执行时才运行，对吧？所有函数都需要被执行才能运行。箭头函数只是另一个函数而已。它将在点击时运行。在第二种情况中，increaseCount() 每次都在直接的脚本/代码中运行，它根本没有被包装在一个函数中。JavaScript 引擎只是在处理代码，并运行它。它被触发是因为 OP 写成了那样。这与在 React 组件体中编写 increaseCount() 是相同的。它总是会运行的。 - Tushar Shahi

Answer 2

我的函数为什么每次组件渲染时都会被调用？ 确保您在将函数传递给组件时不会调用该函数：

render() {
 // Wrong: handleClick is called instead of passed as a reference!
 return <button onClick={handleClick()}>Click Me</button>
}

相反，只传递函数本身（不带括号）：

render() {
  // Correct: handleClick is passed as a reference!
  return <button onClick={handleClick}>Click Me</button>
}

你可以使用箭头函数来包装事件处理程序并传递参数：

<button onClick={() => handleClick(id)} />

- Alpfreda