Skip to content

Instantly share code, notes, and snippets.

@ShahidYousuf

ShahidYousuf/react-lifecycle-parent-child.jsx

Forked from fay-jai/react-lifecycle-parent-child.jsx
Created January 14, 2017 05:47
Show Gist options
  • Save ShahidYousuf/a3e0dcde4cc0d5d1d8ba8934b7210c8e to your computer and use it in GitHub Desktop.
Save ShahidYousuf/a3e0dcde4cc0d5d1d8ba8934b7210c8e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @fay-jai fay-jai revised this gist Feb 10, 2016. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions react-lifecycle-parent-child.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -38,6 +38,10 @@ const ChildComponent = React.createClass({
    getDefaultProps: function() {
    console.log("ChildComponent - getDefaultProps");
    },
    getInitialState: function() {
    console.log("ChildComponent - getInitialState");
    return { dummy: "" };
    },
    componentWillMount: function() {
    console.log("ChildComponent - componentWillMount");
    },
  2. @fay-jai fay-jai created this gist Feb 10, 2016.
    83 changes: 83 additions & 0 deletions react-lifecycle-parent-child.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    import React from "react";
    import { render } from "react-dom";

    const ParentComponent = React.createClass({
    getDefaultProps: function() {
    console.log("ParentComponent - getDefaultProps");
    },
    getInitialState: function() {
    console.log("ParentComponent - getInitialState");
    return { text: "" };
    },
    componentWillMount: function() {
    console.log("ParentComponent - componentWillMount");
    },
    render: function() {
    console.log("ParentComponent - render");
    return (
    <div className="container">
    <input
    value={this.state.text}
    onChange={this.onInputChange} />
    <ChildComponent text={this.state.text} />
    </div>
    );
    },
    componentDidMount: function() {
    console.log("ParentComponent - componentDidMount");
    },
    componentWillUnmount: function() {
    console.log("ParentComponent - componentWillUnmount");
    },
    onInputChange: function(e) {
    this.setState({ text: e.target.value });
    }
    });

    const ChildComponent = React.createClass({
    getDefaultProps: function() {
    console.log("ChildComponent - getDefaultProps");
    },
    componentWillMount: function() {
    console.log("ChildComponent - componentWillMount");
    },
    componentDidMount: function() {
    console.log("ChildComponent - componentDidMount");
    },
    componentWillUnmount: function() {
    console.log("ChildComponent - componentWillUnmount");
    },
    componentWillReceiveProps: function(nextProps) {
    console.log("ChildComponent - componentWillReceiveProps");
    console.log(nextProps);
    },
    shouldComponentUpdate: function(nextProps, nextState) {
    console.log("ChildComponent - shouldComponentUpdate");
    return true;
    },
    componentWillUpdate: function(nextProps, nextState) {
    console.log("ChildComponent - componentWillUpdate");
    console.log("nextProps:");
    console.log(nextProps);
    console.log("nextState:");
    console.log(nextState);
    },
    render: function() {
    console.log("ChildComponent - render");
    return (
    <div>Props: {this.props.text}</div>
    );
    },
    componentDidUpdate: function(previousProps, previousState) {
    console.log("ChildComponent - componentDidUpdate");
    console.log("previousProps:");
    console.log(previousProps);
    console.log("previousState:");
    console.log(previousState);
    }
    });

    render(
    <ParentComponent />,
    document.getElementById("root")
    );