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

從 React v15.5起, PropTypes 在 React 包中被減少,並被賦予了他們自己的包。

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

结果是双重的。1)如果你使用另一种类型检查机制,你不必担心向你的最终用户发送不必要的批量。省略进口和银行的减肥。

缺点是,如果你已经忽略了从 v15.3 开始直接拨打 PropTypes 的贬值警告(没有判断),那只鸡已经回来了。

让我们进入它,但首先你需要在你的项目中安装该包。

1npm install prop-types --save

或者,你知道,做 Yarn的事情,无论如何,这里是你的旧简单的组件与验证:

 1import React from 'react';
 2
 3function Detail ({caption, style}) {
 4  return <p style={style}>{caption}</p>
 5}
 6
 7Detail.propTypes = {
 8  caption: React.PropTypes.string.isRequired,
 9  style: React.PropTypes.objectOf(
10    React.PropTypes.string
11  ),
12}
13
14export default Detail;

这里是新的方式:

 1import React from 'react';
 2import PropTypes from 'prop-types';
 3
 4function Detail ({caption, style}) {
 5  return <p style={style}>{caption}</p>
 6}
 7
 8Detail.propTypes = {
 9  caption: PropTypes.string.isRequired,
10  style: PropTypes.objectOf(
11    PropTypes.string
12  ),
13}
14
15export default Detail;

實際上,我們承諾減肥,所以給它一個破壞的旋轉,像這樣:

 1import React from 'react';
 2import {string, objectOf} from 'prop-types';
 3
 4function Detail ({caption, style}) {
 5  return <p style={style}>{caption}</p>
 6}
 7
 8Detail.propTypes = {
 9  caption: string.isRequired,
10  style: objectOf(
11    string
12  ),
13}
14
15export default Detail;

这些,亲爱的朋友,就像一张照片一样漂亮,好消息是,一切都像你习惯的那样工作。

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

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

你必须在你的代码中重塑这些召唤,或者制定你自己的prop-types叉子,让它们保持在升级列车上。

无论你做什么,不要汗水这个变化,这是一个净利润与轻微的不便税。