react学习笔记【2】

react的生命周期

挂载->更新->卸载

不常用生命周期

生命周期挂载阶段

生命周期更新阶段

生命周期卸载阶段

实操

clock文件夹里面的index.js

import React, { Component } from 'react'

export default class index extends Component {
    constructor(){
        super() 
        console.log('构造器');
        this.state = {
            // 定义内部状态数据
            date:new Date()
        }
    }
  render() {
    console.log('渲染');
    return (
      <div>
        <h2>电子时钟</h2>
        <p>时间{this.state.date.toLocaleTimeString()}</p>
      </div>
    )
  }
  componentDidMount(){
    console.log('挂载完成');
  }
}

app.js

import Clock from "./components/Clock"
<Clock />

页面效果与控制台输出

clock文件夹里面的index.js（更新）

import React, { Component } from 'react'

export default class index extends Component {
    constructor(){
        super() 
        console.log('构造器');
        this.state = {
            // 定义内部状态数据
            date:new Date()
        }
    }
  render() {
    console.log('渲染');
    return (
      <div>
        <h2>电子时钟</h2>
        <p>时间{this.state.date.toLocaleTimeString()}</p>
      </div>
    )
  }

  componentDidMount(){
    console.log('挂载完成');
    // 在挂载完成后立刻执行
    this.onTick()
  }
  componentDidUpdate(){
    console.log('更新生命周期');
  }
  onTick(){
    // 启动定时器
    setInterval(()=>{
      // 每秒获取当前时间并通过setState设置给内部状态
      this.setState({date:new Date()})
    },1000)
  }
}

页面效果与控制台输出（更新）

控制台会循环输出：渲染->更新生命周期

控制台会循环输出：渲染->更新生命周期

卸载生命周期

import Todolist from "./components/todolist"
import Clock from "./components/Clock"
import React from "react";
// 引入首字母要大写
class App extends React.Component{
  state={
		isOpen:true
	}
	render () {
		return (
			<div>
        <h2>这是react脚手架创建项目</h2>
        <Todolist />
				{/* 生命周期 */}
				{this.state.isOpen?<Clock/>:''}
				
				<button type="button" onClick={()=>{this.setState({isOpen:false})}}>关闭时钟</button>
			</div>
		)
	}
}
// 把组件暴露出去
export default App;

启动定时器

 onTick(){
    // 启动定时器
    this.timer = setInterval(()=>{
      // 每秒获取当前时间并通过setState设置给内部状态
      this.setState({date:new Date()})
    },1000)
  }

清除定时器

componentWillUnmount(){
    console.log('卸载生命周期');
        // 清除定时器
    clearInterval(this.timer)
  }