本小节，我们为案例写的所有props标签属性，追加一些类型和必要性的限制。在React中对props进行类型限制是很重要的，原因如下：
- 防止错误和bug： 通过对props进行类型限制，可以在开发过程中及早发现错误和bug。这可以节省后期调试的时间和精力。
- 提高代码可读性和可维护性： 通过明确定义组件期望的props类型，可以使其他开发人员更容易理解如何使用组件以及传递什么数据。这也可以使代码库随着时间的推移更容易维护。
- 提高代码文档化程度： 通过定义组件期望的props类型，它作为组件的一种文档形式。这可以使其他开发人员更容易理解如何使用组件以及传递什么数据。
安装并引入
npm i prop-types
react里面并没有集成标签属性的限制，因为有些习惯使用，而有些不使用，看个人需要以及公司规范。
使用的时候需要在组件头部引入
import PropTypes from 'prop-types'
这里的别名我们还是使用我们之前学习时的别名
改造组件
- Header组件
// 对props做类型和必要性的限制 static propTypes = { addTodo: PropTypes.func.isRequired }
限制属性addTodo的类型必须是一个方法且必传。
- List组件
// 对props做类型和必要性的限制 static propTypes = { updateTodo: PropTypes.func.isRequired, todos: PropTypes.array.isRequired }
限制属性updateTodo的类型必须是一个方法且必传,限制属性todos必须是一个数组且必传。
- 查看效果
当我错误给addTodo属性赋值为1时，看看报错否？
Warning: Failed prop type: Invalid prop `addTodo` of type `number` supplied to `Header`, expected `function`.
报错告诉我，它希望这个值是一个函数而不是一个数值，说明对props的限制起作用了。
小总结
- 对props做限制需要你手动的安装依赖库：
npm i prop-types。 - 在组件内部需要定义一个静态的属性：
propTypes,该属性是一个对象，里面是你写的限制props的规则。 - 为了组件的维护性和可读性我们推荐都对props做一些必要性的限制。
