React的PropTYpes

Posted 2020-11-03 juxiu

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