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等。完整的事件清单请查看官方文档。