День 14: Методы жизненного цикла в React продолжаются

мы увидим, как использовать метод componentWillUnmount в React

Этот метод вызывается непосредственно перед размонтированием и уничтожением компонента. Выполните любую необходимую очистку в этом методе, например аннулирование таймеров, отмену сетевых запросов или очистку любых подписок, которые были созданы. Это выполняется непосредственно перед удалением компонента из модели DOM.

componentWillUnmount() {}

добавьте следующий код в student.js

import React, {Component} from 'react';
export default class Student extends Component {
componentDidMount(){
console.log("Student Mounted");
}
componentWillUnmount(){
console.log("App Unmounted");
}
render() {
return (
<div>
<h1>It's Student Component</h1>
</div>
)}}

добавьте следующий код в App.js

import React, { Component } from 'react';
import Student from './Student'
export default class App extends Component{
componentDidMount(){
console.log("App Mounted")
}
componentWillUnmount(){
console.log("App unmounted")
}
render() {
return <div>
<h1>Hello App Component</h1>
</div>;
}}

добавьте следующий код в index.js

import './index.css';
import * as serviceWorker from './serviceWorker';
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
import Student from './Student';
ReactDOM.render(<App />,document.getElementById('root'));
ReactDOM.render(<Student />,document.getElementById('stu'));
serviceWorker.unregister();

добавьте следующий код index.html и оставьте остальную часть файла без изменений

<div id="root"></div>
<div id="stu"></div> //just add this 

это результат, который вы увидите.

теперь мы видим, что компоненты App и Student смонтированы в DOM.

Теперь мы отключим компонент приложения от DOM.

добавьте следующую строку в файл index.js

ReactDOM.unmountComponentAtNode(document.getElementById('root'));

вы можете увидеть сообщение «Приложение размонтировано» в консоли.

На этом уроке должно быть все. Сейчас вам может быть не так ясно, потому что мы не использовали эти методы должным образом для реальных приложений, которые мы будем использовать позже.

Фото автора Джеймс Харрисон на Unsplash