javascript - React.js: modify render() method for all components? - Stack Overflow

admin管理员组

文章数量:1402146

For debugging reasons I'd like to add following line into general render() method, so it would be executed in all ponents.

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

For debugging reasons I'd like to add following line into general render() method, so it would be executed in all ponents.

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

• javascript
• reactjs

Share Improve this question Follow asked May 25, 2015 at 20:26 Ladislav MLadislav M 2,18744 gold badges3737 silver badges5252 bronze badges 1

• I'm not sure what you're asking. Could you add some more context to the question ? – Morten Jensen Commented May 25, 2015 at 21:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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 remend 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* ponents.

---

[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:

ReactElements with no names (that is, ponents 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 posite ponents that wrap those to help manage state. They show up as ReactDOMButton and ReactDOMInput.

React supports Mixins for such cross-cutting concerns:

https://facebook.github.io/react/docs/reusable-ponents.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./facebook/react/blob/0c6bee049efb63585fb88c995de788cefc18b789/src/core/ReactCompositeComponent.js#L189

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

本文标签： javascriptReactjs modify render() method for all componentsStack Overflow