React 创建一个自动跟新时间的组件

Posted 2020-11-26 平凡是最美荡气回肠

componentDidMount声明周期函数   表示组件渲染完成后

componentWillUnmount声明周期函数  组件将要卸载  通常用于（为了防止内存泄漏  清除定时器）

11==>创建组件 Clock.js  组件名大写


12==》报错 Attempted import error: ‘Clock‘ is not exported from ‘./components/Clock‘
试导入错误：“clock”未从“./components/clock”导出
解决:说明你的导入语句出错  重来


13==>使用组件  实现一个时间自动跟新
 Clock.js 如下


import React,{Component} from "react";
export default class Clock extends Component{
    // state 固定的名字 状态 
    state = {
        data: new Date()
    }
    
    // componentDidMount声明周期函数   表示组件渲染完成后
    componentDidMount(){
        this.timer =setInterval(() => {
            this.setState({//  this.setState固定 更改state中的data值
                 data:new Date()
           })  
        }, 1000);
    }

    // 为了防止内存泄漏  清除定时器
    componentWillUnmount(){
        clearInterval(this.timer);
    }


    // 定义的组件   toLocaleTimeString转为一个具体的时间
    render(){
        return(
            <div>
                {this.state.data.toLocaleTimeString()}
            </div>
        )
    }
}



使用组件
import Clock from "./components/Clock"
  {/* 动态组件 */}
  <Clock></Clock>