react-lifecycle-parent-child.jsx（自github）

来源：互联网发布：如何查mac地址值那个大编辑：程序博客网时间：2024/05/29 18:14

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: ""}

0 0