Вопрос по redux-saga, reactjs, react-redux, redux-thunk, redux – Это официальное заявление React. Они внесли это не зря, и теперь из-за ES6 он больше не нужен, поэтому команда React сама объявляет его небезопасным. и рекомендует использовать конструктор () поверх componentWillMount ().

20

сервера для извлечения данных в методе жизненного цикла componentWillMount - плохая практика?

И почему лучше использовать componentDidMount.

Ваш Ответ

5   ответов
5

componentDidMount это лучшее место для вызова данных по двум причинам:

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

Если вам нужно визуализировать ваше приложение на сервере,componentWillMount будет вызван дважды (на сервере и снова на клиенте), что, вероятно, не то, что вы хотите. Поместить код загрузки данных вcomponentDidMount будет гарантировать, что данные выбираются только от клиента. Как правило, вы не должны добавлять побочные эффекты кcomponentWillMount.

Спасибо за комментарий, я думаю, теперь все понятно. Lokesh Agrawal
16

@ Дан Абрамов

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

Читать далееВот.

Это то, что я прочитал некоторое время назад, но никогда не было оправданной причины, почему он будет вызываться несколько раз. Lokesh Agrawal
15

ОБНОВЛЕНИЕ - май / 2018
В процессе работы появилась новая функция реагирования, которая называетсяасинхронный рендеринг.
Как реагироватьv16.3.2 эти методы не являются «безопасными» для использования:

componentWillMountcomponentWillReceivePropscomponentWillUpdate

Вы можете прочитать больше об этом вдокументы.

Как общее правилоне использовать componentWillMount вообще (если вы используете es6class синтаксис). использоватьconstructor метод вместо
Этот метод жизненного цикла хорош для инициализации состояния синхронизации.
componentDidMount с другой стороны, это хорошо для манипуляции с асинхронным состоянием.

Почему?
Хорошо, когда вы делаете асинхронный запрос вconstructor / componentWillMount ты делаешь это раньшеrender вызывается, когда асинхронная операция закончилаrender Скорее всего, метод уже завершен, и нет смысла устанавливать «начальное состояние» на этом этапе?
Я не уверен, что это ваш случай здесь, но большинство случаев, когда разработчики хотят инициировать состояние асинхронно вcomponentWillMount чтобы избежать второгоrender вызов. но вы не можете избежать этого, можете, как упоминалось выше,render сработает в любом случае до завершения асинхронной операции.
Итак, лучшее время для вызова асинхронной операции - послеrender вызвал и компонент смонтирован (вы можете смонтироватьnull или пустой<div/>) и затем извлеките ваши данные, установите состояние и сделайте его повторную визуализацию соответственно.

Правильно, объяснение с примером асинхронных вызовов дает достаточную причину для того, чтобы не использовать componentwillmount. Спасибо, приятель :) Lokesh Agrawal
1

Жизненный цикл монтажа компонентов

конструктор()componentWillMount () / UNSAFE_componentWillMount () (реакция 16)рендеринга ()componentDidMount ()

Конструктор а такжеcomponentWillMount Оба вызова перед вызовом render (), который отвечает за рендеринг страницы.

Здесь инициализированное состояние выполняется в конструкторе, а api вызывается в componentDidMount из-за асинхронных вызовов.

ComponentWillMount был в исправном состоянии до ES6 когда конструктора там не было Но теперь ComponentWillMount ни на что не годится, и команда реагирует на это после реакции 17.

это не отвечает, почему componentWillMount небезопасен и не используется для извлечения данных. Evgeny Timoshenko
Это официальное заявление React. Они внесли это не зря, и теперь из-за ES6 он больше не нужен, поэтому команда React сама объявляет его небезопасным. и рекомендует использовать конструктор () поверх componentWillMount (). Devinder Suthwal
2

настраивая правильные ожидания для разработчиков читая код

Если мы используемcomponentWillMount заманчиво подумать, что выборка успела произойти, тогда компонент "сделал" монтирование, итогда первый рендер произойдет. Но это не тот случай. Если мы сделаем асинхронный вызов (например, вызов API с Promises), компонент будет фактически запущенrender перед тем как выборка сможет вернуться и установить состояние компонента (или изменить состояние Redux, или что-либо еще).

Если мы вместо этого используемcomponentDidMount, тогда ясно, что компонент будет визуализироваться хотя бы один раз, прежде чем вы вернете какие-либо данные (потому что компонент ужесделал монтаж). Таким образом, по расширению также ясно, что мы должны обрабатывать начальное состояние таким образом, чтобы компонент не ломался при первом («пустом») рендеринге.

Похожие вопросы