В чем разница между componentWillMount и componentDidMount в ReactJS?

Ответ 1

componentWillMount по существу является конструктором. Вы можете установить свойства экземпляра, которые не влияют на рендеринг, вытащить данные из хранилища синхронно и setState с ним, а также другой простой бесплатный побочный эффект, который нужно запустить при настройке вашего компонента.

Это редко необходимо, а вовсе не с классами ES6.

Ответ 2

constructor метод не совпадает с componentWillMount.

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

Однако отправка из componentWillMount прекрасна.

из github issue:

Это происходит, когда диспетчер() внутри одного компонента-конструктора вызывает setState() внутри другого компонента. React отслеживает "текущий владелец" для таких предупреждений - и он думает, что мы вызываем setState() внутри конструктора, когда технически конструктор вызывает setState() внутри какой-либо другой части приложения. Я не думаю, что мы должны справиться с этим - просто Реакт пытается изо всех сил выполнять свою работу. Решение, как вы правильно отметили, отправляет() внутри componentWillMount().

Ответ 3

Чтобы добавить к тому, что сказал FakeRainBrigand, componentWillMount вызывается при рендеринге React на сервере и на клиенте, но componentDidMount вызывается только на клиенте.

Ответ 4

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

componentDidMount выполняется ПОСЛЕ первоначального render, когда DOM обновлен (но, прежде всего, ДОПОЛНИТЕЛЬНОЕ обновление DOM окрашено в браузер, что позволяет вам выполнять все виды расширенных взаимодействий с самим DOM). Это, конечно, может произойти только в самом браузере и поэтому не происходит как часть SSR, так как сервер может генерировать разметку, а не сам DOM, это делается после того, как она будет отправлена ​​в браузер, если используется SSR

Продвинутые взаимодействия с DOM, которые вы говорите? Whaaaat??... Yep - в этот момент, потому что DOM был обновлен (но пользователь еще не видел обновления в браузере), можно перехватить фактическую живопись на экран с помощью window.requestAnimationFrame, а затем сделать что-то вроде измерять фактические элементы DOM, которые будут выводиться, к которым вы можете выполнить дополнительные изменения состояния, супер полезно, например, анимацию на высоту элемента с неизвестным содержимым переменной длины (так как теперь вы можете измерять содержимое и назначать высоту анимация) или во избежание вспышки сценариев контента во время некоторого изменения состояния.

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

Ответ 5

Согласно документации (https://facebook.github.io/react/docs/react-component.html)

Методы с префиксом будут называться прямо перед тем, как что-то произойдет и

Методы с префиксом did называются r сразу после того, как что-то происходит.

Ответ 6

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Theres "gotcha", хотя: асинхронный вызов для извлечения данных будет не возвращаться до рендера. Это означает, что компонент будет рендеринг с пустыми данными хотя бы один раз.

Невозможно "приостановить" рендеринг, чтобы ждать получения данных. Вы не может вернуть обещание от компонентаWillMount или спорить в setTimeout как-то.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

наш компонент не будет иметь доступа к внутреннему пользовательскому интерфейсу (DOM и т.д.). У нас также не будет доступа к рефери детей, потому что они еще не созданы. КомпонентWillMount() - это шанс для нас справиться с конфигурацией, обновить наше состояние и вообще подготовиться к первому рендерингу. Это означает, что мы можем начать выполнять вычисления или процессы на основе значений prop.