Яка різниця між компонентомWillMount та componentDidMount у ReactJS?

Я подивився документацію Facebook на ( React.Component ), і там згадується, як componentWillMountвикликається на клієнт / сервер, тоді componentDidMountяк на клієнта. Що робить componentWillMountіз сервером?

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

Це рідко потрібно, і зовсім не для класів ES6.

constructorметод не є таким же , як componentWillMount.

На думку автора Redux, надсилати дії від конструктора ризиковано, оскільки це може призвести до мутації стану під час рендерингу.

Однак відправка з componentWillMount- це просто чудово.

з випуску github :

Це трапляється, коли dispatch () всередині конструктора одного компонента викликає setState () всередині іншого компонента. React відстежує “поточного власника” для таких попереджень - і вважає, що ми викликаємо setState () всередині конструктора, коли технічно конструктор викликає setState () всередині якоїсь іншої частини програми. Я не думаю, що ми повинні з цим впоратися - це просто React, намагаючись з усіх сил робити свою справу. Рішення полягає в тому, як ви правильно зазначили, натомість відправити () всередину componentWillMount ().

Щоб додати до того, що сказав FakeRainBrigand, componentWillMountвикликається при отриманні React на сервері та на клієнті, але componentDidMountвикликається лише на клієнті.

componentWillMountвиконується до ІНІЦІАЛЬНОГО renderкомпонента і використовується для оцінки реквізиту та виконання будь-якої додаткової логіки на їх основі (як правило, також для оновлення стану), і як такий може бути виконаний на сервері для отримання розмітки першої сторони сервера .

componentDidMountвиконується ПІСЛЯ початкового, renderколи DOM було оновлено (але вирішальне значення ДО того, як це оновлення DOM зафарбовано у браузер, що дозволяє виконувати всі види розширених взаємодій із самим DOM). Звичайно, це може статися лише в самому браузері, і тому не відбувається як частина SSR, оскільки сервер може генерувати лише розмітку, а не сам DOM, це робиться після того, як він надсилається браузеру, якщо використовується SSR

Розширена взаємодія з DOM, про яку ви говорите? Whaaaat ?? ... Так - на даний момент, оскільки DOM оновлено (але користувач ще не бачив оновлення у браузері), можна перехопити фактичний малюнок на екран, використовуючи, window.requestAnimationFrameа потім виконуючи такі дії, як вимірювання фактичного Елементи DOM, які будуть виведені, для яких ви можете виконувати подальші зміни стану, надзвичайно корисні, наприклад, анімація до висоти елемента, що має невідомий вміст змінної довжини (оскільки тепер ви можете виміряти вміст і призначити висоту анімації), або щоб уникнути спалаху сценаріїв вмісту під час певної зміни стану.

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

Відповідно до документації ( https://facebook.github.io/react/docs/react-component.html )

Методи з префіксом волі викликаються безпосередньо перед тим, як щось трапиться і

Методи з префіксом did називаються правими після того, як щось трапиться.

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

Хоча є “gotcha”: асинхронний виклик для отримання даних не повернеться до того, як відбудеться візуалізація. Це означає, що компонент відображатиметься з пустими даними хоча б раз.

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

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

наш Компонент не матиме доступу до власного інтерфейсу користувача (DOM тощо). Ми також не матимемо доступу до дітей, оскільки вони ще не створені. КомпонентWillMount () - це шанс для нас обробити конфігурацію, оновити наш стан і взагалі підготуватися до першого візуалізації. Це означає, що ми можемо почати виконувати обчислення або процеси на основі значень опори.

Приклад використання компонентаWillMount ()

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

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

Приклад використання для componentDidMount ()

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

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}

ComponentDidMount()Метод змінює лише поточну сторінку в компонентах класу, але ComponentWillMount()змінює всі сторінки, на які впливаєsetStates()