对于子组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，有了类型校验，我们的程序就更加健壮了。

步骤

1. 导入 prop-types 包 。这个包在脚手架创建项目时就自带了，无须额外安装

   import ProtTypes from 'prop-types'

2. 使用组件名.propTypes = {属性名1: 类型1, ...} 来给组件的props添加校验规则

示例

import PropTypes from 'prop-types'
class App extends React.component {
    return (
    	<h1>Hi, {props.colors}</h1>
    )
}
App.propTypes = {
    // 约定colors属性为array类型
    // 如果类型不对，则报出明确错误，便于分析错误原因
    colors: PropTypes.array
}

作用：规定接收的props的类型必须为数组，如果不是数组就会报错

props默认值(了解)

目标

掌握给组件的props提供默认值的两种方法

默认值

定义： 没有赋值的情况下，给属性赋一个值

好处：简化调用组件时要传入的属性，更方便用户使用

两种方式

两种方式：

1. defaultProps
2. 解构赋值的默认值

方法1：defaultProps

通过defaultProps可以给组件的props设置默认值，在未传入props的时候生效

定义组件

class App extends React.Component{
    return (
        <div>
            此处展示props的默认值：{ this.props.pageSize }
        </div>
    )
}
// 设置默认值
App.defaultProps = {
	pageSize: 10
}
// 类型限制
App.propTypes = {
  pageSize: PropTypes.number
}

使用组件

// 不传入pageSize属性
<App />

方法2：解构赋值的默认值

class App extends React.Component{
    return (
     // 解构赋值的默认值
     const { pageSize = 10} = this.props
        <div>
            此处展示props的默认值：{ this.props.pageSize }
        </div>
    )
}
// 类型限制
App.propTypes = {
  pageSize: PropTypes.number
}