[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 基于 ...
随机推荐
- 反弹木马——本质上就是一个开80端口的CS程序，伪造自己在浏览网页
反弹端口型木马分析了防火墙的特性后发现:防火墙对于连入的链接往往会进行非常严格的过滤,但是对于连出的链接却疏于防范.于是,与一般的木马相反,反弹端口型木马的服务端(被控制端)使用主动端口,客户端(控制 ...
- [洛谷P1169] [ZJOI2007] 棋盘制作 解题报告(悬线法+最大正方形)
题目描述 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名.据说国际象棋起源于易经的思想,棋盘是一个 8×8 大小的黑白相间的方阵,对应八八六十四卦,黑白对应阴阳. 而我 ...
- java9新特性-15-全新的HTTP 客户端API
1.官方Feature 110: HTTP 2 Client 2.使用说明 HTTP,用于传输网页的协议,早在1997年就被采用在目前的1.1版本中.直到2015年,HTTP2才成为标准. H ...
- SharePoint 修改完或制作完一定要发布
设置了匿名访问但是网站就是需要登录,找了很多问题. 首先想到的映射问题,然后努力检查,最后把代码删掉,然后把站删掉,最后测试出来问题. 点击上方[网站设置] 把修改过的文件发布. 母版也和布局页 一定 ...
- Swift学习笔记（3）：基本运算符
目录: 运算符 元组比较 空和运算符 区间运算符 运算符 +, -, *, /, %, =, +=, -=, *=, /= 算术运算符 >, <, ==, >=, <=, != ...
- 请问Typecho Mysql 数据库和Sqlite数据库我该如何选择。
纠结如我,又纠结了,请大家帮忙看一下我该如何选择.就一个没有文章的博客.一直用VPS太浪费,现在换成了虚拟主机.但是虚拟主机的MYSQL数据库限制连接数30个,我不懂这是个什么概念,但是我觉得30太少 ...
- PostgreSQL Replication之第三章 理解即时恢复（4）
3.4 重放事务日志 一旦我们创建了一个我们自己的初始基础备份,我们可以收集数据库创建的XLOG.当时间到时,我们可以使用所有这些XLOG 文件并执行我们所期望的恢复进程.这就像本节描述的一样工作. ...
- 去除input的前后的空格
这里用的是jquery的方法
- echarts 绑定事件重复执行问题。
网上所有,先调用.off 方法后再调用.on 绑定事件. 无效果,查看api未发现off方法,于是采用,先删除原先元素,后重新生成的方式. 场景描述. 用户查询时,每次结果都对应一张饼图.该张饼图绑定 ...
- echarts 初始化失败问题。
dom 实例容器,一般是一个具有高宽的div元素. 注:如果div是隐藏的,ECharts 可能会获取不到div的高宽导致初始化失败,这时候可以明确指定div的style.width和style.he ...