Функция React Состояние компонента - Слишком много повторных отрисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл

Я новичок в React, я пытаюсь изучить состояние компонента функции React. Мне было интересно, почему нам нужно делать onClick={() => setCount(count + 1)} вместо onClick={setCount(count + 1)}

import React, {useState} from 'react';

function Counter() {
    const [count , setCount] = useState(0);
    return (
        <div>
            <button onClick={setCount(count+1)}> + </button>
            {count}
        </div>
    );
}

export default Counter;

reactjs javascript react-functional-component
person user3818381    schedule 22.12.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

setCount(count + 1) будет немедленно вызывать setCount(count + 1) каждый рендер. Это изменит состояние компонента, заставив новый рендеринг, который снова вызовет setCount() ... вы окажетесь в бесконечном цикле рендеринга, в котором среда выполнения React никогда не сможет завершить рендеринг компонента (это упрощенное объяснение).

() => setCount(count + 1) - это выражение, определяющее функцию, которая при вызове будет вызывать setCount(count + 1). Он не вызывает сам setCount(count + 1), поэтому бесконечного цикла нет.

person Dan    schedule 22.12.2019

arrow_upward
0
arrow_downward

Дэн дал хороший ответ, который, я думаю, можно было бы расширить. Мы также можем извлечь функцию onClick вне блока возврата. Это полезно, если вам нужна более сложная логика для события и вы хотите, чтобы ваш блок возврата был читаемым.

Теперь у нас есть переменная increment, которая содержит выражение функции, и мы можем просто передать ее прямо нашему onClick слушателю.

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

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

  return (
    <div>
      <button onClick={increment}>+</button>
      {count}
    </div>
  );
}
person 23k    schedule 22.12.2019