React的PropTYpes和获取真实DOM

组件的属性可以接受任意值，字符串，对象，函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

组件类的PropsTypes属性，就是用来验证组件实例的属性是否符合要求

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

上面的Mytitle组件有一个title属性。PropTypes告诉React，这个title属性是必须的，而且必须是字符串。

此外，getDefaultProps方法可以用来设置组件属性的默认值。

var  MyTitle = React.createClass({    getDefaultProps:function(){        return {            title:'hello world'        }    }    render(){        return (            
{this.props.title}
;        )    }})ReactDOM.render(    
    ,    document.body)

上面代码会输出“hello world”。

获取真实的DOM节点

组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM。只有当它插入文档以后，才会变成真实的DOM。根据React的设计，所有的DOM变动，都先在虚拟的DOM上发生，然后再将实际发生变动的部分，反映在真实DOM上，这种算法叫做 ,它可以极大提高网页的性能表现。

但是，有时需要从组件获取真实的DOM节点，这时就要用到ref属性。

var  MyComponent = React.createClass({    handleClick(){        this.refs.myTextInput.focus();    },    render(){        return (                                )        }})ReactDOM.render(    
    ,    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等。完整的事件清单请查看。