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>
