Мы подробно рассмотрим, что такое крючок жизненного цикла в React!

устанавливать

  • конструктор
  • оказывать
  • componentDidMount

Обновлять

  • оказывать
  • componentDidUpdate

Размонтировать

  • componentWillUnmount

Mount-Explained with Exampled with Code {См. Комментарий для лучшего понимания}

Вывод

Constructor — App
 {}                  App.js:17
App-render           App.js:26
child-render         test.js:5
App-Mounted          App.js:23

Обновлять

Когда есть Обновление; Будет запланирован вызов рендеринга.

Наше приложение визуализируется; Это означает, что рендерятся его дочерние элементы.

Entire Tree is Rendered !== Entire DOM is Updated.

Теперь у нас есть два DOM: - Virtual DOM и Real DOM. React увидит, какие изменения мы внесли, а затем ОБНОВИТ РЕАЛЬНЫЙ DOM.

                          Output @ Console
-------------------------------------------------------------------
Constructor — App
 App-render
 child-render
App-Mounted
------------------------------------------------------------------
 0 //on increment
App-render
child-render
prevState {value: 0}value: 0__proto__: Object
PrevProps {}__proto__: Object
------------------------------------------------------------------- 
1//on increment
 App-render
 child-render
 prevState {value: 1}value: 1__proto__: Object
 PrevProps {}

Размонтировать

Перед тем, как снова удалить компонент, дерево будет отрисовано, и будет вызвано его размонтирование.

componentWillUnmount(){
//it is called just before the component is removed from the DOM
console.log('unmount');
}

Это дает нам возможность делать любую уборку :)

Заключение

Это важная концепция, постарайтесь понять, что она будет, и прокомментируйте, если у вас есть запрос. Я не эксперт, а ученик, и наша вся цель - научиться, и задавая вопросы и отвечая на них, это хороший способ освежить навыки и знания.

Подпись - Удачного кодирования!