Почему setState (hook) в компоненте функции вызывает бесконечное l oop?

Question

Вот код:

import React, { useState } from 'react'

function App() {
  const [a, setA] = useState(1)
  setA(2)
  return (
    <div>
      <h1>{a}</h1>
    </div>
  );
}

Ошибка. Слишком много перерисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечное l oop.

Почему это может вызвать бесконечное l oop?

Я думаю, причина в том, что Компонент функции так же, как отображает функцию , поэтому он будет вызывать бесконечное l oop, когда setState в render функциях.

Есть ли официальное объяснение?

Answer 1

При вызове setA вы фактически обновляете переменную состояния и запускаете повторную визуализацию вашего компонента.

При повторной визуализации компонента он вызывает setA (непосредственно перед визуализацией) и снова запускает повторную визуализацию.

Можете ли вы увидеть бесконечное l oop?

Традиционно вы обновляете переменную состояния в обратный вызов (т. Е. Когда пользователь нажимает на кнопку) или при определенных условиях.

В вашем примере вы можете напрямую установить a на 2

function App() {
  const [a, setA] = useState(2)
  return (
    <div>
      <h1>{a}</h1>
    </div>
  );
}

Если вы хотите получить первый рендер с a = 1, то сразу же получите a = 2, вы можете использовать эффект, который будет выполнен только один раз (из-за пустого массива для второго аргумента)

function App() {
  const [a, setA] = useState(2)
  useEffect(() => setA(2), [])

  return (
    <div>
      <h1>{a}</h1>
    </div>
  );
}

Answer 2

При каждом обновлении состояния React будет выполнять рендеринг компонента и запускать все тело функции, поскольку setA(2) не заключен в какую-либо ловушку или функцию и является частью тела функции / компонента. React выполнит это на каждом цикле рендеринга. Это делает бесконечным l oop.

Вкл. При монтировании компонента React будет устанавливать состояние и go для обновления компонента при обновлении состояния, снова происходит обновление состояния. React снова выполнит повторную визуализацию компонента. Этот цикл будет продолжаться, пока реакция не достигнет предела повторного рендеринга.

Этого можно избежать, поместив обновление состояния в ловушку.

import React, { useState } from 'react'

function App() {
  const [a, setA] = useState(1)
  useEffect(() => {
    setA(2)
  },[]);

  return (
    <div>
      <h1>{a}</h1>
    </div>
  );
}

Answer 3

Поскольку вы устанавливаете новое значение для состояния с помощью setA(2), поэтому каждый раз, когда компонент визуализируется, состояние получает новое значение, вынуждая компонент к повторной визуализации