图览组件的生命周期

# react 旧生命周期

# i: 初始化阶段

  • componentWillMount:render之前最后一次修改状态的机会
  • render:只能访问this. props和this. state,不允许修改状态和DOM
  • componentDidMount:成功render并渲染完成真实DOM之后出发,可以修改状态(常用来数据请求,监听滚动事件,吸顶效果... )

# ii: 更新阶段(如果状态不变,较浪费性能)

  • componentWillUpdate:状态更新之前(this. setState)之前调用
  • componentDidUpdate:状态更新之后调用

WillUpdate/DidUpdate 缺点

如果state不变,或已经更新完毕,也会再走一遍,更新阶段的生命周期,极大地浪费了性能

尽量减少在顶层(最外层)的组件中调用setState更新,(如果状态不发生变化)会导致所有组件都会走一遍更新阶段的生命周期

# iii: 运行阶段

  • shouldComponentUpdate:返回false,会组织render调用,以及更新阶段的生命周期执行(必问)

    性能调优生命周期

  • componentWillReceiveProps(props):通过props. mystate 拿到最新的状态,而this. props. mystate只能拿到老状态。而且第一次不执行,只有父组件修改属性,传递到子组件时才触发

shouldComponentUpdate用法

  1. (nextProps,nextState),新的属性,新的状态是shouldComponentUpdate的两个参数(它们均是对象形式)

  2. this.state.myname 和 nextState.myname做比较(旧状态 和 新状态 比较)一致,则返回false,不需要让运行中的生命周期重复执行



  1. 也叫 性能调优生命周期

componentWillReceiveProps用法

在更新阶段做异步请求时候用的,而且第一次不执行,只有父组件修改属性,传递到子组件时才触发

# 例1 (shouldComponentUpdate用法详解)

import React, { Component } from 'react'; 

class App extends Component {
  state = {

    myname:"old-name"

  }
  componentWillUpdate(){

    console.log("componentWillUpdate")

  }
  componentDidUpdate(){

    console.log("componentDidUpdate")

  }
  // 当达到某一状态改变,而后续不再改变时,应该阻止运行中生命周期再次触发
  shouldComponentUpdate(nextProps, nextState){

    // 第一次的结果是 old-name 老状态
    console.log("shouldComponentUpdate",this.state.myname) 
    if (this.state.myname === nextState.myname) {
      return false  // componentWillUpdate...等禁止执行
    }
    return true

  }
  
  render() {

    console.log("render")
    return (
      <div>
        hello--{this.state.myname}
        <button onClick={()=>{
          this.setState({
              myname:"new-name"
          })
        }}>click</button>
      </div>
    );

  }
}

export default App; 

# 例2 (componentWillReceiveProps(props))用法例子

componentWillReceiveProps(props) {
  // 新状态 根据最新的状态 做异步请求
  console. log('componentWillReceiveProps', props. mystate)
  console. log('componentWillReceiveProps', this. props. mystate)
}

# react 新生命周期

react在旧生命周期中,会有很多问题,比如:

(1)componentWillMount,在ssr中 这个方法将会被多次调用,所以会重复触发多遍,同时在这里如果绑定事件,将无法解绑,导致内存泄漏 , 变得不够安全高效逐步废弃。
(2)componentWillReceiveProps,外部组件多次频繁更新传入多次不同的 props,会 导致不必要的异步请求。
(3)componetWillupdate, 可能会做一些处理,在更新前记录 DOM 状态, 与componentDidUpdate相隔时间如果过长, 会导致状态不太信。

# 解决:

(1)getDerivedStateFromProps第一次的初始化组件,后续的更新过程中(包括 自身状态更新以及父传子) 都会执行,返回一个对象作为新的state,返回null,则说明不需要在这里更新state。(将父组件传过来的属性变成状态)(传过来的属性频繁发生改变之后,会合并到最终的状态)

static getDerivedStateFromProps(newProps) {
  return {

    childname: "xiaoming"

  }
}
// 状态name 改成了小明

static getDerivedStateFromProps(newprops){
  return {

    name: newprops.myname + '--lsh'  // 频繁更新传入多次不同的 props,会和合并成一个状态

  }

(2)getSnapshotBeforeUpdate取代了 componetWillUpdate,触发时间为 update发生的时候,在render之后 dom渲染之前返回一个值,作为 componentDidUpdate的第三个参数。
(常用来页面快照工作,用于迅速记下某个时刻的记录)

getSnapshotBeforeUpdate() {
  return {

    newState: {
      x: 2,
      y: 5 
    }

  }
}

componentDidUpdate(prevProps, prevState, data) {
  console. log(data) // => newState: {x: 2, y: 5}

  跟老状态对比,看是否需要进行地图更新操作, echarts图表更新
  // this. state. loaction === prevState. loction 
}