state狀態(tài)和props屬性是react非常重要的兩個(gè)方面，狀態(tài)控制組件內(nèi)部的變化，屬性獲取外部傳遞給內(nèi)部的數(shù)據(jù)，當(dāng)state和props改變時(shí)，會(huì)重新調(diào)用render方法，渲染dom對象。
state狀態(tài)
常用方法：
- getInitialState:獲取組件的初始化狀態(tài)，在組件加載的時(shí)候調(diào)用（render前）
- this.state:獲取組件的狀態(tài)的值，但不能通過this.state.xxx = xxx改變狀態(tài)的值
- this.setState:用來改變組件狀態(tài)的值 ，用法如下
var Radio= React.createClass({
// 定義組件的初始狀態(tài)，初始為關(guān)
getInitialState: function() {
return { checked: false }
}, // 通過 this.state 獲取當(dāng)前狀態(tài)
changeCheck: function() {
this.setState({ checked: !this.state.checked}); }
}),
render: function() {
return <label className="radio">
<input type="radio" checked={this.state.checked} onChange={this.changeCheck}/> 選中
</label>
},
// 通過 setState 修改組件狀態(tài) // setState 過后會(huì) React 會(huì)調(diào)用 render 方法重渲染
props屬性
常用方法：
1.this.props.xxx 用來獲取寫在組件中的xxx屬性的值 注意jsx中class屬性為 className，for屬性為 htmlFor；
2.getDefaultProps：獲取默認(rèn)的屬性對象，在render前調(diào)用一次，用于將組件中綁定的屬性添加到this.props ；可以設(shè)置默認(rèn)值，當(dāng)組件屬性沒傳值時(shí)，調(diào)用默認(rèn)值；
3.this.props.children ：獲取子節(jié)點(diǎn)的屬性，其中children只能為一個(gè)元素，不能為組件
var GetChildItem = React.createClass({
render: function() {
var props = this.props;
return <div className="todo-item">
<span class="todo-item__name">{props.children}</span>
</div>
}
});
ReactDOM.render(
<GetChildItem >子節(jié)點(diǎn)內(nèi)容</GetChildItem >, document.getElementById('example'));
- propsType用來校驗(yàn)屬性傳遞的正確性（非空，類型驗(yàn)證等）,通常寫在最前面；
var MyComponent = React.createClass({
propTypes: {
optionalRequired:React.PropTypes.isRequired,//不能為空
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 任何可以被渲染的包括，數(shù)字，字符串，組件，或者數(shù)組
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
customProp: function(props, propName, componentName) {}//自定義校驗(yàn)
}
});
