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