Реакция: Как он узнает, когда компонент DOM был смонтирован, чтобы он мог вызывать componentDidMount? - PullRequest
Новая
       14

Реакция: Как он узнает, когда компонент DOM был смонтирован, чтобы он мог вызывать componentDidMount?

0 голосов
/ 23 июня 2019

В общем, я понимаю, что нам трудно знать или получать уведомления, когда динамический элемент DOM загружен на экран, например, нет простого способа узнать, доступно ли динамическое текстовое поле в DOM. и сосредоточиться на нем, если только мы не выполним какой-либо опрос или не установим setTimeout с задержкой 0, чтобы он выполнялся в следующем тике, когда обновление DOM уже произошло.

Как React узнает, когда DOM был обновлен, чтобы он мог вызывать методы жизненного цикла, такие как componentDidMount или getSnapshotBeforeUpdate? Использует ли он взлом setTimeout?

РЕДАКТИРОВАТЬ: я понимаю основы алгоритма согласования, связанный документ в комментариях не говорит о том, как точно реагирует знает, когда элемент DOM был создан / обновлен браузером. Я понимаю, что фаза фиксации происходит в 2 прохода. На первом этапе выполняются все обновления хоста (DOM), а на втором этапе вызываются соответствующие методы жизненного цикла (getSnapshotBeforeUpdated и componentDidMount), но, поскольку эти 2 прохода происходят в одной и той же функции , как Реактивно знать, что изменения DOM, которые произошли на первом проходе, доступны на втором проходе? Являются ли эти обновления DOM синхронными? Если я получу доступ к свойству left элемента DOM в componentDidMount, будет ли это новым значением после выполнения обновлений для DOM или старым значением, поскольку при вызове componentDidMount браузер может не обновить DOM?

1 Ответ

0 голосов
/ 23 июня 2019

Чтобы лучше понять, как работают методы жизненного цикла React, отметьте в этой таблице .

В вашем конкретном случае я бы порекомендовал проверить наличие элемента (в данном случае текстового поля) в DOM. Пример: 

componentDidMount() {
  if (document.getElementById("ID-of-your-textbox")) {
    //anything that needs the textbox rendered
  }
}

Но, если вы в конечном итоге "мой ввод еще не отрисован сразу после монтирования", вы должны попытаться установить проверку на componentDidUpdate метод. Пример: 

componentDidUpdate() {
  if (document.getElementById("ID-of-your-textbox")) {
    //anything that needs the textbox rendered
  }
}
...