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

Posted 平凡是最美荡气回肠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于React 创建一个自动跟新时间的组件的主要内容,如果未能解决你的问题,请参考以下文章

如何向 React/MUI 自动完成组件添加唯一键?

使用 React 创建多页面组件

使用 react 功能组件自动关注 reactstrap 警报

React 组件结束标签

如何为无状态 React 组件创建 TypeScript 类型定义?

使用 React 组件自动完成