Реактивное обновление атрибутов

Я заметил кое-что интересное при настройке атрибутов в жизненном цикле componentDidMount, который представляет собой HTMLCollection. Для атрибутов original и test1 я ищу элемент в DOM. В test2 и test3 я делал то же самое, но потом превратил его в массив. Я посмотрел на остальную часть моего кода, и эти атрибуты не будут сброшены, пока не будет вызван метод componentDidMount get. Я сделал console.log, и он больше не вызывал функцию жизненного цикла componentDidMount.

componentDidMount() {
  this.original = document.getElementsByClassName('something');
  this.test1 = document.querySelectorAll('.something');
  this.test2 = Array.from(document.querySelectorAll('.something'));
  this.test3 = Array.from(document.getElementsByClassName('something'));
}

Таким образом, компонент, имеющий функцию жизненного цикла componentDidMount, отображается на странице (контрольная точка 1). Я также хотел бы добавить, что это компонент, который подключен к хранилищу резервов. Затем некоторые API вызывает в другом месте, и он обновляет поля, которые связаны с этим компонентом. Таким образом, теперь состояние в redux обновляется, и поэтому реквизиты для компонента обновляются, поэтому функция рендеринга для этого компонента get вызывается снова (контрольная точка 2).

Итак, вот загадка. У меня есть несколько разделов на моей странице, которые имеют класс "что-то". На контрольной точке 1 у меня есть 2 из этих разделов. На контрольной точке 2 у меня есть 5 таких разделов. Я сделал console.log в функции рендеринга. Результаты, которые я получаю, смущают меня. Когда я сохраняю атрибут console.log оригинальным, я вижу 2 элемента, но на контрольной точке 2 я вижу 5 элементов. Что касается test1, test2 и test3, на обеих контрольных точках я вижу только 2 элемента в console.log.

Снова я хочу повторить, что я не сбрасывал значение this.original нигде в моем коде. Это почти как React автоматически обновляет атрибуты из document.getElementsByClassName. Это правда? Если так, то почему test3 не обновляется? Потому что test3 имеет тип Array? Что насчет test1?

0 ответов

Другие вопросы по тегам