react 生命周期函数浅析

react 生命周期函数浅析

图片示意：

代码描述：

   // 生命周期函数
  // 在组件即将被挂载到页面的时刻自动执行
  componentWillMount() {
    console.log('componentWillMount')
  }


render(){
	console.log('render')
}

 // 组件第一次被挂载到页面之后，自动被执行
  componentDidMount() {
    console.log('componentDidMount')
  }


// 组件更新之前会执行
  // 返回值是布尔值，true 是要更新值，false 是不更新值
  shouldComponentUpdate(nextProps, nextState, nextContext) {
    console.log('shouldComponentUpdate');
    return true;
  }


  // 组件更新之前会被执行，但是他在 shouldComponentUpdate 之后被执行
  // 如果 shouldComponentUpdate 返回true，他才执行
  // 如果 shouldComponentUpdate 返回false，他不执行
  componentWillUpdate(nextProps, nextState, nextContext) {
    console.log('componentWillUpdate')
  }


// 组件更新完成之后，他会被执行
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate')
  }


  // 条件：
  // 一个组件要从父组件接收props参数
  // 只要父组件的 render 函数被重新执行了，子组件的这个生命周期函数就会被执行
  // 即 如果这个组件第一次存在于父组件中，不会执行
  // 如果这个组件之前已经存在于父组件中，才会执行
  componentWillReceiveProps(nextProps, nextContext) {
    console.log('child componentWillReceiveProps')
  }


  // 当这个组件即将被从页面中剔除的时候，会被执行
  componentWillUnmount() {
    console.log(' child componentWillUnmount');
  }