React把PropTypes放到一個獨立包

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
};

總之通過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