關於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型別檢查已經生效。

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?