React生命周期实例

class Child extends React.Component { static defaultProps = { //1、设置子组件默认props,会作为constructor(props)参数的一部分属性，其余的部门属性是在其使用该组件的位置添加的 name: 'child', age: 10, } constructor(props) { // 注意 props === this.props super(props); this.state = { child: "child" }; console.log('2、child constructor'); // console.log('2、child props===', props); // console.log('2、child this.state===', this.state); // console.log('2、child this.props===', this.props); }

componentWillMount() {
  console.log('3、child componentWillMount');
  // console.log('3、child this.state===', this.state);
  // console.log('3、child this.props===', this.props);
}

componentDidMount() {
  console.log('5、child componentDidMount');
  // console.log('5、child this.state===', this.state);
  // console.log('5、child this.props===', this.props);
}

componentWillReceiveProps(nextProps) {
  // nextProps为父组件更新后传递过来的属性
  // this.props为父组件更新之前传递过来的属性
  console.log('6、child componentWillReceiveProps');
  // console.log('6、child nextProps ===', nextProps);
  // console.log('6、child this.state===', this.state);
  // console.log('6、child this.props ===', this.props);
}

shouldComponentUpdate(nextProps, nextState) {
  // nextProps为父组件更新后传递过来的属性
  // this.props为父组件更新之前传递过来的属性
  console.log('7、child shouldComponentUpdate');
  // console.log('7、child nextProps ===', nextProps);
  // console.log('7、child nextState ===', nextState);
  // console.log('7、child this.state===', this.state);
  // console.log('7、child this.props ===', this.props);
  if (nextProps.number < 5) return true;
  return false
}

componentWillUpdate(nextProps, nextState) {
  // nextProps为父组件更新后传递过来的属性
  // this.props为父组件更新之前传递过来的属性
  console.log('8、child componentWillUpdate');
  // console.log('8、child nextProps ===', nextProps);
  // console.log('8、child nextState ===', nextState);
  // console.log('8、child this.state===', this.state);
  // console.log('8、child this.props ===', this.props);
}

componentDidUpdate(prevProps, prevState) {
  // this.props为父组件更新后传递过来的属性
  // prevProps为父组件更新之前传递过来的属性
  console.log('9、child componentDidUpdate');
  // console.log('9、child prevProps ===', prevProps);
  // console.log('9、child prevState ===', prevState);
  // console.log('9、child this.state===', this.state);
  // console.log('9、child this.props ===', this.props);
}

componentWillUnmount() {
  console.log('10、child componentWillUnmount');
  // console.log('10、child this.state===', this.state);
  // console.log('10、child this.props ===', this.props);
}

// static getDerivedStateFromProps() {
//   console.log('child getDerivedStateFromProps');
//   return null;
//   return { time: 1 }
// }
// getSnapshotBeforeUpdate() {
//   console.log('child getSnapshotBeforeUpdate');
// }
// componentDidCatch() {
//   console.log('child componentDidCatch');
// }

render() {
  console.log('4、child render');
  // console.log('4、child this.props ===', this.props);
  // console.log('4、child this.state ===', this.state);
  return (
    <p>{this.props.number}</p>
  )
}

}

class Parent extends React.Component { static defaultProps = { //1、设置父组件默认props,会作为constructor(props)参数的一部分属性,其余的部门属性是在其使用该组件的位置添加的 name: 'parent', age: 36 };

constructor(props) {
  // 注意 props === this.props
  super(props);
  this.state = { number: 0, parent: "parent" };
  console.log('2、parent constructor');
  // console.log('2、parent props===', props);
  // console.log('2、parent this.state===', this.state);
  // console.log('2、parent this.props===', this.props);
}

// static getDerivedStateFromProps() {
//   console.log('parent getDerivedStateFromProps');
//   return { time: 1 }
// }
// getSnapshotBeforeUpdate() {
//   console.log('parent getSnapshotBeforeUpdate');
// }
// componentDidCatch() {
//   console.log('parent componentDidCatch');
// }
componentWillMount() {
  console.log('3、parent componentWillMount');
  // console.log('3、parent this.state===', this.state);
  // console.log('3、parent this.props===', this.props);
}

componentDidMount() {
  console.log('5、parent componentDidMount');
  // console.log('5、parent this.state===', this.state);
  // console.log('5、parent this.props===', this.props);
}

componentWillReceiveProps(nextProps) {
  console.log('6、parent componentWillReceiveProps');
  // console.log('6、parent nextProps ===', nextProps);
  // console.log('6、parent this.state===', this.state);
  // console.log('6、parent this.props ===', this.props);
}

shouldComponentUpdate(nextProps, nextState) {
  // this.setState 会直接触发该生命周期函数
  // nextProps、nextState均为更新后的属性和状态
  // this.props和this.state均为更新之前的属性和状态
  console.log('7、parent shouldComponentUpdate');
  // console.log('7、parent nextProps ===', nextProps);
  // console.log('7、parent nextState ===', nextState);
  // console.log('7、parent this.state===', this.state);
  // console.log('7、parent this.props ===', this.props);
  if (nextState.number < 15) return true;
  return false
}

componentWillUpdate(nextProps, nextState) {
  // nextProps、nextState均为更新后的属性和状态
  // this.props和this.state均为更新之前的属性和状态
  console.log('8、parent componentWillUpdate');
  // console.log('8、parent nextProps ===', nextProps);
  // console.log('8、parent nextState ===', nextState);
  // console.log('8、parent this.state===', this.state);
  // console.log('8、parent this.props ===', this.props);
}

componentDidUpdate(prevProps, prevState) {
  // this.props为更新后的属性
  // prevProps为更新之前的属性
  console.log('9、parent componentDidUpdate');
  // console.log('9、parent prevProps ===', prevProps);
  // console.log('9、parent prevState ===', prevState);
  // console.log('9、parent this.state===', this.state);
  // console.log('9、parent this.props ===', this.props);
}
componentWillUnmount() {
  console.log('10、parent componentWillUnmount');
  // console.log('10、parent this.state===', this.state);
  // console.log('10、parent this.props ===', this.props);
}
handleClick = () => {
  this.setState({
    number: this.state.number + 1
  })
};

render() {
  // this.props和this.state均为更新后的属性和状态
  console.log('4、parent render');
  // console.log('4、parent this.props ===', this.props);
  // console.log('4、parent this.state ===', this.state);
  return (
    <div>
      <p>{this.state.number}</p>
      <button onClick={this.handleClick}>+</button>
      {this.state.number < 10 ? <Child number={this.state.number} /> : null}
    </div>
  )
}

}

export default Parent;

/* 装配期(简化版) 2、parent constructor 3、parent componentWillMount 4、parent render 2、child constructor 3、child componentWillMount 4、child render 5、child componentDidMount 5、parent componentDidMount

/ 更新期(简化版) this.setState触发 7、parent shouldComponentUpdate 8、parent componentWillUpdate 4、parent render 6、child componentWillReceiveProps 7、child shouldComponentUpdate 8、child componentWillUpdate 4、child render 9、child componentDidUpdate 9、parent componentDidUpdate /

/ 更新期(简化版) 按F5刷新页面触发 ???为什么重复了两遍过程 2、parent constructor 3、parent componentWillMount 4、parent render 2、child constructor 3、child componentWillMount 4、child render 5、child componentDidMount 5、parent componentDidMount 6、parent componentWillReceiveProps 7、parent shouldComponentUpdate 8、parent componentWillUpdate 4、parent render 6、child componentWillReceiveProps 7、child shouldComponentUpdate 8、child componentWillUpdate 4、child render 9、child componentDidUpdate 9、parent componentDidUpdate 6、parent componentWillReceiveProps 7、parent shouldComponentUpdate 8、parent componentWillUpdate 4、parent render 6、child componentWillReceiveProps 7、child shouldComponentUpdate 8、child componentWillUpdate 4、child render 9、child componentDidUpdate 9、parent componentDidUpdate /

/ 装配期 2、parent constructor 2、parent props=== {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 2、parent this.state=== {number: 0, parent: "parent"} 2、parent this.props=== {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 3、parent componentWillMount 3、parent this.state=== {number: 0, parent: "parent"} 3、parent this.props=== {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 4、parent render 4、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 4、parent this.state === {number: 0, parent: "parent"} 2、child constructor 2、child props=== {number: 0, name: "child", age: 10} 2、child this.state=== {child: "child"} 2、child this.props=== {number: 0, name: "child", age: 10} 3、child componentWillMount 3、child this.state=== {child: "child"} 3、child this.props=== {number: 0, name: "child", age: 10} 4、child render 4、child this.props === {number: 0, name: "child", age: 10} 4、child this.state === {child: "child"} 5、child componentDidMount 5、child this.state=== {child: "child"} 5、child this.props=== {number: 0, name: "child", age: 10} 5、parent componentDidMount 5、parent this.state=== {number: 0, parent: "parent"} 5、parent this.props=== {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} /

/ 更新期点击增加按钮，触发setState 7、parent shouldComponentUpdate 7、parent nextProps === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 7、parent nextState === {number: 1, parent: "parent"} 7、parent this.state=== {number: 0, parent: "parent"} 7、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 8、parent componentWillUpdate 8、parent nextProps === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 8、parent nextState === {number: 1, parent: "parent"} 8、parent this.state=== {number: 0, parent: "parent"} 8、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 4、parent render 4、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 4、parent this.state === {number: 1, parent: "parent"} 6、child componentWillReceiveProps 6、child nextProps === {number: 1, name: "child", age: 10} 6、child this.state=== {child: "child"} 6、child this.props === {number: 0, name: "child", age: 10} 7、child shouldComponentUpdate 7、child nextProps === {number: 1, name: "child", age: 10} 7、child nextState === {child: "child"} 7、child this.state=== {child: "child"} 7、child this.props === {number: 0, name: "child", age: 10} 8、child componentWillUpdate 8、child nextProps === {number: 1, name: "child", age: 10} 8、child nextState === {child: "child"} 8、child this.state=== {child: "child"} 8、child this.props === {number: 0, name: "child", age: 10} 4、child render 4、child this.props === {number: 1, name: "child", age: 10} 4、child this.state === {child: "child"} 9、child componentDidUpdate 9、child prevProps === {number: 0, name: "child", age: 10} 9、child prevState === {child: "child"} 9、child this.state=== {child: "child"} 9、child this.props === {number: 1, name: "child", age: 10} 9、parent componentDidUpdate 9、parent prevProps === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 9、parent prevState === {number: 0, parent: "parent"} 9、parent this.state=== {number: 1, parent: "parent"} 9、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} /

/ 更新期按F5刷新页面 2、parent constructor 2、parent props=== {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 2、parent this.state=== {number: 0, parent: "parent"} 2、parent this.props=== {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 3、parent componentWillMount 3、parent this.state=== {number: 0, parent: "parent"} 3、parent this.props=== {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 4、parent render 4、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 4、parent this.state === {number: 0, parent: "parent"} 2、child constructor 2、child props=== {number: 0, name: "child", age: 10} 2、child this.state=== {child: "child"} 2、child this.props=== {number: 0, name: "child", age: 10} 3、child componentWillMount 3、child this.state=== {child: "child"} 3、child this.props=== {number: 0, name: "child", age: 10} 4、child render 4、child this.props === {number: 0, name: "child", age: 10} 4、child this.state === {child: "child"} 5、child componentDidMount 5、child this.state=== {child: "child"} 5、child this.props=== {number: 0, name: "child", age: 10} 5、parent componentDidMount 5、parent this.state=== {number: 0, parent: "parent"} 5、parent this.props=== {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 6、parent componentWillReceiveProps 6、parent nextProps === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 6、parent this.state=== {number: 0, parent: "parent"} 6、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 7、parent shouldComponentUpdate 7、parent nextProps === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 7、parent nextState === {number: 0, parent: "parent"} 7、parent this.state=== {number: 0, parent: "parent"} 7、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 8、parent componentWillUpdate 8、parent nextProps === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 8、parent nextState === {number: 0, parent: "parent"} 8、parent this.state=== {number: 0, parent: "parent"} 8、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 4、parent render 4、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 4、parent this.state === {number: 0, parent: "parent"} 6、child componentWillReceiveProps 6、child nextProps === {number: 0, name: "child", age: 10} 6、child this.state=== {child: "child"} 6、child this.props === {number: 0, name: "child", age: 10} 7、child shouldComponentUpdate 7、child nextProps === {number: 0, name: "child", age: 10} 7、child nextState === {child: "child"} 7、child this.state=== {child: "child"} 7、child this.props === {number: 0, name: "child", age: 10} 8、child componentWillUpdate 8、child nextProps === {number: 0, name: "child", age: 10} 8、child nextState === {child: "child"} 8、child this.state=== {child: "child"} 8、child this.props === {number: 0, name: "child", age: 10} 4、child render 4、child this.props === {number: 0, name: "child", age: 10} 4、child this.state === {child: "child"} 9、child componentDidUpdate 9、child prevProps === {number: 0, name: "child", age: 10} 9、child prevState === {child: "child"} 9、child this.state=== {child: "child"} 9、child this.props === {number: 0, name: "child", age: 10} 9、parent componentDidUpdate 9、parent prevProps === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 9、parent prevState === {number: 0, parent: "parent"} 9、parent this.state=== {number: 0, parent: "parent"} 9、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 6、parent componentWillReceiveProps 6、parent nextProps === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 6、parent this.state=== {number: 0, parent: "parent"} 6、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 7、parent shouldComponentUpdate 7、parent nextProps === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 7、parent nextState === {number: 0, parent: "parent"} 7、parent this.state=== {number: 0, parent: "parent"} 7、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 8、parent componentWillUpdate 8、parent nextProps === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 8、parent nextState === {number: 0, parent: "parent"} 8、parent this.state=== {number: 0, parent: "parent"} 8、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 4、parent render 4、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 4、parent this.state === {number: 0, parent: "parent"} 6、child componentWillReceiveProps 6、child nextProps === {number: 0, name: "child", age: 10} 6、child this.state=== {child: "child"} 6、child this.props === {number: 0, name: "child", age: 10} 7、child shouldComponentUpdate 7、child nextProps === {number: 0, name: "child", age: 10} 7、child nextState === {child: "child"} 7、child this.state=== {child: "child"} 7、child this.props === {number: 0, name: "child", age: 10} 8、child componentWillUpdate 8、child nextProps === {number: 0, name: "child", age: 10} 8、child nextState === {child: "child"} 8、child this.state=== {child: "child"} 8、child this.props === {number: 0, name: "child", age: 10} 4、child render 4、child this.props === {number: 0, name: "child", age: 10} 4、child this.state === {child: "child"} 9、child componentDidUpdate 9、child prevProps === {number: 0, name: "child", age: 10} 9、child prevState === {child: "child"} 9、child this.state=== {child: "child"} 9、child this.props === {number: 0, name: "child", age: 10} 9、parent componentDidUpdate 9、parent prevProps === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} 9、parent prevState === {number: 0, parent: "parent"} 9、parent this.state=== {number: 0, parent: "parent"} 9、parent this.props === {match: {…}, location: {…}, history: {…}, staticContext: undefined, routerData: {…}, …} /

/ v16.3 装配期 2、parent constructor parent getDerivedStateFromProps 4、parent render 2、child constructor child getDerivedStateFromProps 4、child render 5、child componentDidMount 5、parent componentDidMount /

Joyeuxman / Joyeuxman.github.io

React生命周期实例 #10