有没有办法在开发模式下禁用或加速React PropType验证？

Question

据我所知,禁用React PropType验证的唯一方法是uglify与process.env.NODE_ENV定义的React 'production'.

但是,我想在没有运行时PropType验证的情况下使用开发模式,原因如下:

• 他们显着减慢了我的应用程序.PropType验证是分析结果中的最高罪犯,因为:
  • 我有一个相当深的组件层次结构,在多个级别上使用PropType验证(是的,我确实有适当的shouldComponentUpdate等)
  • 我正在使用Redux,这意味着所有更新都从层次结构顶部或附近开始
  • 我有鼠标拖动交互,每秒可以争取30次更新
• 我仍然希望看到所有其他React警告和错误,这些警告和错误也会在生产模式下被禁用.
• 无论如何,Flowtype显然可以在很多情况下静态验证PropTypes.

如果不出意外,我可以创造一个变压器babel-plugin-react-transform是除掉所有组件propTypes(或者也许只有这些部件的我以某种方式注释),但我不知道是否有一种简单的方法来做到这一点,因为阵营可能容易提供编译时标志以禁用PropType验证.

更新:该babel插件已经存在(https://www.npmjs.com/package/babel-plugin-react-remove-prop-types)

Answer 1

简短回答:没有简单的标志只能禁用PropType验证

目前,PropType验证由__DEV__全局变量启用.如果它被更改为false,您将丢失其他React警告和错误,正如您所说,您不能.

ReactDOMFactories中的此代码显示了如何选择ReactElementValidator和ReactElement工厂来定义元素创建的工作方式:

function createDOMFactory(tag) {
  if (__DEV__) {
    return ReactElementValidator.createFactory(tag);
  }
  return ReactElement.createFactory(tag);
}

在ReactElementValidator.createElement中,您可以看到它调用ReactElement.createElement,然后调用validatePropTypes:

var ReactElementValidator = {

  createElement: function(type, props, children) {

    /* some code here */

    var element = ReactElement.createElement.apply(this, arguments);

    /* some code here */

    // here would be a good place for the flag that you need
    validatePropTypes(element);

    return element;
  }

我不确定这些信息如何对您有所帮助,但至少表明没有简单的方法可以在您想知道的情况下通过标志禁用PropType.

更新 - 10/May/2017
Andy发现有一个删除Prop类型的Babel插件.
我没有测试过.一定要阅读它是否安全？该插件的一部分,看它是否适合你.