React.PropTypes已死，React中的PropTypes万岁

从 React v15.5 开始，PropTypes 在 React 包中已被弃用，并被赋予了它们自己的包。

改变是生活中不可避免的一部分。

结果是双重的。 1) 如果您使用另一种类型检查机制，则不必担心向最终用户发送不必要的批量。省略进口和银行减重。 2) 你的 PropType 声明将比你想象的更苗条。

不利的一面是，如果您自 v15.3 以来一直忽略有关直接调用 PropTypes 的弃用警告（没有判断力），那只鸡已经回家了。

让我们开始吧，但首先你需要在你的项目中安装这个包。

npm install prop-types --save

或者，你知道，做 Yarn 的事情。无论哪种方式，这都是带有验证的旧简单组件：

import React from 'react';

function Detail ({caption, style}) {
  return <p style={style}>{caption}</p>
}

Detail.propTypes = {
  caption: React.PropTypes.string.isRequired,
  style: React.PropTypes.objectOf(
    React.PropTypes.string
  ),
}

export default Detail;

这是新的方式：

import React from 'react';
import PropTypes from 'prop-types';

function Detail ({caption, style}) {
  return <p style={style}>{caption}</p>
}

Detail.propTypes = {
  caption: PropTypes.string.isRequired,
  style: PropTypes.objectOf(
    PropTypes.string
  ),
}

export default Detail;

实际上，擦掉它。我们承诺苗条；所以给它一个像这样的解构旋转：

import React from 'react';
import {string, objectOf} from 'prop-types';

function Detail ({caption, style}) {
  return <p style={style}>{caption}</p>
}

Detail.propTypes = {
  caption: string.isRequired,
  style: objectOf(
    string
  ),
}

export default Detail;

亲爱的朋友，这就像一幅画一样漂亮，好消息是它完全像你习惯的那样工作。开发中的警告。生产中的沉默。

唯一值得注意的例外是我们上面提到的那个：直接调用 PropTypes。这些检查将在生产中自动调用以下块：

var productionTypeChecker = function () {
  invariant(false, 'React.PropTypes type checking code is stripped in production.');
};

抛出错误并破坏东西。你必须在你的代码中重构这些调用，或者开发出你自己的 prop-types 分支，以使它们保持在升级列车上。

无论您做什么，都不要为这种变化而烦恼。这是一个带有轻微不便税的净收益。