首页 > 其他 > 详细

react生命周期

时间:2021-05-11 21:51:20      阅读:33      评论:0      收藏:0      [点我收藏+]

生命周期

组件初始化    创建时componentDidMount

组件更新        更新中componentDidUpdate

组件卸载       卸载时componentWillUnmount

技术分享图片

 

// 自制 钟表

import React from ‘react‘

class Clock extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        date: new Date()
      }
    }
    componentDidMount() {
      this.timer = setInterval(() => {
        this.setState({
          date: new Date()
        })
      }, 1000)
    }
    // componentDidUpdate(currentProps, currentState) { // 接受2个参数 第一个参数 props  第二个参数 变化的值
    //   console.log(currentState)
    // }
    componentWillUnmount() {
      clearInterval(this.timer)
    }
    render() {
      return (
        <div className="jumbotorn">
          <h1>{ this.state.date.toLocaleTimeString() }</h1>
        </div>
      )
    }
}

export default Clock

react生命周期

原文:https://www.cnblogs.com/hekeying/p/14756654.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!