react基础学习 二——生命周期

时间:2021-02-02 03:49:48

生命周期mount:

mounting装载创建

update更新

unmounting卸载

错误捕获

注意点:生命周期函数的 作用,什么之后用

    只有类式组件有生命周期,函数式组件没有生命周期

mounting装载创建:——

  Construct——只执行一次

    作用:初始化实例

  static getDerivedStateFromProps(prop,state)  

    有返回值,当返回值为null时,state不变;有值时,将返回对象中的属性和state的属性对应,并将state做相应修改;
    作用:在render之前,可以改变state的机会,不改变,返回null

static getDerivedStateFromProps(props,state){
return null;
}

  Render
    作用:生产新的虚拟DOM

  componentDidUpdate(p,s,shot)——只执行一次
    作用:虚拟DOM变成真实的DOM,可以在页面看到视图,组件创建完成

    用处:可以获取真实的DOM节点

componentDidMount(){
console.log(document.getElementById('root'))
}

update更新:——

  static getDerivedStateFromProps(prop,state)
    用处:父组件更新,(已挂载)子组件页更新,在子组件中更新state*****

    父组件修改,因为state只在constructor的时候赋值,所以组件更新的时候,子组件的state是不修改的,可以通过这个静态函数修改state

static getDerivedStateFromProps(props,state){
return {
number: props.number
}
}

  shouldComponentUpdate(nextProps,nextState)
    作用:用于优化性能。如果是false就不需要走render,不用去重新计算

    用处:返回bool,true——组件正常更新流程;false——后面的生命周期函数不会执行,界面不更新

  Render
    作用:

  getSnapshotBeforeUpdate(prevProp,prevState)

    必须有返回值,返回值不能为空;这个方法必须和componentDidUpdate一起使用。
    作用:获取更新之前的快照,浏览器DOM结构还没有更新

    用处:动画,浏览器大小,布局变化,元素宽高,位置。和原来的比较。之前滚动条的位置

  componentDidUpdate(p,s,shot)
    作用:更新完成之后,可以获取DOM,获取宽高

unmounting卸载:——

  componentWillUnmount()——只执行一次
    作用:

错误捕获:

  compinentDidCatch(error,info)
    作用:子组件生命周期出错,回退

流程图:

react基础学习 二——生命周期