第二十四章 案例TodoList 之props限制

本小节，我们为案例写的所有props标签属性，追加一些类型和必要性的限制。在React中对props进行类型限制是很重要的，原因如下：

1. 防止错误和bug： 通过对props进行类型限制，可以在开发过程中及早发现错误和bug。这可以节省后期调试的时间和精力。
2. 提高代码可读性和可维护性： 通过明确定义组件期望的props类型，可以使其他开发人员更容易理解如何使用组件以及传递什么数据。这也可以使代码库随着时间的推移更容易维护。
3. 提高代码文档化程度： 通过定义组件期望的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做一些必要性的限制。