省局到
省局到

React.js学习笔记(4) - 生命周期理解(计时器) + （font-awesome）+ ( ref属性 ) + ( React.children与this.props.children ) + ( onFocus )

(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 }
 />

--------------------------------------