13

据我所知，禁用 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 验证。

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

4

1 回答 1

7

简短回答：没有简单的标志可以仅禁用 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。

更新 - 2017 年 5 月 10 日
Andy发现有一个Babel 插件可以删除 Prop Types。
我没有测试它。请务必阅读安全吗？插件的部分，看看它是否适合你。

于 2016-01-16T20:23:00.033 回答