React中的PropTypes

       一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，[点击查看活动详情](juejin.cn/post/708080… "juejin.cn/post/708080…

         说实话，主要写这篇文章的原因，还是因为今天被面试官问到PropTypes，我愣住了，面试官问我用过没，我竟然说没用过，写这篇也是为了警醒自己，还是要把基础打牢，不然面试的时候确实很难，高级的东西是会一点，但是再深奥的，深入到diff的一些东西，真的是接触不到，平时也不着。

       话说回来，PropTypes其实也并没有什么难的，也就是React对于组件传递过来的数据的一个类型约束，可能是TS用的比较多的原因吧，我渐渐地就把这玩意忘了，下面一起来总结以下吧。

在React中属性是可以校验的，React中使用propTypes进行校验：

import React, {PureComponent} from "react"
import NwdInput from "component/nwd-input/index.js"
import {PropTypes} from 'prop-types';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

export default class Life extends React.Component {
    constructor(props) {
        super(props)
    }
    static defaultProps = {
        sex: 111
    }
    static propTypes = {
        sex:PropTypes.string
    }
    render() {
        return (
            <div>
                <div>{this.props.sex}</div>
            </div>
        )
    }
}

与此同时，校验的类型也有很多，比如单个校验，多个校验，嵌套校验等等。

单个校验

optionalArray: PropTypes.array,//检测数组类型

optionalBool: PropTypes.bool,//检测布尔类型

optionalFunc: PropTypes.func,//检测函数（Function类型）

optionalNumber: PropTypes.number,//检测数字

optionalObject: PropTypes.object,//检测对象

optionalString: PropTypes.string,//检测字符串

optionalSymbol: PropTypes.symbol,//ES6新增的symbol类型

多校验，满足其中一种类型

 number:PropTypes.oneOfType(
     [PropTypes.string,PropTypes.number]
 )

嵌套校验

array:PropTypes.arrayOf(PropTypes.number)

内部多中类型校验

object:PropTypes.shape({
    name:PropTypes.string,
    age:PropTypes.number
})