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 功能组件自动关注 reactstrap 警报