网站导航
> 文章列表 > 【React】React入门--生命周期

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

网友: 文章列表 2024-03-21 16:24:40

【React】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的小伙伴们有所帮助，期待你们的支持哦✨✨✨

网络标签：

相关问题