Skip to content

Commit 6772d95

Browse files
BunlongBunlong
committed
add React - Component Lifecycle Unmounting
1 parent f999dab commit 6772d95

5 files changed

+130
-15
lines changed

‎_posts/2018-05-14-react-component-lifecycle-unmounting.markdown

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
layout: post
3+
title: React - Component Lifecycle Unmounting
4+
date: 2018-05-08
5+
description:
6+
img: react-component-lifecycle-unmounting.png
7+
tags: [react, reactjs, learn react]
8+
---
9+
10+
React unmounting have 1 methods: `componentWillUnmount`.
11+
12+
#### componentWillUnmount
13+
14+
is invoked immediately before a component is unmounted and destroyed.
15+
16+
Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in `componentDidMount()`.
17+
18+
For example:
19+
20+
```javascript
21+
<!DOCTYPE html>
22+
<html>
23+
<head>
24+
<meta charset="UTF-8">
25+
<title>Learn React</title>
26+
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
27+
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
28+
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
29+
</head>
30+
<body>
31+
<script type="text/jsx">
32+
class Button extends React.Component {
33+
constructor(props) {
34+
super(props);
35+
this.state = {val: 0};
36+
}
37+
38+
handleUpdate() {
39+
this.setState({val: this.state.val + 1});
40+
}
41+
42+
componentWillMount() {
43+
console.log('mounting');
44+
}
45+
46+
render() {
47+
console.log('rendering');
48+
return (
49+
<div>
50+
<button onClick={this.handleUpdate.bind(this)}>{this.state.val}</button>
51+
</div>
52+
);
53+
}
54+
55+
componentDidMount() {
56+
console.log('mounted');
57+
}
58+
59+
componentWillUnmount() {
60+
console.log('bye!');
61+
}
62+
}
63+
64+
class App extends React.Component {
65+
handleMount() {
66+
ReactDOM.render(<Button />, document.getElementById('app'));
67+
}
68+
69+
handleUnmount() {
70+
React.unmountComponentAtNode(document.getElementById('app'));
71+
}
72+
73+
render() {
74+
return(
75+
<div>
76+
<button onClick={this.handleMount}>Mount</button>
77+
<button onClick={this.handleUnmount}>Unmount</button>
78+
<div id="app"></div>
79+
</div>
80+
);
81+
}
82+
}
83+
84+
ReactDOM.render(<App />, document.body);
85+
</script>
86+
</body>
87+
</html>
88+
```
89+
90+
[Try it on CodePen](https://codepen.io/Bunlong/pen/ZorRLa).
91+
92+
In Button component `this.state = {val: 0}` initial val: 0 by default.
93+
94+
When you click on Mount button, `componentWillMount()` method is invoked immediately before mounting occurs, and `render()` method render button into body DOM, and then `componentDidMount()` method is invoked immediately after mounting occurs.
95+
96+
When you click on Unmount button, `componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed.

‎_site/index.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,18 @@ <h3 class="contact-title">Contact</h3>
110110
</aside> <!-- End Sidebar -->
111111
<div class="content-box clearfix">
112112

113+
<article class="post">
114+
115+
<a class="post-thumbnail" style="background-image: url(https://github.com/assets/img/react-component-lifecycle-unmounting.png)" href="/react-component-lifecycle-unmounting/"></a>
116+
117+
<div class="post-content">
118+
<h2 class="post-title"><a href="/react-component-lifecycle-unmounting/">React - Component Lifecycle Unmounting</a></h2>
119+
<p>React unmounting have 1 methods: componentWillUnmount. componentWillUnmount is invoked immediately before a component is unmounted...</p>
120+
<span class="post-date">2018, May 08&nbsp;&nbsp;&nbsp;—&nbsp;</span>
121+
<span class="post-words">3 minute read</span>
122+
</div>
123+
</article>
124+
113125
<article class="post">
114126

115127
<a class="post-thumbnail" style="background-image: url(https://github.com/assets/img/react-component-lifecycle-updating.png)" href="/react-component-lifecycle-updating/"></a>
@@ -194,18 +206,6 @@ <h2 class="post-title"><a href="/react-state/">React - State</a></h2>
194206
</div>
195207
</article>
196208

197-
<article class="post">
198-
199-
<a class="post-thumbnail" style="background-image: url(https://github.com/assets/img/react-props-and-proptypes.png)" href="/react-props-and-proptypes/"></a>
200-
201-
<div class="post-content">
202-
<h2 class="post-title"><a href="/react-props-and-proptypes/">React - Props and PropTypes</a></h2>
203-
<p>Props React is built around the concept of components. The components get many specific attributes...</p>
204-
<span class="post-date">2018, May 05&nbsp;&nbsp;&nbsp;—&nbsp;</span>
205-
<span class="post-words">3 minute read</span>
206-
</div>
207-
</article>
208-
209209

210210
<div class="container">
211211
<nav class="pagination" role="pagination">

‎_site/sitemap.xml

+4
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@
5353
<lastmod>2018-05-08T00:00:00+07:00</lastmod>
5454
</url>
5555
<url>
56+
<loc>/react-component-lifecycle-unmounting/</loc>
57+
<lastmod>2018-05-08T00:00:00+07:00</lastmod>
58+
</url>
59+
<url>
5660
<loc>/</loc>
5761
</url>
5862
<url>

‎_site/tags/index.html

+18-3
Original file line numberDiff line numberDiff line change
@@ -118,13 +118,13 @@ <h1>Tags in Blog</h1>
118118
<!-- cycles through tag list and creates header row of all tags used in site with accompanying per-tag counts...-->
119119

120120

121-
<li ><a href="#learn+react" class="tag">learn react <span>(13)</span></a></li>
121+
<li ><a href="#learn+react" class="tag">learn react <span>(14)</span></a></li>
122122

123123

124-
<li ><a href="#react" class="tag">react <span>(13)</span></a></li>
124+
<li ><a href="#react" class="tag">react <span>(14)</span></a></li>
125125

126126

127-
<li ><a href="#reactjs" class="tag">reactjs <span>(13)</span></a></li>
127+
<li ><a href="#reactjs" class="tag">reactjs <span>(14)</span></a></li>
128128

129129
</ul>
130130
<!--cycles through tag list and creates subheader for each tag name...-->
@@ -133,6 +133,11 @@ <h1>Tags in Blog</h1>
133133
<h2 id="learn+react">learn react</h2>
134134
<!-- lists all posts corresponding to specific tag...-->
135135

136+
<div class="tag-list">
137+
<span><a href="/react-component-lifecycle-unmounting/">React - Component Lifecycle Unmounting</a></span>
138+
<small><span>| 08 May 2018</span></small>
139+
</div>
140+
136141
<div class="tag-list">
137142
<span><a href="/react-component-lifecycle-updating/">React - Component Lifecycle Updating</a></span>
138143
<small><span>| 08 May 2018</span></small>
@@ -203,6 +208,11 @@ <h2 id="learn+react">learn react</h2>
203208
<h2 id="react">react</h2>
204209
<!-- lists all posts corresponding to specific tag...-->
205210

211+
<div class="tag-list">
212+
<span><a href="/react-component-lifecycle-unmounting/">React - Component Lifecycle Unmounting</a></span>
213+
<small><span>| 08 May 2018</span></small>
214+
</div>
215+
206216
<div class="tag-list">
207217
<span><a href="/react-component-lifecycle-updating/">React - Component Lifecycle Updating</a></span>
208218
<small><span>| 08 May 2018</span></small>
@@ -273,6 +283,11 @@ <h2 id="react">react</h2>
273283
<h2 id="reactjs">reactjs</h2>
274284
<!-- lists all posts corresponding to specific tag...-->
275285

286+
<div class="tag-list">
287+
<span><a href="/react-component-lifecycle-unmounting/">React - Component Lifecycle Unmounting</a></span>
288+
<small><span>| 08 May 2018</span></small>
289+
</div>
290+
276291
<div class="tag-list">
277292
<span><a href="/react-component-lifecycle-updating/">React - Component Lifecycle Updating</a></span>
278293
<small><span>| 08 May 2018</span></small>

‎assets/img/react-component-lifecycle-unmounting.png

444 KB
Loading

0 commit comments

Comments
 (0)