zoukankan html css js c++ java

[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,
       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)

查看全文

相关阅读:
安装VS 2015完成后,VS2012 打开报错
 ASP.NET MVC 项目中一般处理程序ashx 获取Session
windows平台查看 dll 程序集 PublicKeyToken
MySQL 表与字段编码格式报错
 Linux系统下安装MongoDB 指南
 ASP.NET 访问路径错误提示 HTTP 错误 404.8 原来路径中包含bin目录被拒绝
 ASP.NET 大文件上传
 将类型(int,string,…)转换为 T 类型
 直接插入排序
 MySQL 优化之索引合并（index_merge）

原文地址：https://www.cnblogs.com/Answer1215/p/8000943.html