(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;
