0


React(三) ——新、旧生命周期

🧁个人主页:个人主页

✌支持我 :点赞👍收藏🌼关注🧡

文章目录

⛳React生命周期

在这里插入图片描述

🌋初始化阶段

由 ReactDOM.render()触发 —— 初次渲染

componentWillMount()

⚡1. 组件将要被挂载,第一次上树前render之前最后一次修改状态的机会
⚡2. 初始化数据的作用
⚡3. 清除计时器,取消订阅

注意:出现黄色警告,可以写成

UNSAFE_componentWillMount(){}//因为其旧版本componentWillMount优先级较低,可以会被打断,会再次执行,不够安全

render()

🚀1. 正在渲染
🚀2. 只能访问this.props和this.state,不允许修改状态和Dom输出

componentDidMount()

📢1. 组件挂载完毕,成功render并渲染完成真实Dom之后触发,可以修改Dom
📢2. 常用于: 数据请求、订阅函数调用、设置计时器、基于创建完的dom进行初始化 BetterSroll
📢3.语法:

componentDidMount()

👣运行中阶段

由组件内部 this.setState() 或 父组件重新render触发

componentWillReceiveProps()

📌1. 父组件修改属性触发,最先获得父组件传来的属性,可以利用属性进行ajax或者逻辑处理
📌2. 只能在子组件中使用
📌3. 可以将属性转化成孩子自己的状态

state={
    title:'zhangsan'}.......................componentWillReceiveProps(nextProps){//this.props.text 老的属性//nextProps 新的属性this.setState({title:nextProps.text//可以将属性转化成孩子自己的状态})}

shouldComponentUpdate()

📢1. 是否要进行修改数据
📢2. shouComponentUpdate(nextProps,nextState)两个参数,第一个为新的属性,第二个为新的状态
📢3. 返回true或false来控制组件是否更新

shouldComponentUpdate(nextProps,nextState){//this.state 老的状态,nextState 新的状态/*if( 老的状态!== 新的状态){
        return true;
    }*///如果state中既有对象又有数组需要比较较麻烦时,可以将其转为字符串在进行比较if(JSON.stringify(this.state))!==JSON.stringify(nextState){returntrue}returnfalse;}

注意:给返回true时加上适合的条件,会提高性能

componentWillUpdate()

  1. 将要改变数据
  2. UNSAFE_componentWillUpdate(){}

componentDidUpdate()

首次渲染不会执行该方法,会在更新后被立即调用

💧1. 改变数据
💧2. 更新多次
💧3. 修改dom节点等一系列操作

componentDidUpdate(prevProps,prevState){//可以通过参数获得老的属性和状态
    console.log(prevProps,prevState.list);//更新后,获取dom节点,进行一系列操作if(prevState.list.length ==0){newBetterScroll("#warpper")} console.log('componentDidUpdate',document.getElementById('myname').innerHTML);}

在这里插入图片描述

注意:这个时候已经二次render完了,不存在nextProps,this.props中已经是最新的数据了,所以想得到最新的属性值,直接通过this.props拿

🏓销毁阶段

componentWillUnmount()

💦在删除组件之前进行清理操作,比如计时器和事件监听器

🏫新生命周期的替代

在这里插入图片描述

getDerivedStateFromProps

🎀1. 静态方法,第一次的初始化组件以及后续的更新过程中(包括自身状态以及父传子),返回一个对象作为新的state,返回null则说明不需要在这里更新state
🎀2. 适用于 第一次 和 后续更新 都 重复的逻辑

  state={myname:'zhangsan'}//componentWillMount 初始化staticgetDerivedStateFromProps(nextProps,nextState){return{//此处此myname将覆盖其他地方的mynamemyname:nextState.myname
    }}render(){return(<div><button onClick={()=>{this.setState({myname:'lisi'})}}>click</button>{this.state.myname}</div>)}}

注意:此方法中的属性 会覆盖 其他地方相同的属性(即使再次进行render执行或this.setState修改)

getSnapshotBeforeUpdate

取代了componentWillUpdate,触发时间为update发生的时候,在render之后dom渲染之前 返回一个值,作为componentDidUpdate的第三个参数

getSnapshotBeforeUpdate(prevProps,prevState){//组件能在发生更新之前从 DOM 中捕获一些信息(例如,滚动位置)return"aaa"//snapshotValue}..............................componentDidUpdate(preProps,preState,snapshotValue){
    console.log(snapshotValue)//"aaa"}

🚚react中性能优化方案

shouldComponentUpdate

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

PureComponent

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

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

注意:如果 state或props 永远都会变(比如倒计时),但PureComponent并不会比较快,因为shallowEqual也需要花时间

🎉🎉🎉如有错误,请评论指出,thankyou~🎀🎀🎀
✨✨✨创作不易,如对您有帮助,欢迎给博主点赞收藏,给予鼓励哟💛


本文转载自: https://blog.csdn.net/m0_63338686/article/details/129219923
版权归原作者 旺仔好吃糖 所有, 如有侵权,请联系我们删除。

“React(三) ——新、旧生命周期”的评论:

还没有评论