浅入 React 的生命周期函数

上来先放一张图,大家先体会体会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。所以并不推荐使用,但有时候确实还挺好用的 这里我们稍后举例啦~

  • 每次渲染都会调用。主要是用来替代componentWillReceiveProps的存在。

  • 主要应用场景就是在 我们项目中关于表单默认值问题的时候会用到。只在第一次获取表单默认值时有用,以后不会再使用,以后的表单的内容就来源于用户的输入了。

render()\color{blue}render()

  • render我们就再熟悉不过啦,它是我们实现dom描述的地方。
  • 我们可以在内部进行一些必要的数据加工处理。

componentDidMount()\color{blue}componentDidMount()

  • DOM加载完成并且UI渲染完成后调用。
  • 挂载阶段只调用一次,是对于我们来说非常非常非常(这里三个非常表示强调~)有用的一个函数。
  • 我们通常在它内部来进行请求外部资源获取数据信息的操作。

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,导致本该重新渲染时,组件没有渲染)

典型的应用场景就是 进行性能优化

其实可以通过使用组件继承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

  • 组件卸载时候会被调用。
  • 我们常常在其内部进行一些取消副作用的操作(例如 移除定时器)。
  • 主要应用场景就是进行资源的释放。

结束语!

今年马上毕业啦,也算是顺利就业,小有挫折,但也成长许多。希望未来继续加油!!!!

原文链接:https://juejin.cn/post/7216917459008864316 作者:前端于同学

(0)
上一篇 2023年4月2日 上午10:57
下一篇 2023年4月2日 上午11:08

相关推荐

发表评论

登录后才能评论