react的生命周期

 

生命周期简介

class App extends React.Component {
  //构造函数
  constructor(props) {
    super(props)
    this.state = {
      data: 'old'
    }
    console.log('constructor')
  }

  //组件将要加载
  componentWillMount() {
    console.log('componentWillMount')
  }

  // 组件加载完成
  componentDidMount() {
    console.log('componentDidMount')
  }

  // 将要接受父组件传来的props
  componentWillReceiveProps() {
    console.log('componentWillReceiveProps');
  }

  // 子组件属否应该更新
  shouldComponentUpdate() {
    console.log('shouldComponentUpdate')
    return true
  }

  // 组件将要更新
  componentWillUpdate() {
    console.log('componentWillUpdate')
  }

  // 组件更新完成
  componentDidUpdate() {
    console.log('componentDidUpdate')
  }
  
  // 组件即将销毁
  componentWillUnmount() {
    console.log('componentWillUnmount')
  }


  //处理点击事件
  handleClick() {
    this.setState({
      data: 'new'
    })
  }

  //渲染
  render() {
    console.log('render')
    return (
      <div>
        App
        <button onClick={() => this.handleClick()}>更新组件</button>
      </div>
    )
  }
}

生命周期执行顺序

生命周期节点：

• Mounting:挂载阶段
• Updating:运行时阶段
• Unmounting:卸载阶段
• Error Handling:错误阶段

初始化过程：

• constructor
• componentWillMount
• render
• componentDidMount

更新组件（改变state）:

• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

更新组件（改变props）:

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

组件卸载:

• componentWillUnmount