Я посмотрел документацию Facebook на (React.Component) и там упоминается, как componentWillMount вызывается на клиенте/сервере, тогда как componentDidMount вызывается только на клиенте. Что componentWillMount делает с сервером?
В чем разница между 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 как-то.
наш компонент не будет иметь доступа к внутреннему пользовательскому интерфейсу (DOM и т.д.). У нас также не будет доступа к рефери детей, потому что они еще не созданы. КомпонентWillMount() - это шанс для нас справиться с конфигурацией, обновить наше состояние и вообще подготовиться к первому рендерингу. Это означает, что мы можем начать выполнять вычисления или процессы на основе значений prop.