Мы подробно рассмотрим, что такое крючок жизненного цикла в 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'); }
Это дает нам возможность делать любую уборку :)
Заключение
Это важная концепция, постарайтесь понять, что она будет, и прокомментируйте, если у вас есть запрос. Я не эксперт, а ученик, и наша вся цель - научиться, и задавая вопросы и отвечая на них, это хороший способ освежить навыки и знания.
Подпись - Удачного кодирования!