Skip to content

Instantly share code, notes, and snippets.

@nhducit

nhducit/Child.js

Forked from eyesofkids/Child.js
Created August 27, 2016 03:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nhducit/d161f9ece8169c5a2f89d3f85c6f0e08 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nhducit/d161f9ece8169c5a2f89d3f85c6f0e08 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @eyesofkids eyesofkids created this gist Aug 22, 2016.
    55 changes: 55 additions & 0 deletions Child.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    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
    81 changes: 81 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,81 @@
    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'))