【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节点，更新newBScroll('#wrapper')
    console.log(prevProps,prevState);//进行判断，只调用一次if(prevState.list.length ===0){newBScroll("#wrapper")}}

shouldComponentUpdate

的使用：

shouldComponentUpdate(nextProps,nextState){// return true; //应该更新// return false;  //组织更新// 老状态：this.state；新状态：nextState；新属性：nextProps// 通过状态的字符串是否一样来判断if(JSON.stringify(this.state)!==JSON.stringify(nextState)){returntrue;}else{returnfalse;}}

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

// 适用于初始化和后续更新staticgetDerivedStateFromProps(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');return100}

性能优化的方案

**

shouldComponentUpdate

**

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

**

PureComponent

**

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

import React,{ PureComponent }from'react'exportdefaultclassAppextendsPureComponent{}

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

重要的勾子

• render:初始化渲染或更新渲染调用
• componentDidMount：开启监听，发送axios请求
• componentWillUnmount：做一些收尾工作，如清理定时器和事件监听器

即将废弃的勾子

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

注：使用时会出现警告，需要加上

UNSAFE_

前缀才能使用，以后可能被弃用

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