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 创建一个自动跟新时间的组件的更多相关文章

  1. 用React实现一个自动生成文章目录的组件

    原文地址:小寒的博客 功能介绍 这个组件的效果呐,就是你在浏览这个页面的时候点击右上角的叉叉看到的那个文章目录. 功能很简单,就是根据文章内容自动生成这个目录,可以快速跳转. 需要的知识点 正则 do ...

  2. Inno Setup怎样创建一个自动申请管理员身份运行的快捷

    如果你使用的是 Unicode 版本的 Inno Setup,那么以下是更为专业的解决方法.    这是 mlaan 提及的再一种方法. QUOTE(     CodeAutomation3.iss) ...

  3. thinkphp 自动跟新时间

    看了很多文章和资料了,明白何为真传一句话了... 模板里: <input type="text" name="time" value="{:da ...

  4. 一个自动修正数据时间和补全缺失数据的MapReduce程序

    原始数据如下图: 程序: Mapper类: public class DemoMapper extends Mapper<LongWritable,Text,IntWritable,Text&g ...

  5. react:如何创建一个新项目

    如何用react创建一个新的项目 我们打开react官网:https://reactjs.org/docs/create-a-new-react-app.html 看到以下命令 npx create- ...

  6. react创建新项目并且修改配置文件

    react创建项目 这是我在用react搭建项目时,用到的一些东西,顺序纯属自己定义, 一.创建项目 用react 创建一个项目,这也是官方给出的 1.npm install create-react ...

  7. NG2-我们创建一个可复用的服务来调用英雄的数据

    <英雄指南>继续前行.接下来,我们准备添加更多的组件. 将来会有更多的组件访问英雄数据,我们不想一遍一遍地复制粘贴同样的代码. 解决方案是,创建一个单一的.可复用的数据服务,然后学着把它注 ...

  8. D3.js(v3)+react 制作 一个带坐标与比例尺的散点图 (V3版本)

    上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html   这一章做散点图.   散点图(Scatter Chart),通常是一横一竖 ...

  9. D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

    现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...

随机推荐

  1. SQLserver还原失败(数据库正在使用,无法获得对数据库的独占访问权)

    问题描述: Sql server还原失败(数据库正在使用,无法获得对数据库的独占访问权) 数据库还原的时候还有其他进程连在上面,导致无法获得独占造成的. 这个问题的原因在于有用户连接了当前要做还原的数 ...

  2. Android 获取当前IP地址

    首先设置用户权限 <uses-permission android:name="android.permission.INTERNET"></uses-permi ...

  3. How to: Use XPO Upcasting in XAF 如何:在 XAF 中使用 XPO 强制转换

    In this topic, you will learn how to use the Upcasting feature of XPO in XAF. It is useful when you ...

  4. .netcore2.1 ef 使用外键关联查询

    //实体类 [Table("invoiceinfo", Schema = "obs")] public class invoice { [Key] public ...

  5. Fiddler常用设置

    1.设置抓取HTTPS请求 勾选后弹窗添加证书确认框 点击yes后,弹出警告 点击是,成功添加证书 点击OK确认,设置成功了 成功抓取到HTTPS请求 2.自定义会话框,展示GET和POST请求 3. ...

  6. Spring整合JMS消息中间件

    1. 点对点模式 1.1消息生产者 (1)创建工程springjms_producer,在POM文件中引入SpringJms .activeMQ以及单元测试相关依赖 (2)在src/main/reso ...

  7. oracle 11gR2 RAC 停库和启库

    grid设置环境变量后可以在任意目录下执行,如root没设置的话需要带绝对路径export ORACLE_HOME=/u01/app/11.2.0/gridexport PATH=$ORACLE_HO ...

  8. (办公)记事本_Linux目录和文件都能操作的命令

    参考谷粒学院Linux:http://www.gulixueyuan.com/course/300/task/7082/show .cp 1.1.作用主要是拷贝,可以拷贝文件或者目录. 1.2.语法: ...

  9. Cocos2d-x.3.0开发环境搭建之—— 极简式环境搭建

    配置:win7 + VS2012 + Cocos2d-x.3.0 + Cocos Studio v1.4.0.1 使用此法可以方便的创建Cocos2d-x项目.如果需要运行Cocos2d-x引擎自带的 ...

  10. 【框架】利用Spring的BeanPostProcessor来修改bean属性

    一.BeanPostProcessor是什么?什么时候触发?可以用来做什么? 1.它是什么? 首先它是一个接口,定义了两个方法: public interface BeanPostProcessor ...