04-react生命周期

41 阅读1分钟

事物都有从创建到销毁的过程,叫做生命周期

react组件也有自己的生命周期,了解组件的生命周期就可以帮我们在合适的地方完成自己想要做的事情

生命周期是一个抽象概念,整个过程分为很多阶段:

  • 装载阶段Mount:组件第一次在DOM树中被渲染的过程。
  • 更新过程Update:组件状态发生改变,重新渲染的过程。
  • 卸载过程Unmount:组件从DOM树被移除的过程

生命周期函数也叫钩子函数,react为了告诉我们组件在经历什么状态,处于什么阶段,提供了很多组件内部各个状态的函数,我们通过对组件内部函数进行回调,就可以实现react组件不同状态我们的需求。

生命周期函数:

  • componentDidMount:组件已经挂载在DOM上,回调
  • componentDidUpdate:组件发生更新,回调
  • componentWillUnmount:组件即将被移除,回调

我们在回调中实现自己需求

react生命周期,一般说的是类组件,函数组件在hooks前,不保存状态以及没有生命周期

生命周期官方文档地址:

zh-hans.legacy.reactjs.org/docs/react-…

image.png

image.png

image.png

image.png

总结生命周期:

  • 只要组件被引用一次,就相当于类组件创建了一个实例。
  • 组件实例生命周期分为:mount,update,unmount阶段。每个阶段的钩子函数,主要是用到的如下:
  1. mount阶段:construtor->render->componentDidMount
  2. update阶段:当setState,props变化时候,触发update阶段。经历sholdComponentUpdate[return true]->render->getSnapshotBeforUpdate[记录变更之前转台]->componentDidUpdate[有preState,preProps,snapshot参数]
  3. unmount阶段:componentDidUnmount