React.js：修改所有组件的render（）方法？

Question

出于调试原因，我想在一般的render（）方法中添加以下行，因此它将在所有组件中执行。

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

Answer 1

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

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

[更新到更新]

如果您使用Babel，我高度建议您查看the React Transform plugin。这将让你为React做各种漂亮的东西，包括包装（或覆盖！）render方法。

<强> [更新]

我已经找到了一种方法，可以在不侵入React.addons.Perf的情况下做到这一点;密钥是ReactCompositeComponent的模块名称和_renderValidatedComponent的函数名称 - 只需包装该方法以注入自定义行为。

请注意，您需要将此代码放在之前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.addons.Perf时，React通过其代码库调用该函数来衡量性能。通过这样做，我们能够获得默认测量策略通常会获得的信息。请注意，这会破坏正常行为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);
  }
});

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

没有名称的

ReactElement（即组成常规HTML元素的组件，如span和div）未显示。一组值得注意的例外是button和其他input元素，因为React提供了复合组件来包装它们以帮助管理状态。它们显示为ReactDOMButton和ReactDOMInput。

Answer 2

React支持Mixins解决这些交叉问题：

https://facebook.github.io/react/docs/reusable-components.html#mixins

但是，不允许在mixin中定义render方法。每个React生命周期方法的限制在以下来源中：

https://github.com/facebook/react/blob/0c6bee049efb63585fb88c995de788cefc18b789/src/core/ReactCompositeComponent.js#L189

如果您可以将此行为分配给组件生命周期中的其他步骤之一，则mixins可能适合您。