ReactJS组件课后习题

1.创造一个类组件，尽可能的在这个组件的每个生命周期函数中打印出当前所处的生命周期（使用console.log）
2.实现一个定时器组件，每隔1s在屏幕上打印出当前时间
方法一

import  * as React from 'react'
import * as ReactDOM from 'react-dom'
class SimpleComponen extends React.Component {
    state = {}
    render() {
        return (
            <div>
                <h1 id="myHeader" >{
                    changeTime()
                }
                </h1>
            </div>)
    }
}
function changeTime() {
     var nIntervId = setInterval(()=>{var oElem = document.getElementById("myHeader");
         oElem.textContent=setTime1()}, 1000);
}
function setTime1(){
    let time1 = new Date()
    let time2= time1.toString()
    return time2
}
ReactDOM.render(
    <div>
        <SimpleComponen/>
    </div>,
    document.querySelector("#root")
)

第二种方法：

import  * as React from 'react'
import * as ReactDOM from 'react-dom'
class Clock extends React.Component{
    state = {time:new Date()}
    componentDidMount(){
        setInterval(()=>this.settime(),1000);
    }
    settime(){
        this.setState({time:new Date()})
    }
    render(){
        return(
            <div>
                <p> now is { this.state.time.toLocaleTimeString()}</p>
            </div>
        );
    }
}
ReactDOM.render(
    <div>
        <Clock/>
    </div>,
    document.querySelector('#root')
)

第三种方法：

import  * as React from 'react'
import * as ReactDOM from 'react-dom'
function gouzi(){
    ReactDOM.render(
        <div>
            <p>now is {new Date().toLocaleTimeString()}</p>
        </div>,
        document.querySelector("#root")
        )}
setInterval(()=>gouzi(),1000);