react-lifecycle-parent-child.jsx自github

react-lifecycle-parent-child.jsx

https://gist.github.com/benweizhu/a4b462758758f560a743

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");
  },getInitialState: function() {
    console.log("ChildComponent - getInitialState");
    return { dummy: "" };
  },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")
);

输出：

初次加载

ParentComponent - getDefaultProps
ChildComponent - getDefaultProps
ParentComponent - getInitialState
ParentComponent - componentWillMount
ParentComponent - render
ChildComponent - getInitialState
ChildComponent - componentWillMount
ChildComponent - render
ChildComponent - componentDidMount
ParentComponent - componentDidMount

当修改了输入时，数据从parent 通过props传递给child

ParentComponent - render ChildComponent - componentWillReceiveProps Object {text: "1"} ChildComponent - shouldComponentUpdate ChildComponent - componentWillUpdate nextProps: Object {text: "1"} nextState: Object {dummy: ""} ChildComponent - render ChildComponent - componentDidUpdate previousProps: Object {text: ""} previousState: Object {dummy: ""}