[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 基于 ...
随机推荐
- 查看CPU是几核
命令1 (查看有几个CPU):cat /proc/cpuinfo |grep "physical id"|sort |uniq|wc -l 命令2 (每个CPU几核):cat /p ...
- Auto-Publishing and Monitoring APIs With Spring Boot--转
原文地址:https://dzone.com/articles/auto-publishing-amp-monitoring-apis-with-spring-bo If you are headin ...
- Hadoop-CDH源码编译
* Hadoop-CDH源码编译 这一节我们主要讲解一下根据CDH源码包手动编译的过程,至于为什么要使用CDH,前几节已经说明,那为什么又要自己手动编译,因为CDH的5.3.6对应的Hadoop2.5 ...
- 使用ajax验证用户名重复
继上次的用户注册登录案例之后,对其中的部分功能再做进一步改进.上一版中用户提交表单后才对用户名进行校验,虽然做了回显,但还是感觉功能弱了些.为了能有更好用户体验,不是在用户提交表单后才给提示,而是在用 ...
- PostgreSQL Replication之第八章 与pgbouncer一起工作（1）
当您在使用大规模的设施工作,可能有时候,您必须处理许多并发打开的连接.没有人会使用十台服务器来为两个并发用户提供服务--在许多情况下,这根本没有意义.大量的设施通常会处理成百上千的并发连接.引入连接池 ...
- hdu1864/2844/2159 背包基础题
hdu1864 01背包 题目链接 题目大意:一堆数,找到一个最大的和满足这个和不超过Q要学会分析复杂度! #include <cstdio> #include <cstring&g ...
- rpm卸载包遭遇 specifies multiple packages 错误
使用 rpm删除软件时报错如下: [root@hostxxlidan]# rpm -qa |grep -i mysqlmysql-devel-5.0.95-5.el5_9mysql-devel-5.0 ...
- ubuntu 18.04网卡命名规则改回传统的ethx
自15版本开始网卡命名规则就不叫eth0了.而是用可预期网络接口设备名称的命名规则,比如网卡名为enp3s0 . 如果想要变回ethx也是可以的,参考以下步骤: 1.编辑/etc/default/gr ...
- tf.nn.softmax（logits,name=None）
tf.nn.softmax( logits, axis=None, name=None, dim=None #dim在后来改掉了 ) 通过Softmax回归,将logistic的预测二分类的概率的问题 ...
- 学习笔记 Java_静态_继承 2014.7.12
一.静态 1.构造函数: 特点: 1. 函数名和类名同样. 2. 不用定义返回值类型(和void不是一回事,而构造函数是根本不用定义返回值类型). 3. ...