React把PropTypes放到一個獨立包

在給React v16打前站的React v15.5.0中，有一個大的改變，PropTypes的代碼從React中分離出來了，放在一個獨立的npm包prop-types里。

以前，要做PropTypes檢查，代碼是這樣（方法一）。

import React from "react";SomeComponent.propTypes = { foo: React.PropTypes.string};

或者下面這樣（方法二）。

import React, { PropTypes } from "react";SomeComponent.propTypes = { foo: PropTypes.string};

升級到v15.5.0之後，雖然上面的寫法還能湊合著用，但是在運行時會子啊console上留下鮮紅的警告。

總之通過React來獲取PropTypes被deprecate了，不再建議使用，要用PropTypes應該從prop-types來導入。

import PropTypes from "prop-types";SomeComponent.propTypes = { foo: PropTypes.string};

對這個變動，Facebook官方解釋是「不是所有人都用PropTypes」。

我其實很詫異，難道真的有人不用PropTypes？我可是一直當這是必備的工具啊，不用PropTypes的話就沒有prop的類型檢查，如果用錯了的話，那debug起來可就費勁了。

當然，PropTypes可能會消耗一點運行性能，但是有Babel Plugin transform-react-remove-prop-types 在產品環境build中自動刪除propTypes，在開發環境使用propTypes，在產品環境中利用這個Plugin自動去掉propTypes，既有開發過程中的錯誤檢查，又減少了產品環境中code和性能損耗，一石二鳥！

不過，話說回來，即使有Babel Plugin幫忙，只是把我們用React人寫的代碼縮減了，打包進來的React代碼並沒有減少。

理想情況下，從減少最終打包文件大小的角度，我們當然希望沒用上的東西不要被一起打包，但是，如果把PropTypes作為React主package的一部分，那不管用不用PropTypes，最後的打包文件肯定會包含PropTypes。

這麼看來，PropTypes真的應該放在一個獨立的package裡面。在做產品環境的build時，保證NODE_ENV為production，React v15.5.0根本就不會再去使用PropTypes檢查，包含的PropTypes校驗代碼也只是拋出異常。（如果配合Webpack v2的Tree-Shaking功能，可以徹底在產品環境中去掉PropTypes相關代碼）

在React v15.5.0中，prop-types是react依賴的package；在React項目的master branch上，prop-types包已經和React無關了。

有很多人覺得有了prop-types之後，代碼這樣些比較優雅。

import {string} from "prop-types";SomeComponent.propTypes = { foo: string};

說真的，我覺得string這個標識符太容易導致誤解，我寧可還是用PropTypes.string。

推薦閱讀：