(1)计时器
知识点
(1) toLocaleTimeString() ：根据本地时间把 Date 对象的时间部分转换为字符串
(2) toLocaleDateString() ： 根据本地时间把 Date 对象的日期部分转换为字符串
(3) 一些组件启动的动作，包括像 Ajax 数据的拉取操作、一些定时器的启动等，就可以放在 componentWillMount 里面进行
/**
* Created by WOOW.WU on 2017/9/6.
*/
import React, { Component } from 'react';
class Clock extends Component {
constructor() { // 数据的初始化
super();
this.state = {
date: new Date()
}
}
componentWillMount() { //组件即将被挂在，render()之前
this.timer = setInterval( () => {
this.setState({
date: new Date()
})
},1000)
}
componentWillUnmount() {
clearInterval(this.timer);
// 必须销毁定时器，因为隐藏的时候仍然在不停的setState
// 而setState只能在已经挂载或者正在挂载的组件上调用
}
render() {
return(
现在的时间是
{ this.state.date.toLocaleTimeString() }
//{ this.state.date.toLocalDateString() }
)
}
}
export default Clock
总结：
我们一般会把组件的 state 的初始化工作放在 constructor 里面去做；在 componentWillMount 进行组件的启动工作，例如 Ajax 数据拉取、定时器的启动；组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在 componentWillUnmount 里面去做。
(2) 组件的挂载
组件的挂载：组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。
(3) ref属性
ref属性：ref属性用来获取已经挂载的元素的 DOM 节点
// 自动获取input框（textarea）的焦点
componentDidMount() {
this.input.focus();
// this.textarea.focus();
}
--------------------------------------
this.input = input }
/>
--------------------------------------