react不同阶段要实施的生命周期函数

lxf2023-05-09 00:32:02

上去放一张图,大伙儿先感受体会React不同阶段要实施的生命周期函数。

react不同阶段要实施的生命周期函数

接下来会踏入主题啦

react新项目主要包括三个阶段

  1. 初始化环节
  2. 升级环节
  3. 卸载掉环节

下面我能各自从三个阶段向分享给大家我所学到的react生命期的相关介绍(若有不正确,愿大家更多的纠正,指责即使啦,年青人听不进指责 嘿嘿 开个小玩笑话

1.初始化环节

constructor()\color{blue}constructor()

  • 这一函数公式主要运用于复位内部结构情况,有时候也会根据自己的需求在这儿关联函数公式或是方式的this。

  • 这里就是唯一一个能够对state开展立即改动的地区

    我们都知道一般情况下不能通过给state立即取值来修改状态,这样就不会推动界面的升级,但因为constructor环节还什么事都没做,因此能够对state直接使用改动。

getDerivedStateFromProps(nextProps,prevState)\color{blue} getDerivedStateFromProps(nextProps, prevState)

悄咪咪的称它为个静态方法 static

  • 作用就是从应用外界特性复位内部结构情况,方式中返回情况都能够merge到现阶段的情况上。

  • 当state必须从props复位情况下应用。

  • 最好不要应用(传言为何函数名长,是因为React管理者不建议大家应用 嘿嘿~)。

    但我猜想最主要的原因可能就是因为 假如说state必须从props获得,一般都可以根据props测算获得,一般通过它再维护保养一个新的情况,这个时候就需要维护保养二者的一致性,这就有点不便,提升很多工作量,也会导致bug。因此并不是建议使用,但是有时候的确还特别好用 接下来我们稍候举例说明啦~

  • 每一次3D渲染都是会启用。主要是用于取代componentWillReceiveProps的出现。

  • 关键应用领域便是在 大家工程中有关表格初始值问题时要用到。只能在第一次获得表格初始值时有效,以后再也不会再用,往后的表格内容就来自客户的键入了。

render()\color{blue}render()

  • render咱们就非常熟悉但是啦,是我们完成dom描绘的地区。
  • 大家可以在内进行一些必须的数据整理解决。

componentDidMount()\color{blue}componentDidMount()

  • DOM加载完成而且UI3D渲染结束后启用。
  • 初始化环节只启用一次,是对我们来说真的是非常(这儿三个十分表明注重~)有价值的一个函数。
  • 我们一般在它们内部结构去进行要求政府资源读取数据数据的实际操作。

2.升级环节

shouldComponentUpdate(nextProps,nextState)\color{blue}shouldComponentUpdate(nextProps,nextState)

这一函数公式存在的价值是:React设计但凡是React部件就出现了当父部件再次render时,子组件还会重新执行render,即便这一子组件没有转变。子组件只需启用setState便会重新执行render,即便setState参数值是一个空对象。这样的事情也会比较消耗特性。并且这个函数公式发生啦。

分这两种情况

  • 函数中return true 当父部件render时,子组件也render
  • 函数中return false 当父部件render时,子组件不render

react默认设置该函数公式自始至终回到true。(可是他给予这一函数公式一定是要把这一函数公式显现出来,让可以根据需要状况来调节是否要让子组件依据父元件的数据下载来再次render,可执行性非常大~,可是应该考虑的很全方位,要不然不建议用,会导致隐藏bug,造成本应再次3D渲染时,部件并没有3D渲染)

典型性的使用场景便是 开展性能调优

其实也可以根据使用部件传承React.PureComponent来解决问题。

PureComponent 早已给我们完成了简单较为,来判定以前的props和现阶段props,现阶段的state和之前的state 是否一致(浅较为的一个过程)。

getSnapshotBeforeUpdate()\color{blue}getSnapshotBeforeUpdate()

  • 在每一次render以前启用,这时state早已升级。
  • 简易了解函数名便是 获得现阶段升级前Dom的一个快照更新。
  • 关键应用领域便是 获得升级前dom情况。
  • 其传参将会成为componentDidUpdate得第三个主要参数。

componentDidUpdate(preProps,preState,preNodeValue?)\color{blue}componentDidUpdate(preProps, preState, preNodeValue?)

  • 每一次网页页面UI产生升级时都会启用。
  • 关键应用领域便是props产生升级去获得网页页面数据信息情况下。

3.卸载掉环节

这一阶段只能实行一个生命期勾子那便是

componentWillUnmount\color{blue}componentWillUnmount

  • 部件卸载掉情况下能被启用。
  • 人们常常则在内进行一些撤销药物副作用实际操作(比如 清除计时器)。
  • 关键应用领域便是开展网络资源释放。

结语!

在今年的立刻毕业啦,可以说是成功学生就业,小有成就挫败,却也发展很多。期待未来好好加油!!!!