propTypes 檢查組件的屬性值是否符合要求
var Test = React.createClass({
PropTypes: {
title: React.PropTypes.string.isRequired
},
render: function() {
return (
<h1>{this.props.title}</h1>
)
}
});
var titleData = 111;
ReactDOM.render(
<Test title={titleData}></Test>,
document.querySelector('#display')
);
注意React.PropTypes是大寫開頭
ref 真實DOM
- React使用的是虛擬DOM的實現方式，即所有的DOM先在虛擬DOM中發生，再反應在真實的DOM上
- 在標簽上使用
ref="refName"屬性，獲取時使用this.refs.refName就可以拿到真實的DOM -
this.refs.refName需要在虛擬DOM插入到文檔之后才能使用，否則會報錯
state 狀態機
-
getInitialState用于初始化狀態，這個對象可以通過this.state拿到，因此對象里的屬性也可以通過this.state.屬性名的方式獲取到 - 通過
this.setState()來修改狀態值，每次修改之后，會自動調用this.render()方法再次渲染組件
state和props的區別
都用于描述組件的特性，this.props表示那些一旦定義，就不再改變的特性，而this.state是會隨著用戶互動而產生變化的特性。
表單與onChange、setState、event.target.value實現值同步
輸入框實時輸入的值，不能用 this.props.value 讀取，而要定義一個 onChange 事件的回調函數，通過 event.target.value 讀取用戶輸入的值。textarea 元素、select元素、radio元素都屬于這種情況
var MyInput = React.createClass({
getInitialState: function() {
return {
value: "input some words here"
};
},
inputHandleChange: function(e) {
this.setState({
value: e.target.value
});
},
render: function() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.inputHandleChange}/>
<h1>{this.state.value}</h1>
</div>
);
}
});
ReactDOM.render(
<MyInput></MyInput>,
document.querySelector('#display')
);
生命周期
生命周期的三個狀態
- Mounting 已掛載真實DOM
- Updating 正在重新渲染
- Unmounting 已卸載真實DOM
生命周期調用的方法：
- 初始化階段：
- getDefaultProps() 初始化屬性
- getInitialState() 初始化狀態
- componentWillMount() 準備掛載
- render() 渲染
- componentDidMount() 掛載完畢
- 運行階段：
- componentWillReceiveProps() 組件將接收到新屬性
- shouldComponentUpdate() 收到新屬性或新狀態判斷是否重新渲染
- componentWillUpdate() 準備重新渲染
- render() 渲染
- componentDidUpdate() 重新渲染完畢
- 銷毀階段：
- componentWillUnmount() 準備卸載
組件樣式
- 錯誤寫法：
style="opacity:{this.state.opacity};"
- 正確示范：
style={{opacity: this.state.opacity}}
