Обзор

Сегодня мы узнали о 3 различных шаблонах программирования для передачи информации от одного компонента к другому с использованием Props и State.

Шаблон 1: родительский объект с отслеживанием состояния передает информацию дочернему элементу без сохранения состояния
Шаблон 2: дочерний элемент без сохранения состояния обновляет состояние родительского объекта с отслеживанием состояния
Шаблон 3: без сохранения состояния Дочерний элемент обновляет состояние родительского объекта с отслеживанием состояния, который затем обновляет подчиненный объект без сохранения состояния.

Индикатор

Ключевые выводы

  1. Хотя каждый компонент по умолчанию имеет реквизиты, он не имеет состояния по умолчанию. Состояние должно быть определено с помощью метода constructor().
  2. Реквизиты компонента могут быть обновлены только другим компонентом. Где состояние может обновляться самим компонентом или другим компонентом.
  3. Сверху →Передача информации вниз: родительский файл импортирует все дочерние компоненты и передает информацию дочерним компонентам. Затем все это отображается в DOM с помощью родительского компонента. Примечание. Экземпляры дочерних компонентов вызываются в методе render() родительского класса.
  4. Родительское состояние обновляется с помощью отдельного метода в родительском классе. Затем к этому методу получает доступ дочерний компонент в своем экземпляре в родительском методе render(). Родительское состояние не может быть обновлено непосредственно из метода render() экземпляром дочернего компонента, потому что this.setState() автоматически запускает метод render(), поэтому это приведет к бесконечному циклу.

Пример

Допустим, мы хотим отобразить опцию, которую пользователь выбрал в раскрывающемся меню. Чтобы добиться этого в React, нам понадобятся три разных компонента.

A. Родительский класс: этот компонент имеет состояние, которое можно обновлять, и он координируется с дочерними компонентами. Экземпляр этого компонента затем отображается в DOM.
B. Дочерний класс: этот компонент сохранит выбор пользователя из раскрывающегося меню в своих свойствах и обновит состояние родительского класса.
C. Родственный класс class: этот компонент будет отображать только последний выбранный вариант для пользователя.

Шаги:

  1. Определите родительский класс, дочерний класс и родственный класс. Соедините их с помощью команд экспорта и импорта.
  2. Добавьте необходимые элементы JSX в дочерний и одноуровневый элементы для требуемой функциональности.
  3. Определите состояние родителя с помощью метода конструктора.
  4. Добавьте новый метод (скажем, «onChange») в родительский класс, предназначенный для простого обновления состояния родителя с использованием аргумента (скажем, «аргумента»). Обязательно свяжите this этого метода с this родительского класса в методе конструктора.
  5. В методе render() родительского класса добавьте экземпляры обоих дочерних компонентов.
  6. Для экземпляра дочернего компонента установите его свойства в метод (onChange), используя {this.onChange}.
  7. В child.js этот метод принимается как обработчик событий. Там, где есть элементы JSX, которые позволяют пользователям изменять состояние, которое затем используется для обновления состояния родителя.
  8. Вернувшись в Parent.js, в экземпляре родственного компонента установите для его реквизитов состояние родительского класса.
  9. В Sibling.js состояние родителя принимается в свойствах родственного элемента. Sibling содержит элементы JSX для отображения опции пользователю.
  10. В конечном счете, parent.js отображает экземпляр родительского компонента в DOM.

Пробелы

  1. Направление передачи информации мне до сих пор интуитивно не понятно. Это своего рода петля, в которой информация передается от родителя → потомка → родителя, а затем в DOM. Я не на 100% понимаю, как должна передаваться информация. Например, в приведенном выше примере для меня интуитивно понятно, что HTML-файлы содержат раскрывающееся меню и отображаемый текст. Мы извлекаем выбранный пользователем параметр из раскрывающегося списка, а затем возвращаем его обратно в DOM, где размещается отображаемый текст. Вместо этого сегодня мы узнали, что раскрывающийся список и отображаемый текст визуализируются из экземпляра родительского компонента с пустыми значениями по умолчанию. Когда пользователь изменяет значение по умолчанию, дочерний элемент (который содержит элементы JSX раскрывающегося меню) обновляет состояние родителя, который затем обновляет состояние родственного элемента, который затем отображает информацию через экземпляр родительского компонента. Это сложная петля, которую я интуитивно не понимаю в данный момент.
  2. Еще одна вещь, которую я не совсем понимаю, это ПОЧЕМУ более эффективно (предположительно) циклически переходить от родителя к дочернему, потом к родственному, потом к родителю и к DOM? Почему бы не сделать это проще?

Поскольку эти вопросы все еще остаются, я чувствую, что добился приличного прогресса в понимании основ React. Задачи на завтра: День 7 — Codecademy React.js | HTTP, OAuth и запросы, часть 1.

Если вы наткнулись на эту страницу, прочитайте, как я начал этот челлендж и о чем он вообще → здесь.