Created
June 24, 2015 05:50
-
-
Save sanjay1909/1c75ad838fc7d65faeb4 to your computer and use it in GitHub Desktop.
Code taken from https://gist.github.com/thmain/d0ed904879d5bfa876f0#file-myreactcomponent-js for reference
This file contains 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
| var reactComponent = React.createClass({ | |
| // The object returned by this method sets the initial value of this.state | |
| getInitialState: function () { | |
| return {}; | |
| }, | |
| // The object returned by this method sets the initial value of this.props | |
| // If a complex object is returned, it is shared among all component instances | |
| getDefaultProps: function () { | |
| return {}; | |
| }, | |
| // Returns the jsx markup for a component | |
| // Inspects this.state and this.props create the markup | |
| // Should never update this.state or this.props | |
| render: function () { | |
| return ( < div > < /div>); | |
| }, | |
| // An array of objects each of which can augment the lifecycle methods | |
| mixins: [], | |
| // Functions that can be invoked on the component without creating instances | |
| statics: { | |
| aStaticFunction: function () {} | |
| }, | |
| // -- Lifecycle Methods -- | |
| // Invoked once before first render | |
| componentWillMount: function () { | |
| // Calling setState here does not cause a re-render | |
| }, | |
| // Invoked once after the first render | |
| componentDidMount: function () { | |
| // You now have access to this.getDOMNode() | |
| }, | |
| // Invoked whenever there is a prop change | |
| // Called BEFORE render | |
| componentWillReceiveProps: function (nextProps) { | |
| // Not called for the initial render | |
| // Previous props can be accessed by this.props | |
| // Calling setState here does not trigger an an additional re-render | |
| }, | |
| // Determines if the render method should run in the subsequent step | |
| // Called BEFORE a render | |
| // Not called for the initial render | |
| shouldComponentUpdate: function (nextProps, nextState) { | |
| // If you want the render method to execute in the next step | |
| // return true, else return false | |
| return true; | |
| }, | |
| // Called IMMEDIATELY BEFORE a render | |
| componentWillUpdate: function (nextProps, nextState) { | |
| // You cannot use this.setState() in this method | |
| }, | |
| // Called IMMEDIATELY AFTER a render | |
| componentDidUpdate: function (prevProps, prevState) {}, | |
| // Called IMMEDIATELY before a component is unmounted | |
| componentWillUnmount: function () {} | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment