關(guān)于PropTypes
- PropTypes包含一整套驗(yàn)證器，可用于確保你接收的數(shù)據(jù)是有效的夯巷。
- 能幫助我們?cè)陂_(kāi)發(fā)的時(shí)候及時(shí)發(fā)現(xiàn)問(wèn)題赛惩。
- 沒(méi)有propTypes定義，組件依然能夠正常工作趁餐，而且喷兼，即使在propTypes檢查出錯(cuò)的情況下，組件依然能工作后雷。
- propTypes只是一個(gè)輔助開(kāi)發(fā)的功能季惯，并不會(huì)改變組件的行為吠各。
為了驗(yàn)證propTypes的作用，故意違反propTypes規(guī)則即可勉抓。在項(xiàng)目react-full-stack-learning的分支todo_controlled_component贾漏，將todos下的reducer.js的初始值的第一項(xiàng)text改成一個(gè)數(shù)字10000，如下：
const initialState = [
{
text: 10000,
completed: false,
id: 0
},
{
text: 'welcome to react and redux learning',
completed: false,
id: 1
}
];
npm start之后藕筋，在打開(kāi)的瀏覽器控制臺(tái)會(huì)顯示如下警告纵散，說(shuō)明propTypes類(lèi)型檢查已經(jīng)生效。
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)
要不要在打包時(shí)移除PropTypes代碼念逞？
npm run build之后，將編譯打包之后的build目錄發(fā)布到nginx边翁，打開(kāi)頁(yè)面查看翎承，并沒(méi)有如預(yù)期中的警告提示。是不是說(shuō)明在打包的時(shí)候已經(jīng)做了處理了呢符匾？
個(gè)人認(rèn)為叨咖，只要打包部署之后，這些代碼沒(méi)有被執(zhí)行啊胶，影響不大甸各，可不必在意。唯一需要考慮的問(wèn)題就是打包之后的 js 文件大小的問(wèn)題了焰坪。
因?yàn)榇虬笕で悖](méi)有看到警告提示，所以某饰，相關(guān)的代碼是不是已經(jīng)被移除了呢儒恋？因?yàn)闆](méi)有仔細(xì)對(duì)比，不敢妄下結(jié)論黔漂。猜測(cè)诫尽，create-react-app 已經(jīng)做了優(yōu)化，見(jiàn)頁(yè)尾 create-react-app 關(guān)于 propTypes 的 Issue炬守。
如果這部分代碼特別多牧嫉，需要考慮應(yīng)用在移動(dòng)端的響應(yīng)速度，就需要考慮在發(fā)布打包的時(shí)候移除這部分代碼减途。
那么酣藻，有沒(méi)有辦法在軟件發(fā)布的時(shí)候，把這些propTypes檢查自動(dòng)去掉呢鳍置？答案是肯定的臊恋。可以用這個(gè)插件解決：babel-plugin-transform-react-remove-prop-types
擴(kuò)展閱讀
關(guān)于項(xiàng)目發(fā)布至生產(chǎn)環(huán)境時(shí)墓捻，去掉propTypes檢查的問(wèn)題抖仅，create-react-app項(xiàng)目有一個(gè)Issue：Removing propTypes in production build?
關(guān)于作者
- github: https://github.com/uncleAndyChen
- gitee: https://gitee.com/uncleAndyChen
- 個(gè)人博客：https://www.lovesofttech.com
- CSDN博客：https://blog.csdn.net/runAndRun
- 郵箱：andy@lovesofttech.com
