组件的生命周期（旧）

React v16.0前的生命周期

react生命周期(旧).png

旧的生命周期

react的生命周期可以简单分为四条线
1.初始化的一条线
constructor👉componentWillMount👉render👉componentDidMount👉componentWillUnmount

class Life extends React.Component {
  //组件挂载之前的钩子
  componentWillMount() {
    console.log('我是挂载之前--componentWillMount')
  }
   //组件挂载之后的钩子
  componentDidMount() {
    console.log('我是挂载之后--componentDidMount');
  }
  // 组件卸载之前
  componentWillUnmount() {
    console.log('我是卸载组件--componentWillUnmount')
  }
  render() {
    console.log('我是render')
    return <div>
      <button onClick={this.unmount}>卸载组件</button>
    </div>
  }
  unmount = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById("root"))
  }
}

未点击按钮之前

点击按钮之前
点击按钮之后
击按钮之后
2.更新状态的一条线
shouldComponentUpdate👉componentWillUpdate👉render👉componentDidUpdate👉componentWillUnmount

//这里省略了卸载组件生命周期
class Life extends React.Component {
  constructor(props) {
    console.log('第一次调用--constructor')
    super(props)
    this.state = {
      num: 0
    }
  }
  //组件挂载之前的钩子
  componentWillMount() {
    console.log('我是挂载之前--componentWillMount')
  }
   //组件挂载之后的钩子
  componentDidMount() {
    console.log('我是挂载之后--componentDidMount');
  }
  // 是否准许组件更新
  shouldComponentUpdate() {
    console.log('我是控制更新的阀门--shouldComponentUpdate')
    return true
  }
  // 组件更新之前
  componentWillUpdate() {
    console.log('我是组件更新之前--componentWillUpdate');
  }
  // 组件更新之后
  componentDidUpdate() {
    console.log('我是组件更新之后--componentDidUpdate');
  }
  render() {
    console.log('我是render')
    return <div>
      <p>num: {this.state.num}</p>
      <button onClick={this.add}>点击按钮+1</button>
    </div>
  }
  add = () => {
    let {num} = this.state
    this.setState({num: num+1})
  }
}

点击按钮之前

点击按钮之前
点击按钮之后
点击按钮之后

3.强制更新状态的一条线（不会经过更新阀门）
componentWillUpdate👉render👉componentDidUpdate👉componentWillUnmount

//这里省略了卸载组件生命周期
class Life extends React.Component {
  constructor(props) {
    console.log('第一次调用--constructor')
    super(props)
  }
  //组件挂载之前的钩子
  componentWillMount() {
    console.log('我是挂载之前--componentWillMount')
  }
   //组件挂载之后的钩子
  componentDidMount() {
    console.log('我是挂载之后--componentDidMount');
  }
  // 是否准许组件更新
  shouldComponentUpdate() {
    console.log('我是控制更新的阀门--shouldComponentUpdate')
    return true
  }
  // 组件更新之前
  componentWillUpdate() {
    console.log('我是组件更新之前--componentWillUpdate');
  }
  // 组件更新之后
  componentDidUpdate() {
    console.log('我是组件更新之后--componentDidUpdate');
  }
  render() {
    console.log('我是render')
    return <div>
      <button onClick={this.force}>强制更新</button>
    </div>
  }
  force = () => {
    this.forceUpdate()
  }
}

按钮点击之前

按钮点击之前
按钮点击之后
按钮点击之后

4.props更新（第一次渲染除外，一般是父组件setState更新，导致子组件props更新，会触发shouldComponentUpdate生命周期函数）
componentWillReceiveProps👉shouldComponentUpdate👉componentWillUpdate👉render👉componentDidUpdate👉componentWillUnmount

//父组件
class Parent extends React.Component {
  constructor(props) {
    console.log("第一次调用--constructor");
    super(props);
    this.state = {num: 0};
  }
 
  render() {
    return (
      <div>
        <button onClick={this.add}> num+1 </button> <Son num={this.state.num}></Son>
      </div>
    );
  }
  add = () => {
    this.setState({num: this.state.num + 1})
  }
}
//子组件
class Son extends React.Component {
     //组件挂载之前的钩子
  componentWillMount() {
    console.log("我是挂载之前--componentWillMount");
  }
  //组件挂载之后的钩子
  componentDidMount() {
    console.log("我是挂载之后--componentDidMount");
  }
  // 是否准许组件更新
  shouldComponentUpdate() {
    console.log("我是控制更新的阀门--shouldComponentUpdate");
    return true;
  }
  // 组件更新之前
  componentWillUpdate() {
    console.log("我是组件更新之前--componentWillUpdate");
  }
  // 组件更新之后
  componentDidUpdate() {
    console.log("我是组件更新之后--componentDidUpdate");
  }
  componentWillReceiveProps() {
    console.log("我是父组件传的props改变触发的钩子--componentWillReceiveProps");
  }
  render() {
    console.log("我是render");
    return <label> {this.props.num} </label>;
  }
}

按钮点击之前

按钮点击之前

按钮点击之后
!

按钮点击之后

附上两张后面几次更新的生命周期图
React v16.3 的生命周期图

16.3 的生命周期图
React v16.4+ 的生命周期图
16.4+ 的生命周期图