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

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

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

EDIT: эта проблема Stackoverflow занимается той же темой:

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

18
react-dom reactjs

5 ответов

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

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

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

23

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

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

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

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

React Ссылка Жизненного Цикла.

2

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

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

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

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

0

он вызывается только один раз, когда компонент установлен. Это идеальное время для выполнения асинхронного запроса на извлечение данных из API. Получаемые данные сохраните его во внутреннем состоянии компонента, чтобы отобразить его в методе жизненного цикла render ().

Простой: Он Работает После Рендеринга Функции

0