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: ""}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。