zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    初始化Winsock库
    memset与初始化
    老板不在,嚣张的正则
    教研室的下午,取快递的一天
    教研室的夜晚
    真不知道起什么名字了
    任性就是没长大咯
    难得起得早,难得周六上班
    工欲学其语,必先装软件
    151008-JS初级完成,PHP入门(变量常量等)-没假放了
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11966760.html
Copyright © 2011-2022 走看看