react 项目，在生产环境去掉 propTypes 检查代码，
2018-12-09 本文已影响208人
AndyChen
关于PropTypes
- PropTypes包含一整套验证器，可用于确保你接收的数据是有效的。
- 能帮助我们在开发的时候及时发现问题。
- 没有propTypes定义，组件依然能够正常工作，而且，即使在propTypes检查出错的情况下，组件依然能工作。
- 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检查的问题，create-react-app项目有一个Issue：Removing propTypes in production build?
