Created
August 22, 2016 09:44
-
-
Save eyesofkids/8550b123b5a06483f4954f1f499ffb85 to your computer and use it in GitHub Desktop.
Simple React Lifecycle methods test
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
import React from 'react' | |
var Child = React.createClass({ | |
getInitialState: function(){ | |
console.log('Child getInitialState'); | |
return { value: 'start'} | |
}, | |
getDefaultProps: function(){ | |
console.log('Child getDefaultProps'); | |
}, | |
componentWillMount: function(){ | |
console.log('Child componentWillMount'); | |
}, | |
componentDidMount: function(){ | |
console.log('Child componentDidMount'); | |
}, | |
componentWillReceiveProps: function(){ | |
console.log('Child componentWillReceiveProps'); | |
}, | |
shouldComponentUpdate: function(){ | |
console.log('Child shouldComponentUpdate----true'); | |
return true | |
// console.log('shouldComponentUpdate----false'); | |
// return false | |
}, | |
componentWillUpdate: function() { | |
console.log('Child componentWillUpdate'); | |
}, | |
componentDidUpdate: function() { | |
console.log('Child componentDidUpdate'); | |
}, | |
componentWillUnmount: function() { | |
console.log('Child componentWillUnmount'); | |
}, | |
render: function() { | |
console.log('Child~~~~~~~~render~~~~~~~~'); | |
return ( | |
<h2>{this.props.text}</h2> | |
); | |
} | |
}); | |
export default Child |
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
import React from 'react' | |
import ReactDOM from 'react-dom' | |
import Child from './Child' | |
var LifeCycle = React.createClass({ | |
getInitialState: function(){ | |
console.log('Parent getInitialState'); | |
return { value: 'start'} | |
}, | |
getDefaultProps: function(){ | |
console.log('Parent getDefaultProps'); | |
}, | |
componentWillMount: function(){ | |
console.log('Parent componentWillMount'); | |
}, | |
componentDidMount: function(){ | |
console.log('Parent componentDidMount'); | |
}, | |
componentWillReceiveProps: function(){ | |
console.log('Parent componentWillReceiveProps'); | |
}, | |
shouldComponentUpdate: function(){ | |
console.log('Parent shouldComponentUpdate----true'); | |
return true | |
// console.log('shouldComponentUpdate----false'); | |
// return false | |
}, | |
componentWillUpdate: function() { | |
console.log('Parent componentWillUpdate'); | |
}, | |
componentDidUpdate: function() { | |
console.log('Parent componentDidUpdate'); | |
}, | |
componentWillUnmount: function() { | |
console.log('componentWillUnmount'); | |
}, | |
handleClick: function(event){ | |
console.log('Parent~~~~~~~~setSdate~~~~~~~~'); | |
this.setState({value: event.target.value}, function(){ | |
console.log('Parent~~~~~~~~this.setState callback~~~~~~~~') | |
}) | |
}, | |
handleForceUpdate: function(event){ | |
console.log('Parent~~~~~~~~forceUpdate~~~~~~~~'); | |
this.forceUpdate(function(){ | |
console.log('Parent~~~~~~~~forceUpdate callback~~~~~~~~'); | |
}) | |
}, | |
handleUnmount: function(event){ | |
console.log('Parent~~~~~~~~Unmount~~~~~~~~'); | |
ReactDOM.unmountComponentAtNode(document.getElementById('root')); | |
}, | |
render: function() { | |
console.log('Parent~~~~~~~~render~~~~~~~~'); | |
return ( | |
<div> | |
<Child text={this.state.value} /> | |
<button value="update state!" onClick={this.handleClick}>setState</button> | |
<button value="forceUpdate state!" onClick={this.handleForceUpdate}>forceUpdate</button> | |
<button value="Unmount!" onClick={this.handleUnmount}>Unmount</button> | |
</div> | |
); | |
} | |
}); | |
ReactDOM.render(<LifeCycle />, document.getElementById('root')) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment