React.js: modifiziere render() -Methode für alle Komponenten?

Question

Aus Debugginggründen möchte ich die folgende Zeile in die allgemeine render() -Methode einfügen, damit sie in allen Komponenten ausgeführt wird.

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

Answer 1

Ich nehme an, Sie möchten dies ohne Änderung des vorhandenen Codes tun. Ich spielte damit herum und fand einen Weg, dies zu tun wenn Sie etwas wie webpack oder browserify verwenden, um Ihre Anwendung zu erstellen und Sie verwenden React v0.13.

Es ist wichtig zu beachten, dass dies private Methoden verwendet, die in die Interna von React eingreifen und jederzeit unterbrochen werden können. Das heißt, es könnte für Ihre Debugging-Zwecke nützlich sein.

[Update zum Update]

Wenn Sie Babel verwenden, ich sehr empfehlen the React Transform plugin Check-out. Dadurch können Sie alle möglichen Arten von Reactions erledigen, einschließlich des Einschließens (oder Überschreibens!) render Methoden.

[Update]

Ich habe einen Weg gefunden, diese in React.addons.Perf ohne Hacking zu tun; Der Schlüssel war der Modulname ReactCompositeComponent und der Funktionsname _renderValidatedComponent -just wrap diese Methode, um Ihr benutzerdefiniertes Verhalten zu injizieren.

Hinweis Sie diesen Code platzieren müssen vor Sie 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); 
} 

Sie werden dann mit einem sehr ähnlichen Ergebnis als die alte Antwort unten enden. Ich habe eine bessere Protokollierung von Requisiten und Zustand hinzugefügt und filtere alle eingebauten ReactDOM* Komponenten aus.

---

[Alt Antwort]

ich die Standard-measure Funktion der Performance-Tools außer Kraft gesetzt haben, die Anrufe durch seine Codebasis Reagieren Leistung zu messen, wenn React.addons.Perf verwenden. Auf diese Weise können wir die Informationen erhalten, die die Standardmessstrategie normalerweise erhalten würde. Beachten Sie, dass dies das normale Verhalten React.addons.Perf bricht.

Fügen Sie diesen Code auf den Einstiegspunkt Ihrer Anwendung (nachdem Sie Reagieren erfordern):

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); 
    } 
}); 

Und Sie werden die folgenden in der Konsole anmeldet erhalten:

ReactElement s ohne Namen (dh Komponenten, die normale HTML-Elemente wie span und div bilden) werden nicht angezeigt. Eine bemerkenswerte Reihe von Ausnahmen ist button und andere input Elemente, da React Composite-Komponenten bietet, die diese umhüllen, um den Status zu verwalten. Sie erscheinen als ReactDOMButton und ReactDOMInput.

Answer 2

React unterstützt Mixins für solchen Querschnitt betrifft:

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

jedoch ist es nicht ein render Verfahren in einem mixin zu definieren erlaubt. Die Beschränkungen für jeden der Lifecycle-Methoden reagieren, sind in der folgenden Quelle:

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

Wenn Sie dieses Verhalten zu einem der anderen Schritte in der Komponentenlebenszyklus zuweisen konnte, Mixins könnte für Sie arbeiten.