2

В документации React к useEffect написано:

Unlike componentDidMount and componentDidUpdate, the function passed to useEffect fires after layout and paint, during a deferred event.

componentDidMount/DidUpdate вызывается после рендера и монтирования компонента. Я всегда думал, что если компонент смонтирован, то он и отрисован в брузере. В связи с этим вопросы:

  1. Действительно ли, что вызов метода render и монтирование компонента в dom-дерево не гарантирует отрисовку его в браузере ? Если так, то в какой момент браузер "решает" перерисовать dom-дерево ?
  2. Блокирует ли componentDidMount/DidUpdate отрисовку браузера (т.е останавливает ее) или он ее просто замедляет ?
  3. Если componentDidMount/DidUpdate вызывает ДО отрисовки браузера, тогда почему в самом методе componentDidMount/DidUpdate мы можем получить (через ref или через querySelector) dom-узел и все его свойства, включая размеры, отступы и т.д. ? При этом все свойства будут правильные и точные. Откуда он их берет, если сам dom-узел еще не отрисован.

Буду благодарен за ответ.

1 ответ 1

1

Отвечая на Ваши вопросы:

Действительно ли, что вызов метода render и монтирование компонента в dom-дерево не гарантирует отрисовку его в браузере? Если так, то в какой момент браузер "решает" перерисовать dom-дерево?

В при вызове метода render React запускает процесс перерисовки, модифицируя документ и/или его конкретный(ые) элемент(ы). Далее браузер реагирует на эти изменения и превращает эти изменения в то что пользователь видит на экране.

Используя WEB API браузер сообщает слушателям о своем "состоянии", благодаря чему React может понять что событие render'a "произошло".

Однако это означает только то что само DOM дерево было обновлено, а процессы перерисовки запущены, но не то что пользователь гарантировано увидит полностью готовый для потребления контент.

Например, если мы попытаемся получить offset-размеры какого либо элемента привязавшись к ComponetDidMount или useEffect то можем получить 0, просто из за того что еще не все стили были применены.

Блокирует ли componentDidMount / DidUpdate отрисовку браузера (т.е останавливает ее) или он ее просто замедляет?

Нет, и нет.

Если componentDidMount/DidUpdate вызывает ДО отрисовки браузера, тогда почему в самом методе componentDidMount / DidUpdate мы можем получить (через ref или через querySelector) dom-узел и все его свойства, включая размеры, отступы и т.д.? При этом все свойства будут правильные и точные. Откуда он их берет, если сам dom-узел еще не отрисован.

(ответил выше)

Мы можем быть уверены что получим полностью готовый DOM если привяжемся к componentDidMount или useEffect. Это даст нам правильные привязки ref и корректную работу методов аналогичных querySelector.

1
  • Вообше не согласен.Даже в доках написано что componentDidMount <<вызовет дополнительный рендер перед тем, как браузер обновит экран>> .Если там вызвать setstate конечно.
    – Randall
    21 июл 2020 в 6:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.