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

简介: 04 React 创建一个自动跟新时间的组件

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>
相关文章
|
2月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
233 0
|
2月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
50 0
|
2月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
45 0
|
2月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
53 0
|
2月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
43 0
|
2月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
81 0
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
34 1
|
2月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
94 1
|
2月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
|
2月前
|
缓存 前端开发 API
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)