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

Question

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

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

Answer 1

I assume you want to do this without changing any of the existing code. I played around with this and found a way to do so if you're using something like webpack or browserify to build your application and you're using React v0.13 .

It's important to note that this uses private methods, reaching into React's internals, and could break at any time. That said, it might be useful for your debugging purposes.

[Update to the Update]

If you use Babel, I highly recommend checking out the React Transform plugin . This will let you do all sorts of nifty stuff to React, including wrapping (or overwriting!) render methods.

[Update]

I've found a way to do this without hacking into React.addons.Perf ; the key was the module name of ReactCompositeComponent and the function name of _renderValidatedComponent —just wrap that method to inject your custom behavior.

Note you'll need to place this code before you 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);
}

You'll then end up with a very similar result as the old answer, below. I've added better logging of props and state, and filter out any of the built in ReactDOM* components.

---

[Old Answer]

I've overridden the default measure function of the performance tools, which React calls through its codebase to measure performance when using React.addons.Perf . By doing so, we're able to get the information that the default measurement strategy would normally get. Note that this breaks the normal behavior React.addons.Perf .

Add this code to the entry-point of your application (after you require 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);
  }
});

And you'll get the following in your console logs:

ReactElement s with no names (that is, components that make up regular HTML elements like span and div ) are not shown. One notable set of exceptions is button and other input elements, as React provides composite components that wrap those to help manage state. They show up as ReactDOMButton and ReactDOMInput .

Answer 2

React supports Mixins for such cross-cutting concerns:

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

However, it's not permitted to define a render method in a mixin. The restrictions on each of the React lifecycle methods are in the following source:

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

If you could assign this behaviour to one of the other steps in the component lifecycle, mixins might work for you.