【React】React入门--生命周期

🎀个人主页：努力学习前端知识的小羊
感谢你们的支持：收藏🎄 点赞🍬 加关注🪐

React生命周期

react生命周期分为三个阶段—初始化阶段、运行中阶段、销毁阶段

react旧生命周期流程图如下：

初始化阶段

• componentWillMount: 组件将要挂载，初始化数据的作用，只调用一次 ， render之前最后一次修改状态的机会（不安全）
• render:挂载组件，只能访问this.props和this.state，不允许修改状态和DOM输出
• componentDidMount: 组件挂载完成，成功render并渲染完成真实DOM之后触发，可以修改DOM
  可以用于数据请求axios，订阅函数调用，给予创建的dom进行初始化，开启定时器

UNSAFE_componentWillMount(){
        console.log("第一次将要挂载",this.state.name,document.getElementById('myname').innerHTML);

// 第一次上树前的最后一次修改状态机会
        this.setState({
            name:'Kerwin'
        })

        //初始化数据的作用
    }
    componentDidMount(){
        console.log('第一次已经挂载',document.getElementById('myname').innerHTML);
        // 数据请求axios
        // 订阅函数调用
        // setInternal
        //基于创建的dom进行 初始化...BetterScoll
    }

运行中阶段

• componentWillUpdate: 更新前的数据状态（不安全），不能修改属性和状态
• componentDidUpdate：可以修改Dom，每次更新都会执行一次 含有两个属性：prevProps：旧的属性，prevState：旧的状态
• render：组件更新 shouldComponentUpdate： 决定是否进行更新：return true：应该更新，return false：阻止更新 含有两个参数：nextProps：新属性，nextState：新状态
• componentWillReceiveProps： 最先获得父组件传来的属性，父组件一修改便会触发（非首次）

componentWillUpdate和componentDidUpdate使用

//   不安全
  UNSAFE_componentWillUpdate(){
    console.log("componentWillUpdate",document.getElementById('myname').innerHTML);
  }

// 每次更新都会执行一次
  componentDidUpdate(prevProps,prevState){   //prevProps:老的属性
    console.log("componentDidUpdate",document.getElementById('myname').innerHTML);

    // 更新后，想要获取dom节点，更新
    new BScroll('#wrapper')
    console.log(prevProps,prevState);

    //进行判断，只调用一次
    if(prevState.list.length === 0){
        new BScroll("#wrapper")
    }
  }

shouldComponentUpdate的使用：

shouldComponentUpdate(nextProps,nextState){
    // return true; //应该更新
    // return false;  //组织更新
    // 老状态：this.state；新状态：nextState；新属性：nextProps

    // 通过状态的字符串是否一样来判断
    if(JSON.stringify(this.state) !== JSON.stringify(nextState)){
        return true;
    } else{
        return false;
    }
  }
	

componentWillReceiveProps的使用：

UNSAFE_componentWillReceiveProps(nextProps){
        console.log("componentWillReceiveProps",
        this.props.text,nextProps);

        // 最先获得父组件传来的属性，可以利用属性进行Ajax或逻辑处理
        // 将属性转化为孩子自己的状态
        this.setState({
            title:nextProps.text
        })
    }

销毁阶段

componentWillUnmount: 再删除组件之前进行清理作用，如清除挂载的定时器和事件监听器

componentDidMount(){
        window.onresize=()=>{
            console.log("resize");
        }

        this.timer = setInterval(()=>{
            console.log(1);
        },1000)
    }
//进行销毁
    componentWillUnmount(){
        console.log("componentWillUNMount");
        //取消监听事件
        window.onresize=null
		//清除定时器
        clearInterval(this.timer)
    }

老生命周期的问题

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

新生命周期代替

新生命周期流程图：

static getDerivedStateFromProps ：从props得到一个派生状态，第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子)，返回一个对象作为新的state，返回null则说明不需要在这里更新state

// 适用于初始化和后续更新
    static getDerivedStateFromProps(nextProps,nextState){
        console.log('getDerivedStateFromProps',nextState);
        return {
            myname:nextState.myname
        }
    }

getSnapshotBeforeUpdate：在组件更新之前获取快照，即记录更新前的数据和状态，返回的值作为componentDidUpdate的第三个参数

componentDidUpdate = (prevProps, prevState,value) => {
  console.log("componentDidUpdate",value);  //value:100
}

getSnapshotBeforeUpdate(){
    console.log('getSnapshotBeforeUpdate');
    return 100
}

性能优化的方案

shouldComponentUpdate

控制组件自身或者子组件是否需要更新，尤其在子组件非常多的情况下，需要进行优化

PureComponent

PureComponent会帮你比较新props跟旧的props，新的state和老的state(值相等,或者对象含有相同的属性、且属性值相等），决定shouldcomponentUpdate返回true或者false，从而决定要不要呼叫render function。

import React, { PureComponent } from 'react'

export default class App extends PureComponent {

}

注意: 如果你的state或 props『永远都会变』，那 PureComponent并不会比较快，因为shallowEqual 也需要花时间。

重要的勾子

• render:初始化渲染或更新渲染调用

• componentDidMount：开启监听，发送axios请求

• componentWillUnmount：做一些收尾工作，如清理定时器和事件监听器

即将废弃的勾子

• componentWillMount

• componentWillReceiveProps

• componentWillUpdate

注：使用时会出现警告，需要加上UNSAFE_前缀才能使用，以后可能被弃用

希望能够对学习react的小伙伴们有所帮助，期待你们的支持哦✨✨✨