ReactJS 中使用箭头函数或 onClick 函数有什么区别？

我在 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()} works以及为什么onClick={increaseCount()} or onClick={() => increaseCount} 不起作用？

我是初学者，请指导我找到答案。

onClick={() => increaseCount()}-> 分配一个函数作为事件处理程序onclick。该函数的主体有increaseCount()在里面。所以当该函数运行（在事件触发时），increaseCount is 执行/运行.

onClick={increaseCount()}-> 反应运行increaseCount一旦这个遇到代码. increaseCount更改状态并导致重新渲染，并且在下一个渲染周期中发生相同的事情导致周期。这应该有无限渲染。

onClick={() => increaseCount}-> 与第一个类似，但在函数体内，()之后失踪increaseCount. This 不执行该函数 increaseCount当事件发生时。函数名不带括号的简单语句不会执行任何操作。