首页 文章

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

提问于
浏览 次
11

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

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

  • 他们显着减慢了我的应用程序 . PropType验证是分析结果中的最高罪犯，因为：

  • 我有一个相当深的组件层次结构，在多个级别上使用PropType验证（是的，我确实有适当的shouldComponentUpdate等）

  • 我正在使用Redux，这意味着所有更新都从层次结构顶部或附近开始

  • 我有鼠标拖动交互，每秒可以争取30次更新

  • 我仍然希望看到所有其他React警告和错误，这些警告和错误也会在 生产环境 模式下被禁用 .

  • 无论如何，Flowtype显然可以在很多情况下静态验证PropTypes .

如果没有别的，我可以为 babel-plugin-react-transform 创建一个转换器来剥离所有组件' propTypes （或者只是组件的那些我想知道是否有更简单的方法来做，因为React可以很容易地提供编译时标志来禁用PropType验证 .

UPDATE ：那个babel插件已经存在（https://www.npmjs.com/package/babel-plugin-react-remove-prop-types）

performance validation reactjs react-proptypes

1 回答

  • 5

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

    目前，PropType验证由 __DEV__ 全局变量启用 . 如果它's changed to false, you will lose other React warnings and errors that, as you said, you can' t .

    此代码here in 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 .

    UPDATE - 10/May/2017
    Andy发现有Babel Plugin that removes Prop Types .
    我没有测试过 . 请务必阅读插件的Is it safe?部分，看它是否适合您 .

    回复于

相关问题