(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(
            <div>
                <h1>
                    <p>现在的时间是</p>
                    { this.state.date.toLocaleTimeString() }
                   //{ this.state.date.toLocalDateString() }
                </h1>
            </div>
        )
    }
}


export default Clock

总结：
我们一般会把组件的 state 的初始化工作放在 constructor 里面去做；在 componentWillMount 进行组件的启动工作，例如 Ajax 数据拉取、定时器的启动；组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在 componentWillUnmount 里面去做。

---

---

---

(2) 组件的挂载

组件的挂载：组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。

(3) ref属性

ref属性：ref属性用来获取已经挂载的元素的 DOM 节点

 // 自动获取input框（textarea）的焦点

 componentDidMount() {
        this.input.focus();
        // this.textarea.focus();
    }
--------------------------------------
 <input
    ref={ (input) => this.input = input }
 />

--------------------------------------
 <textarea type="text"
    ref={ (textarea) => this.textarea = textarea}
   // ref={ (aa) => this.textarea = aa } 两种写法相等
 />

(4) this.props.children 和 React.Children.map

• React.Children.map
  http://lib.csdn.net/article/react/12197

object React.Children.map(object children, function fn [, object context])

使用方法：
React.Children.map(this.props.children, function (child) {
    return <li>{child}</li>;
})

其他方法
this.props.children.forEach(function (child) {
    return <li>{child}</li>
})
// this.props.children.forEach类似于 React.Children.map()，但是不返回对象。

( App父组件 )

import React, { Component } from 'react';
import './App.css';
import PropsChildren from './propsChildren/propsChildren';
class App extends Component {
    render() {
      return (
        <div className="App" >  
            <div className="father">
                <PropsChildren>
                    <div>
                        <h1>props.chilere例子</h1>
                        <input type="text" placeholder="props.chilere例子"/>
                    </div>
                </PropsChildren>
            </div>
        </div>
    );
  }
}

export default App;

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

( PropsChildren子组件 )


import React, { Component } from 'react';

class Comment extends Component {
    render() {
        return(
            <div>
                <div>
                    { this.props.children } 

                    //下面是React.Children.map的使用
                    {
                        React.Children.map(this.props.children,function(child) {
                            return <div>{ child }</div>
                        })
                    }                 
                </div>
            </div>

        )
    }
}

export default Comment

--------------------------------------------------------------------
( 父组件样式 )
.father{
  margin:50px;
  padding:50px;
  background-color: #FFB6C1;
}

(5) onFocus获得焦点时，触发的函数

(常用的事件函数汇总)http://lib.csdn.net/article/react/54647

<div className="inputDom">
    <input type="text"
           value={ this.state.inputContent }
            onChange = { this.changeInput.bind(this) }
            ref="focusDom"
            onFocus={ this.clearContent.bind(this) }
      />
     <div onClick={ this.focusClear.bind(this) }>清空内容，获得焦点</div>
</div>
-------------------------------------------------------------------------------

 clearContent() {
        this.setState({
            inputContent: ''
        })
  }
 focusClear() {
        this.setState({ inputContent: ''}, () => {
            this.refs.focusDom.focus()
        } )
    }

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

(6) font-awesome 字体图标

官网：http://fontawesome.io/icons/

• 安装

cnpm install font-awesome --save

• 使用

import 'font-awesome/css/font-awesome.css';

• 改变大小,颜色

font-size:20px;
color:red;

(7) iconmoon字体图标制作网站

官网：https://icomoon.io/#home