React的PropTYpes

React的PropTYpes和獲取真實DOM

組件的屬性能夠接受任意值，字符串，對象，函數等等均可以。有時，咱們須要一種機制，驗證別人使用組件時，提供的參數是否符合要求。

組件類的PropsTypes屬性，就是用來驗證組件實例的屬性是否符合要求

var  myTitle = React.createClass({
    propsTypes:{
        title:React.PropsTypes.string.isRequired,
    }
    render(){
        return <h1>{this.props.title}</h1>
    }
});

上面的Mytitle組件有一個title屬性。PropTypes告訴React，這個title屬性是必須的，並且必須是字符串。

此外，getDefaultProps方法能夠用來設置組件屬性的默認值。

var  MyTitle = React.createClass({
    getDefaultProps:function(){
        return {
            title:'hello world'
        }
    }
    render(){
        return (
            <h1>{this.props.title}</h1>;
        )
    }
})

ReactDOM.render(
    <MyTitle />,
    document.body
)

上面代碼會輸出「hello world」。

獲取真實的DOM節點

組件並非真實的DOM節點，而是存在於內存之中的一種數據結構，叫作虛擬DOM。只有當它插入文檔之後，纔會變成真實的DOM。根據React的設計，全部的DOM變更，都先在虛擬的DOM上發生，而後再將實際發生變更的部分，反映在真實DOM上，這種算法叫作 DOM diff,它能夠極大提升網頁的性能表現。

可是，有時須要從組件獲取真實的DOM節點，這時就要用到ref屬性。

var  MyComponent = React.createClass({
    handleClick(){
        this.refs.myTextInput.focus();
    },
    render(){
        return (
            <input type="text" ref="myTextInput" />
            <input type="button" value="focus the Text input"  onClick={this.handleClick} />
        )
    
    }
})

ReactDOM.render(
    <MyComponent />,
    document.getElementById("example")
)

上面代碼中，組件MyComponent的子節點有一個文本輸入框，用於獲取用戶輸入。這時就必須獲取真實的DOM節點，虛擬DOM是拿不到用戶輸入的。爲了作到這一點，文本輸入框必須有一個ref屬性，而後this.refs.[refName]就會返回這個真實的DOM節點。

須要注意的是，因爲this.refs.[refName]屬性獲取的是真實DOM，因此必須等到虛擬DOM插入文檔之後，才能使用這個屬性，不然會報錯。上面代碼中，經過爲組件指定Click事件的回調函數，確保了只有等到真實DOM發生Click事件以後，纔會讀取this.refs.[refName]屬性。

React組件支持不少事件，除了Click事件之外，還有keyDown、Copy、Scroll等。完整的事件清單請查看官方文檔。