React.js:修改所有组件的render()方法？

Question

出于调试原因,我想在一般的render()方法中添加以下行,因此它将在所有组件中执行.

console.log('render' + this.constructor.displayName, this.state);

Answer 1

我假设您希望在不更改任何现有代码的情况下执行此操作.我玩这个并找到了一种方法,如果你使用webpack或browserify之类的东西来构建你的应用程序并且你正在使用React v0.13.

重要的是要注意,这使用私有方法,进入React的内部,并且可以随时中断.也就是说,它可能对您的调试有用.

[更新到更新]

如果您使用Babel,我强烈建议您查看React Transform插件.这将让你为React做各种漂亮的东西,包括包装(或覆盖!)render方法.

[更新]

我已经找到了一种方法来做到这一点,而不是黑客入侵React.addons.Perf; 关键是模块名称ReactCompositeComponent和函数名称_renderValidatedComponent-just包装注入自定义行为的方法.

注意你需要把这个代码之前你require("react").

var ReactCompositeComponent = require("react/lib/ReactCompositeComponent");
var oldRenderValidatedComponent = ReactCompositeComponent.Mixin._renderValidatedComponent;
ReactCompositeComponent.Mixin._renderValidatedComponent = function() {
  var name = this.getName();
  if (name && !name.match(/^ReactDOM/)) {
    console.log("render: ", this.getName(), {props: this._instance.props, state: this._instance.state});
  }
  return oldRenderValidatedComponent.apply(this, arguments);
}

然后,您将得到与下面的旧答案非常相似的结果.我添加了更好的道具和状态记录,并过滤掉任何内置ReactDOM*组件.

[旧答案]

我已经覆盖了measure性能工具的默认函数,React通过其代码库调用它来测量使用时的性能React.addons.Perf.通过这样做,我们能够获得默认测量策略通常会获得的信息.请注意,这会破坏正常行为React.addons.Perf.

将此代码添加到应用程序的入口点(在您需要React之后):

var ReactInjection = require("react/lib/ReactInjection");
var ReactDefaultPerf = require("react/lib/ReactDefaultPerf");

ReactDefaultPerf.start();
ReactInjection.Perf.injectMeasure(function measure(moduleName, fnName, fn) {
  return function() {
    if (moduleName === 'ReactCompositeComponent' && fnName === '_renderValidatedComponent') {
      var name = this.getName();
      if (name) {
        console.log("render: ", name);
      }
    }

    return fn.apply(this, arguments);
  }
});

您将在控制台日志中获得以下内容:

ReactElements没有名称(即,组成常规HTML元素的组件,如span和div)未显示.一组值得注意的异常是button和其他input元素一样,因为React提供了复合组件来包装它们以帮助管理状态.他们出现了ReactDOMButton和ReactDOMInput.