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>