我们都知道,在react项目当中state和prop是常用的属性,state是组件内部的状态,而prop是外部传递给组件的数据。对于对props的属性校验,一般会引入propTypes。
首先我先大致说一下propTypes检查。在react中既然props是组件的对外接口,那么就应该以某种方式让组件声明自己的接口规范。react通过propTypes来支持这个功能,来约束这个组件支持哪些prop,每个prop应该是什么样的格式。
在es6方法定义的组件类中,可以通过增加类的propTypes属性来定义prop规格,这不只是声明,而且是一种限制,在运行时和静态代码检查时,都可以根据propTypes判断外部世界是否正确的使用来了组件属性。
比如:
Counter.propTypes = {
caption: PropTypes.string.isRequired,
initValue: PropsTypes.number
};
其中要求caption必须是string类型,initValue必须是number类型。isRequired表示Counter组件必须指定caption,如果没有isRequired表示如果没有也没有关系。
可以验证一下,这里就不做了。
那么问题就来了,如果组件根本就没有定义propTypes会怎么样呢?并不会怎样,组件依然能正常工作,而且,即使定义了propTypes,在propTypes检查出错的情况下,组件依然能工作,也就是说,这只是个辅助开发的功能,并不会改变组件的行为。
在开发环境中,这一操作会帮助我们避免犯错,避免一些不必要的麻烦,但是当咱们开发完成之后,这一操作就显得没有必要了,在生产环境中,咱们其实并不需要这一步操作了,那么,咱们就应该在生产环境中将它去掉。
下面咱们介绍如何用一种自动方式将propTypes在生产环境中去掉。
关于这个问题,create-react-app有个issue也讨论过,可供参考:https://github.com/facebookin...
现在babel-plugin-transform-react-remove-prop-types就具有这种功能,通过npm安装,并且应该确保只在发布代码时使用它。
in:
const Baz = (props) => (
<div {...props} />
);
Baz.propTypes = {
className: PropTypes.string
};
out:
const Baz = (props) => (
<div {...props} />
);
可以选择CLI和Node API还有.babelrc配置,作者推荐使用.babelrc。(什么是.babelrc:这个文件是用来设置转码的规则和插件的,熟悉linux的同学一定知道,rc结尾的文件通常代表运行时自动加载的文件,配置等等,类似bashrc,zshrc。而且在babel6中,这个文件必不可少)
那么,在项目根目录中找到.babelrc文件,打开
如果不需要配置项的话这么写:
{
"env": {
"production": {
"plugins": ["transform-react-remove-prop-types"]
}
}
}
如果需要加一些配置项的话就这么写:
{
"env": {
"production": {
"plugins": [
["transform-react-remove-prop-types", {
"mode": "wrap",
"ignoreFilenames": ["node_modules"]
}]
]
}
}
}
有这么几个配置
1. mode:remove (default)/wrap/unsafe-wrap
2. removeIemport:true/false(default)
3. ignoreFilenames :[ ' node_modules ' ] 该过滤器生成正则表达式。任何包含数组字符串的文件名都将被忽略。默认情况下,匹配所有。
4. additionalLibraries :[ ' react-immutable-proptypes ' ]默认情况下只会删除引入的propTypes,比如在从' prop-types '导入PropTypes和从' react-immutable-proptypes '中导入ImmutablePropTypes时,要同时删除后者,那么就添加这项配置。
5. classNameMatchers :[ “ BaseComponent ” ] 使用此选项可以使此插件在扩展不同于React.Component的类的组件上运行,比如
class MyComponent extends BaseComponent {
...
}
好了,大家可以去试验下了。