Когда именно запускается `componentDidMount`?

Это повторяющаяся проблема с React. Гарантируется, что метод componentDidMount запускается, когда компонент отображается в первый раз, поэтому кажется естественным местом для проведения измерений DOM, таких как высоты и смещения. Тем не менее, во многих случаях я получаю неправильные показания стилей в этой точке жизненного цикла компонента. Компонент в DOM, когда я ломаюсь с отладчиком, но он еще не нарисован на экране. Я получаю эту проблему с элементами, которые имеют ширину/высоту, установленную в основном на 100%. Когда я делаю измерения в componentDidUpdate - все работает нормально, но этот метод не срабатывает при первоначальном рендеринге компонента.

Итак, мой вопрос - когда точно componentDidMount уволен, потому что он явно не срабатывает после того, как все краски браузера сделаны.

EDIT: qaru.site/info/456204/... касается одного и того же предмета:

Он также ссылается на этот диалог github, который объясняет, что происходит

Ответ 1

Внутри дерева реагирующих компонентов componentDidMount() запускается после того, как все дочерние компоненты также установлены. Это означает, что любой компонент componentDidMount() запускается до того, как его родитель был установлен.

Итак, если вы хотите измерять положение и размеры DOM и т.д., использование componentDidMount() дочернего компонента является небезопасным местом/временем для этого.

В вашем случае: чтобы получить точное считывание со 100% компонентов ширины и высоты, безопасное место для таких измерений будет находиться внутри componentDidMount() компонента top.
100% - это ширина/высота относительно родителя/контейнера. Таким образом, измерения могут быть выполнены только после того, как родитель был установлен.

Ответ 2

Как вы знаете, componentDidMount запускается только один раз сразу после первоначального рендеринга.

Поскольку вы проводите измерения, казалось бы, вы захотите также активировать свое измерение, если componentDidUpdate в случае изменения ваших измерений при обновлении вашего компонента.

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

По-моему, вам следует избегать использования setTimeout или requestAnimationFrame, когда это возможно.

Ссылка на справочник по жизненному циклу.

Ответ 3

вы можете попробовать задержать логику в componentDidMount() с помощью requestAnimationFrame(). логика должна произойти после следующей краски.

однако нам нужно будет узнать больше о вашем коде, чтобы понять, почему узлы не были нарисованы. Я никогда не сталкивался с этой проблемой. componentDidMount() срабатывает сразу после добавления узлов dom на страницу, но не обязательно после их окраски.

Ответ 4

Если вы хотите отреагировать на что-то, смонтированное в DOM, самый надежный способ сделать это с помощью ref callback. Например:

render() {
  return (
    <div
      ref={(el) => {
        if (el) {
          // el is the <div> in the DOM. Do your calculations here!
        }
      }}
    ></div>
  );  
}