类型检测

当我们创建了一个组件，如分页组件，之前我们假定了这个组件的使用者会传入以下的这些props

<Pagination 
  itemsCount={count} 
  pageSize={pageSize} 
  currentPage={currentPage}
  onPageChange={this.handlePageChange}/>

如果使用者忘记传入这些 props 或者传入了错误的值， 就会在程序中制造bug，并且这种情况下我们去看控制台，经常会发现没有任何报错。这种时候我们就要在代码中找来找去，看看到底搞错了什么。
为了防止这种情况的发生，我们需要做类型检测。
在 react 中内置了类型检测。但是从 react15 开始，它被转移到了一个单独的库中，我们需要独立安装：
安装命令：npm i prop-types@15.6.2

proptype.png

现在回到我们的 Pagination 组件中，在顶端通过

import PropTypes from 'prop-types';

将 PropTypes 从 'props-types' 中导出。
在我们定义组件之后，我们需要创建一个新的属性，在这个属性中去定义类型检测的需求。
我们给组件新增一个属性 propTypes ，注意这里应确保 propTypes 拼写正确，否则类型检测无法工作。我们设置该属性为一个新对象，里面添加组件的 props ，同时还有它们的类型，还有是否是必须的值。

Pagination.propTypes = {
  //number指明类型检测的类型，isRequired确保使用分页组件的对象一定会传入这个prop
    itemsCount: PropTypes.number.isRequired, 
    pageSize: PropTypes.number.isRequired, 
    currentPage: PropTypes.number.isRequired, 
    onPageChange: PropTypes.func.isRequired
}

这样进行类型检测后，如果我们传入错误的值，会在控制台看到警告，如我们像下面这样使用组件（给itemsCount传入 ‘abc’）：

<Pagination
  itemsCount=‘abc’
  pageSize={pageSize} 
  currentPage={currentPage}
  onPageChange={this.handlePageChange}/>

在浏览器中，我们会得到如下warning，而不是什么错误提示都没有。它只在开发模式中看得见，当你发布了软件之后就没有了。

warning.png

当我们在开发组件特别是复用组件时，使用 propsTypes 去检测输入的数据类型时非常好的习惯。这也像给组件的某种文档，当我们想使用一个复用组件时，我们不用去看它的渲染器，去辨认我们需要给组件传递什么，我们可以只看组件中的 propTypes 对象，就知道组件需要什么 props 并且是否是必须的。