[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 基于 ...
随机推荐
- zoj_3735,dp,长沙站j题
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...
- poj--1703--Find them, Catch them（并查集巧用）
Find them, Catch them Time Limit: 1000MS Memory Limit: 10000KB 64bit IO Format: %I64d & %I64 ...
- windows tensorflow 版本与升级
tensorflow 的版本在 1.1.0/1.2.0 之后 api 迎来重大变化,有必要将版本升级到最新的 1.1.0 以上. 1. 使用 upgrade CPU:pip3 install –upg ...
- The in operator
The operators we have seen so far are all special characters like + and *, but there are a few opera ...
- package & import
/* * package:声明源文件所在的包,写在程序的第一行. * 每“.”一次,表示一层文件目录. * 包名都要小写. * * import: * 1)显式导入指定包下的类或接口 * 2)写在包的 ...
- java连接操作Oracle
package com.sp.test; import java.sql.*; import java.util.*; public class Text_lianxi extends Thread ...
- SharePoint 学习快速导航
根据我的学习过程,会不断的增加一些学习的快速链接 . 入门篇 SharePoint入门链接,针对刚刚开始了解SharePoint 的朋友,我也是处在入门的状态,随后会慢慢的累积增加 安装 | 部署 | ...
- Ajax的几种形式 和使用情况
Ajax的几种形式: 1 $.get( "Login.ashx", {Name:name,Pwd:pwd,action:x}, function(data){这里用da ...
- ZOJ-3261 Connections in Galaxy War 并查集 离线操作
题目链接:https://cn.vjudge.net/problem/ZOJ-3261 题意 有n个星星,之间有m条边 现一边询问与x星连通的最大星的编号,一边拆开一些边 思路 一开始是真不会,甚至想 ...
- Object-C,循环语句for,while,do-while
演示循环语句,for,while,do-while,和C系列的语言,语法基本一致1到10,求和 // // main.m // for-while // // Created by fansunion ...