Last active
October 9, 2015 13:28
-
-
Save piecyk/734ccc4c7ba04778053d to your computer and use it in GitHub Desktop.
Log render function of ReactJS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // replace the _renderValidatedComponent in react-0.14.0.js with this function | |
| _renderValidatedComponent: function () { | |
| // orginal function | |
| function renderValidatedComponent() { | |
| var renderedComponent; | |
| ReactCurrentOwner.current = this; | |
| try { | |
| renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); | |
| } finally { | |
| ReactCurrentOwner.current = null; | |
| } | |
| !( | |
| // TODO: An `isValidNode` function would probably be more appropriate | |
| renderedComponent === null || renderedComponent === false || ReactElement.isValidElement(renderedComponent)) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.render(): A valid ReactComponent must be returned. You may have ' + 'returned undefined, an array or some other invalid object.', this.getName() || 'ReactCompositeComponent') : invariant(false) : undefined; | |
| return renderedComponent; | |
| } | |
| //NOTE!!! custom code | |
| if (process.env.NODE_ENV !== 'production') { | |
| var whatToLog = (localStorage.getItem('log-components') || '').split(','); | |
| var name = this.getName(); | |
| if (name && !name.match(/^ReactDOM/) && whatToLog[0] === 'All' ? true : whatToLog.indexOf(name) > -1) { | |
| console.debug("render: ", name, {props: this._instance.props, state: this._instance.state}); | |
| } | |
| return renderValidatedComponent.apply(this, arguments); | |
| } else { | |
| return renderValidatedComponent.apply(this, arguments); | |
| } | |
| }, |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
in local storage, just put names of components you want to log
log-components: Component1,Component2if you decide to log all app render functions, just add on first place
Allthen it will log every renderlog-components: All,Component1,Component2source form:
http://stackoverflow.com/questions/30445568/react-js-modify-render-method-for-all-components