使用添加计数按钮进行了太多的重新渲染。

Question

我是React的新手。我有一个简单的页面，上面有增加1或减少1的按钮，解决方案显示了正确的方法，即通过使用内联函数的减号按钮，但是当我改变加号按钮使用常规函数时，我得到了太多的重新渲染。

import React, { useState } from 'react'
import randomColor from 'randomcolor'

export default function Playground() {
  const [count, setCount] = useState(0)

  const add = (n) =>{
    setCount(n+1);
  };

  return (
    <div>
      {count}
      <button onClick={() => add(count)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

Answer 1

<button onClick={add(count)}>+</button> 立即触发 add 函数，当组件渲染时。

试试这个。

import React, { useState } from 'react'
import randomColor from 'randomcolor'

export default function Playground() {
  const [count, setCount] = useState(0)

  const add = () =>{
    setCount(count+1);
  };

  return (
    <div>
      {count}
      <button onClick={() => add()}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

Answer 2

你可以使用常规函数 或箭头函数。但在你的情况下，你是在每次重新渲染时调用add函数。考虑以下vanilla JavaScript代码片段的差异。

function add() {
  console.log("Add");
}
document.getElementById("Button").addEventListener("click", add);

vs

function add() {
  console.log("Add");
}
document.getElementById("Button").addEventListener("click", add());  //<--

第一种是方法。

在React的世界里，以下的实现都是有效的。

function ButtonWithArrowFunction() {
  const handleClick = () => {
    console.log("Clicked");
  };
  return <button onClick={handleClick}>Press Me</button>;
}

function ButtonWithInlineArrowFunction() {
  return (
    <button
      onClick={() => {
        console.log("Clicked");
      }}
    >
      Press Me
    </button>
  );
}

function ButtonWithRegularFunction() {
  function handleClick() {
    console.log("Clicked");
  }
  return <button onClick={handleClick}>Press Me</button>;
}

function ButtonWithInlineRegularFunction() {
  return (
    <button
      onClick={function handleClick() {
        console.log("Clicked");
      }}
    >
      Press Me
    </button>
  );
}

function ButtonWithHigherOrderFunction() {
  function createHandleClickFunction() {
    return function handleClick() {
      console.log("Clicked");
    };
  }
  return <button onClick={createHandleClickFunction()}>Press Me</button>;
}

Answer 3

你不能通过 add() 因为它会执行funcition，并且会触发一个无限循环。只需通过引用 add 的方法，所以它只在点击事件时执行。

import React, { useState} from 'react'

const App = () => {
  const [count, setCount] = useState(0);

  const add = (n) =>{ 
    setCount(count+1);
  }

return (
    <div>
      {count}
      <button  onClick={add}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

export default App;