Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple React Lifecycle methods test
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
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
You can’t perform that action at this time.