当我只调用一次时，为什么反应中的函数被调用了三次

Question

const NewApp = (props) => {
  const [ counter, setCounter ] = useState(0)
  const incrementCounterByOne = () => setCounter(counter + 1)
  const decrementCounterByOne = () => setCounter(counter - 1)
  const setCounterToZero = () => setCounter(0)

  return (
    <div>
    <Display counter={counter} />
    <Button handleClick={incrementCounterByOne} text="Increment" />
    <Button handleClick={decrementCounterByOne} text="Decrement" />
    <Button handleClick={setCounterToZero} text="Reset" />
    {/* <button onClick={incrementCounterByOne}>Increment</button>
    <button onClick={decrementCounterByOne}>Decrement</button>
    <button onClick={setCounterToZero}>Reset</button> */}
    </div>
  )
}

const Button = (props) => {
  console.log("clicked")
  return (
    <button onClick={props.handleClick}>
    {props.text}
    </button>
  )
}

我是反应的新手。当我点击任何按钮时，按钮功能被调用三次，但我一次只点击一个按钮。我有点困惑为什么会这样。如果有人能解释这是如何发生的过程，那将非常有帮助，谢谢！

Answer 1

您的 console.log("clicked") 在调用 Button 时运行：

const Button = (props) => {
  console.log("clicked")

并且您有三个按钮，所以只要有 re-render.

，您就会看到三个日志

如果您只想在发生点击时记录（并且只记录一次，而不是三次），请改为在点击处理程序中记录。

<button onClick={(e) => {
  console.log('clicked');
  return props.handleClick(e);
}}>

当我只调用一次时，为什么反应中的函数被调用了三次

Why a function in react is getting called three times when I am calling only one time

javascript

reactjs

react-component