关于PropTypes

1. PropTypes包含一整套验证器，可用于确保你接收的数据是有效的。
2. 能帮助我们在开发的时候及时发现问题。
3. 没有propTypes定义，组件依然能够正常工作，而且，即使在propTypes检查出错的情况下，组件依然能工作。
4. propTypes只是一个辅助开发的功能，并不会改变组件的行为。

为了验证propTypes的作用，故意违反propTypes规则即可。在项目react-full-stack-learning的分支todo_controlled_component，将todos下的reducer.js的初始值的第一项text改成一个数字10000，如下：

const initialState = [
    {
        text: 10000,
        completed: false,
        id: 0
    },
    {
        text: 'welcome to react and redux learning',
        completed: false,
        id: 1
    }
];

npm start之后，在打开的浏览器控制台会显示如下警告，说明propTypes类型检查已经生效。

image

Warning: Failed prop type: Invalid prop `text` of type `number` supplied to `TodoItem`, expected `string`.
    in TodoItem (at todoList.js:14)
    in TodoList (created by Connect(TodoList))
    in Connect(TodoList) (at todos.js:12)
    in div (at todos.js:10)
    in Unknown (at TodoApp.js:8)
    in div (at TodoApp.js:7)
    in TodoApp (at src/index.js:10)
    in Provider (at src/index.js:9)

要不要在打包时移除PropTypes代码？

npm run build之后，将编译打包之后的build目录发布到nginx，打开页面查看，并没有如预期中的警告提示。是不是说明在打包的时候已经做了处理了呢？

个人认为，只要打包部署之后，这些代码没有被执行，影响不大，可不必在意。唯一需要考虑的问题就是打包之后的 js 文件大小的问题了。

因为打包之后，并没有看到警告提示，所以，相关的代码是不是已经被移除了呢？因为没有仔细对比，不敢妄下结论。猜测，create-react-app 已经做了优化，见页尾 create-react-app 关于 propTypes 的 Issue。

如果这部分代码特别多，需要考虑应用在移动端的响应速度，就需要考虑在发布打包的时候移除这部分代码。

那么，有没有办法在软件发布的时候，把这些propTypes检查自动去掉呢？答案是肯定的。可以用这个插件解决：babel-plugin-transform-react-remove-prop-types

扩展阅读

使用 PropTypes 进行类型检查

关于项目发布至生产环境时，去掉propTypes检查的问题，create-react-app项目有一个Issue：Removing propTypes in production build?

关于作者

• github: https://github.com/uncleAndyChen
• gitee: https://gitee.com/uncleAndyChen
• 个人博客：https://www.lovesofttech.com
• CSDN博客：https://blog.csdn.net/runAndRun
• 邮箱：andy@lovesofttech.com