javascript - react .js : modify render() method for all components?

Question

出于调试原因，我想将以下行添加到通用 render() 方法中，以便它在所有组件中执行。

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

Answer 1

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

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

[更新更新]

如果您使用 Babel，我强烈建议查看 the React Transform plugin .这将使您可以为 React 做各种漂亮的事情，包括包装(或覆盖!)render 方法。

[更新]

我找到了一种无需侵入 React.addons.Perf 即可执行此操作的方法；关键是 ReactCompositeComponent 的模块名称和 _renderValidatedComponent 的函数名称——只需包装该方法即可注入(inject)您的自定义行为。

请注意，您需要将此代码放在之前您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);
}

然后您将得到与下面的旧答案非常相似的结果。我添加了更好的 Prop 和状态日志记录，并过滤掉任何内置的 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)不会显示。一组值得注意的异常(exception)是 button 和其他 input 元素，因为 React 提供了包装这些元素的复合组件以帮助管理状态。它们显示为 ReactDOMButton 和 ReactDOMInput。