(1)計時器
知識點
(1) toLocaleTimeString() ：根據(jù)本地時間把 Date 對象的時間部分轉(zhuǎn)換為字符串
(2) toLocaleDateString() ： 根據(jù)本地時間把 Date 對象的日期部分轉(zhuǎn)換為字符串
(3) 一些組件啟動的動作鱼蝉，包括像 Ajax 數(shù)據(jù)的拉取操作北发、一些定時器的啟動等，就可以放在 componentWillMount 里面進行
/**
* Created by WOOW.WU on 2017/9/6.
*/
import React, { Component } from 'react';
class Clock extends Component {
constructor() { // 數(shù)據(jù)的初始化
super();
this.state = {
date: new Date()
}
}
componentWillMount() { //組件即將被掛在，render()之前
this.timer = setInterval( () => {
this.setState({
date: new Date()
})
},1000)
}
componentWillUnmount() {
clearInterval(this.timer);
// 必須銷毀定時器伴澄，因為隱藏的時候仍然在不停的setState
// 而setState只能在已經(jīng)掛載或者正在掛載的組件上調(diào)用
}
render() {
return(
<div>
<h1>
<p>現(xiàn)在的時間是</p>
{ this.state.date.toLocaleTimeString() }
//{ this.state.date.toLocalDateString() }
</h1>
</div>
)
}
}
export default Clock
總結(jié)：
我們一般會把組件的 state 的初始化工作放在 constructor 里面去做真仲；在 componentWillMount 進行組件的啟動工作，例如 Ajax 數(shù)據(jù)拉取漏健、定時器的啟動嚎货；組件從頁面上銷毀的時候，有時候需要一些數(shù)據(jù)的清理蔫浆，例如定時器的清理殖属，就會放在 componentWillUnmount 里面去做。
(2) 組件的掛載
組件的掛載：組件的掛載指的是將組件渲染并且構(gòu)造 DOM 元素然后插入頁面的過程瓦盛。
(3) ref屬性
ref屬性：ref屬性用來獲取已經(jīng)掛載的元素的 DOM 節(jié)點
// 自動獲取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獲得焦點時谭溉，觸發(fā)的函數(shù)
(常用的事件函數(shù)匯總)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) }>清空內(nèi)容墙懂，獲得焦點</div>
</div>
-------------------------------------------------------------------------------
clearContent() {
this.setState({
inputContent: ''
})
}
focusClear() {
this.setState({ inputContent: ''}, () => {
this.refs.focusDom.focus()
} )
}
------------------------------------------------------------------------------
(6) font-awesome 字體圖標
官網(wǎng)：http://fontawesome.io/icons/
- 安裝
cnpm install font-awesome --save
- 使用
import 'font-awesome/css/font-awesome.css';
- 改變大小,顏色
font-size:20px;
color:red;
(7) iconmoon字體圖標制作網(wǎng)站
官網(wǎng)：https://icomoon.io/#home
