Чому документи React рекомендують робити AJAX в компонентDidMount, а не компонент WillMount?

102

У заголовку все сказано. Я розумію, чому componentDidMountпідходить все, що вимагає доступу до DOM, але запит AJAX не обов'язково або зазвичай потребує цього.

Що дає?

reactjs

— Алан Х.
джерело

@FurkanO Я думаю, що він мав на увазі доступ до елементів DOM, наданих компонентом. І він цілком правий, тому що якби ви намагалися отримати доступ до зазначених елементів, componentWillMountце не вдасться, враховуючи, що компонент ... не змонтувався.

— ZekeDroid

@AlanH. Видалено моє запитання, звичайно, у вас є доступ до dom на компонентDidMount. Це правило, нічого пояснювати про це. Дякую.

— ФурканО

На мою думку, чому ми викликаємо функцію Ajax після компонентаDidMount, ми маємо спочатку переконатися, що Елемент плавно відображається на початку. Після цього ми можемо робити Ajax дзвінок. Якщо ми зателефонуємо вперше в Ajax і станеться помилка, це спричинить проблеми при візуалізації

— Faris Rayhan

Відповіді:

componentDidMountпризначений для побічних ефектів. Додавання слухачів подій, AJAX, вимкнення DOM тощо.

componentWillMountрідко корисний; особливо якщо ви переймаєтесь серверним візуалізацією (додавання слухачів подій спричиняє помилки та протікання та багато іншого, що може піти не так).

Говорять про видалення componentWillMountкомпонентів класу, оскільки вони служать тій самій цілі, що і конструктор. Він залишиться на createClassкомпонентах.

— Бриганд
джерело

Додавання слухачів подій спричиняє помилки та протікання весь час на сервері чи просто увійти componentWillMount? Я не бачу різниці.

— Алан Г.

@Alan - Якщо ви використовуєте React як на стороні клієнта, так і на стороні сервера, ви виявите, що все, що знаходиться всередині, componentWillMountбуде виконано на візуалізації на сервері. Коли б ви використовували componentDidMountтоді, це буде виконуватися лише на стороні клієнта. В результаті розміщення речей, componentWillMountякі виконують зовнішню взаємодію або прив'язуються до подій тощо, - не чудова ідея. Якщо ви не плануєте рендерінг своїх компонентів на стороні сервера, це все ще не є ідеєю лише для потенційної мобільності коду. Це все поза основною причиною поганого, що пояснюється у відповіді @daniula.

— Майк Драйвер

компонентWillMount запускається на сервері, але компонент компонент WillUnmount (куди ви вилучаєте слухачів) - ні. Це призведе до того, що ви додасте слухачів і ніколи їх не очищати.

— Бриганд

Люди з основної команди React розглядають питання про видалення компонентаWillMount з майбутніх версій.

— cchamberlain

@AnkitSinghaniya це порушить тестування сервера та дрібні тестові одиниці.

— Бриганд

У мене було те саме питання на початку. Я вирішив спробувати подати запити, componentWillMountале це опинилося в різних невеликих питаннях.

Я запускав візуалізацію, коли виклик Ajax закінчується новими даними. У якийсь момент візуалізація компонента зайняла більше часу, ніж отримання відповіді від сервера, і в цей момент ajax зворотний виклик викликав візуалізацію на відключеному компоненті. Це свого роду крайовий корпус, але, мабуть, більше, тому безпечніше дотримуватися componentDidMount.

— Даніула
джерело

Добре, дякую. Думав, що це може бути щось подібне, але ти маєш рацію, дивно, що запит ajax міг би закінчитися до того, як буде зроблено візуалізацію.

— Алан Г.

@daniula Ви впевнені? Як можна виконати запит AJAX до надання?

— Леон Грейпентін

Це асинхронний світ браузера. Ніколи не слід вважати, що одна функція завжди буде швидшою, ніж решта. Як я вже згадував, це крайній випадок і, ймовірно, означає, що вам слід оптимізувати процес візуалізації, але використання правильного методу життєвого циклу полегшить ваше життя на даний момент.

— Даніула

@SooChengKoh конструктор класу ES6 еквівалентний componentWillMount, тому вам слід продовжувати використовувати componentDidMountдля викликів Ajax.

— daniula

@SooChengKoh - Безумовно, не слід робити нічого в конструкторі, що призведе до стану, яке потрібно встановити, що призведе до перегонових умов на клієнті та сервері. Ніколи не слід дзвонити setStateв конструктор компонентів, і ви не можете визначити, коли завершиться виклик AJAX. twitter.com/dan_abramov/status/576453138598723585

— cchamberlain

Відповідно до документації, встановлення стану componentWillMountне призведе до повторного відображення. Якщо виклик AJAX не блокується, і ви повертаєте Promiseоновлення стану компонента на успіх, є ймовірність, що відповідь надійде, як тільки компонент буде наданий. Оскільки componentWillMountне викликає повторне відображення, ви не будете мати очікувану поведінку, яка є компонентом, що надається із запитуваними даними.

Якщо ви використовуєте будь-яку з бібліотек потоку і запитувані дані опиняються в магазині, до якого компонент підключений (або успадковується від підключеного компонента), це не буде проблемою, оскільки прийом цих даних, швидше за все, змінить реквізит врешті-решт

— gabriel.g
джерело

componentWillMountне викликає повторне відображення лише тому, що новий стан визначено до першого візуалізації. Але якщо setStateвиклик у зворотному звороті AJAX, він буде найвиразніше викликаний після першого візуалізації, і він спричинить повторну візуалізацію.

— webdif