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} ？

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

Answer 1

onClick={() => increaseCount()}-> 将一个函数作为事件处理程序分配给onclick. 函数体位于其increaseCount()内部。因此，当函数运行时（在事件触发时），increaseCount将被执行/运行。

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

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