Что такое контролируемые компоненты и неконтролируемые компоненты?

Что такое контролируемые компоненты и неконтролируемые компоненты в ReactJS? Чем они отличаются друг от друга?

Ответ 1

Это относится к компонентам DOM с состоянием (элементы формы), а документы React объясняют разницу:

  • A Контролируемый компонент - это тот, который принимает текущее значение через props и уведомляет изменения через обратные вызовы, такие как onChange. Родительский компонент "контролирует" его, обрабатывая обратный вызов и управляя своим собственным состоянием и передавая новые значения в качестве реквизитов контролируемого компонента. Вы также можете назвать это "немым компонентом".
  • A Неконтролируемый компонент - это тот, который хранит свое собственное внутреннее состояние, и вы запрашиваете DOM с помощью ref, чтобы найти его текущее значение, когда Вы нуждаетесь в этом. Это немного больше похоже на традиционный HTML.

В большинстве (или всех) случаях вы должны использовать контролируемые компоненты.