React学习1-5 组件(下)

二、类

函数方式声明的组件是静态的，不是动态加载的

通过类来声明组件 类需要继承自Component

示例动态时钟：

import React,Component from 'react'
import {render} from 'react-dom'

class Clock extends Component{
	constructor(){
		super();
		//自定义组件状态对象
		this.state = {time:new Date().toLocaleString()}
	}
	//componentWillMount表示挂载前
	componentDidMount(){	//生命周期函数 挂载后
		window.setInterval(() => {	//需要用箭头函数，避免this指向问题
			this.setState({time:new Date().toLocaleString()})
		},1000)
	}
	//render方法指的是该组件将要如何渲染，一定要返回一个React元素，且只能返回一个
	render(){
		return <h1>{this.state.time}</h1>
	}
}

render(<Clock/>,document.querySelector('#root'))