在 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是executed/run.

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

onClick={() => increaseCount} -> 与第一个一样，但在函数体内，increaseCount 之后缺少 ()。此不会在事件发生时执行函数 increaseCount。 函数名不带括号的简单语句将不执行任何操作。

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)} />

在 ReactJS 中使用箭头函数或 onClick 函数的区别？

Difference between using Arrow function or function for onClick in ReactJS?

javascript

reactjs

jsx

arrow-functions