+++
Categories = ["React",]
Tags = ["React","入門",]
date = "2015-09-24T22:20:19+00:80"
titile = "React入門-002"
+++
1膳凝，PropTypes
組件的屬性可以接受任意值防泵，字符串、對象掉分、函數(shù)等等都可以百拓。
組件類的PropTypes屬性是用來驗證組件實例的屬性是否符合要求：
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
var title = "hello";
ReactDOM.render(
<MyTitle title={title} />,
document.body
);
getDefaultProps 方法可以用來設(shè)置組件屬性的默認值:
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body
);
2渠鸽，獲取真實的DOM節(jié)點
組件并不是真實的 DOM 節(jié)點嫂粟，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)读虏，叫做虛擬 DOM （virtual DOM）责静。只有當它插入文檔以后，才會變成真實的 DOM 盖桥。根據(jù) React 的設(shè)計灾螃，所有的 DOM 變動，都先在虛擬 DOM 上發(fā)生揩徊，然后再將實際發(fā)生變動的部分腰鬼，反映在真實 DOM上，這種算法叫做 DOM diff 塑荒，它可以極大提高網(wǎng)頁的性能表現(xiàn)熄赡。
但是，有時需要從組件獲取真實 DOM 的節(jié)點齿税，這時就要用到 ref 屬性:
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
組件 MyComponent 的子節(jié)點有一個文本輸入框彼硫，用于獲取用戶的輸入。這時就必須獲取真實的 DOM 節(jié)點凌箕，虛擬 DOM 是拿不到用戶輸入的拧篮。為了做到這一點，文本輸入框必須有一個 ref 屬性牵舱，然后 this.refs.[refName] 就會返回這個真實的 DOM 節(jié)點他托。
需要注意的是，由于 this.refs.[refName] 屬性獲取的是真實 DOM 仆葡，所以必須等到虛擬 DOM 插入文檔以后赏参，才能使用這個屬性，否則會報錯沿盅。上面代碼中把篓，通過為組件指定 Click 事件的回調(diào)函數(shù)，確保了只有等到真實 DOM 發(fā)生 Click 事件之后腰涧，才會讀取 this.refs.[refName] 屬性韧掩。
React 組件支持很多事件，除了 Click 事件以外窖铡，還有 KeyDown 疗锐、Copy坊谁、Scroll 等;
3，this.state
React 的一大創(chuàng)新滑臊，就是將組件看成是一個狀態(tài)機口芍，一開始有一個初始狀態(tài)，然后用戶互動雇卷，導(dǎo)致狀態(tài)變化鬓椭，從而觸發(fā)重新渲染 UI:
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
一個 LikeButton 組件，它的 getInitialState 方法用于定義初始狀態(tài)关划，也就是一個對象小染，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件贮折，導(dǎo)致狀態(tài)變化裤翩，this.setState 方法就修改狀態(tài)值，每次修改以后调榄，自動調(diào)用 this.render 方法岛都，再次渲染組件。
this.props 表示那些一旦定義振峻，就不再改變的特性，而 this.state 是會隨著用戶互動而產(chǎn)生變化的特性;
4, 表單
用戶在表單填入的內(nèi)容择份，屬于用戶跟組件的互動扣孟，所以不能用 this.props 讀取:
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.body);
文本輸入框的值，不能用 this.props.value 讀取荣赶，而要定義一個 onChange 事件的回調(diào)函數(shù)凤价，通過 event.target.value 讀取用戶輸入的值。textarea 元素拔创、select元素利诺、radio元素都屬于這種情況;
5，組件的生命周期
組件的生命周期分成三個狀態(tài)：
* Mounting：已插入真實 DOM
* Updating：正在被重新渲染
* Unmounting：已移出真實 DOM
React 為每個狀態(tài)都提供了兩種處理函數(shù)剩燥，will 函數(shù)在進入狀態(tài)之前調(diào)用慢逾，did 函數(shù)在進入狀態(tài)之后調(diào)用，三種狀態(tài)共計五種處理函數(shù):
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外灭红，React 還提供兩種特殊狀態(tài)的處理函數(shù):
- componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時調(diào)用
- shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調(diào)用
例子：
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.body
);
組件的style屬性的設(shè)置方式侣滩，這是因為 React 組件樣式是一個對象，所以第一重大括號表示這是 JavaScript 語法变擒，第二重大括號表示樣式對象君珠。
