[React] Stop Memory Leaks with componentWillUnmount Lifecycle Method in React
In this lesson we'll take a stopwatch component we built in another lesson and identify and fix a memory leak.
<body>
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<div id="root"></div> <script type="text/babel">
class StopWatch extends React.Component {
state = {lapse: 0, running: false}
handleRunClick = () => {
this.setState(state => {
if (state.running) {
clearInterval(this.timer)
} else {
const startTime =
Date.now() - this.state.lapse
this.timer = setInterval(() => {
this.setState(
{
lapse: Date.now() - startTime,
},
() => {
console.log(this.state.lapse)
},
)
})
}
return {running: !state.running}
})
}
handleClearClick = () => {
clearInterval(this.timer)
this.setState({lapse: 0, running: false})
}
componentWillUnmount() {
clearInterval(this.timer)
}
render() {
const {lapse, running} = this.state
const buttonStyles = {
border: '1px solid #ccc',
background: '#fff',
fontSize: '2em',
padding: 15,
margin: 5,
width: 200,
}
return (
<div style={{textAlign: 'center'}}>
<label
style={{
fontSize: '5em',
display: 'block',
}}
>
{lapse}ms
</label>
<button
onClick={this.handleRunClick}
style={buttonStyles}
>
{running ? 'Stop' : 'Start'}
</button>
<button
onClick={this.handleClearClick}
style={buttonStyles}
>
Clear
</button>
</div>
)
}
} class App extends React.Component {
state = {showStopWatch: true}
render() {
const {showStopWatch} = this.state
return (
<div>
<label>
Show Stop Watch{' '}
<input
type="checkbox"
checked={showStopWatch}
onChange={() =>
this.setState(s => ({
showStopWatch: !s.showStopWatch,
}))}
/>
</label>
<hr />
{showStopWatch ? <StopWatch /> : null}
</div>
)
}
} const element = <App />
ReactDOM.render(
element,
document.getElementById('root'),
)
</script>
</body>
Tow things to notice here is that:
1. this.setState(), we can pass an update function, which take param 'state' and return a new state
this.setState((state) => ({newState}))
2. Pass a second param to setState() as a callback:
this.setState(newState, callback)
[React] Stop Memory Leaks with componentWillUnmount Lifecycle Method in React的更多相关文章
- The Introduction of Java Memory Leaks
One of the most significant advantages of Java is its memory management. You simply create objects a ...
- On Memory Leaks in Java and in Android.
from:http://chaosinmotion.com/blog/?p=696 Just because it's a garbage collected language doesn't mea ...
- Activitys, Threads, & Memory Leaks
Activitys, Threads, & Memory Leaks 在Android编程中,一个公认的难题是在Activity的生命周期如何协调长期运行的任务和避免有可能出现的内存泄漏问题. ...
- [转]Activitys, Threads, & Memory Leaks
转自:http://www.androiddesignpatterns.com/2013/04/activitys-threads-memory-leaks.html http://www.cnblo ...
- Instruments Tutorial for iOS: How To Debug Memory Leaks【转】
If you're new here, you may want to subscribe to my RSS feed or follow me on Twitter. Thanks for vis ...
- Instruments Tutorial for iOS: How To Debug Memory Leaks
http://www.raywenderlich.com/2696/instruments-tutorial-for-ios-how-to-debug-memory-leaks Update 4/12 ...
- Find out when memory leaks are a concern and how to prevent them
Handling memory leaks in Java programs Find out when memory leaks are a concern and how to prevent t ...
- Avoiding memory leaks
Android applications are, at least on the T-Mobile G1, limited to 16 MB of heap. It's both a lot of ...
- Identify Memory Leaks in Visual CPP Applications —— VLD内存泄漏检测工具
原文地址:http://www.codeproject.com/Articles/1045847/Identify-Memory-Leaks-in-Visual-CPP-Applications 基于 ...
随机推荐
- jsp中对话框的实现
<Input type=submit name="g" style="font-size:20px" value="提交" oncli ...
- 一天一个算法：求Sn=a+aa+aaa+…+aa…a之和
/* 求Sn=a+aa+aaa+…+aa…a之值,其中a是一个数字. 例如:2+22+222+…+22222(此时n=5),n由键盘输入.*/ void Function3() { int a,n,s ...
- IIS 7.5 配置
安装 MVC 3 对应版本. 或者对应的版本. 登陆时候报错 检查下面几项是否配置正确 检查ASP.net 是否开启. 检查网站的应用池是否配置正确 在处理程序映射当中检查这几项是否配置正确 如果都配 ...
- <Sicily>Pythagorean Proposition
一.题目描述 One day, WXYZ got a wooden stick, he wanted to split it into three sticks and make a right-an ...
- ES6中的let、contst
一 let 1.let 局部变量 不会变量提升,在运用时候要先声明在调用,var 全局变量 会产生变量提升: 2.在块级作用域中纯在let const,他所生命的变量就绑定在这个区域,未经过声明调用会 ...
- CF 965 B. Battleship
Arkady is playing Battleship. The rules of this game aren't really important.There is a field of n×n ...
- gcd步数
题目描述 一个有趣的函数F(a,b),表示对于数对(a,b)调用辗转相除法的步数为多少 例如 (24,40)....0 (16,24).....1 (8,16).....2 (0,8)....3,即f ...
- ifsta---统计网络接口活动状态
ifstat命令就像iostat/vmstat描述其它的系统状况一样,是一个统计网络接口活动状态的工具.ifstat工具系统中并不默认安装,需要自己下载源码包,重新编译安装,使用过程相对比较简单. 下 ...
- numpy基础篇-简单入门教程2
import numpy as np Array 数组 print(np.zeros((2, 2))) # [[0. 0.] [0. 0.]] print(np.ones((2, 2))) # [[1 ...
- Android studio树形
原创作品,允许转载,转载时请务必声明作者信息和本声明. http://www.cnblogs.com/zhu520/p/8349553.html 这个是上网找了好久才弄出来的,我把我上网找的总结也写 ...