react生命周期

Posted 2023-05-07

参考技术A React生命周期

一、react组件的生命周期

1、生命周期指的是组件从初始化开始到结束的过程  或者是生命周期是描述react组件从开始到结束的过程

2、每个react组件都具有生命周期

3、react都对组件通过生命周期给予的钩子函数进行管理

二、钩子函数

指的是系统某些状态和参数发生改变的时候，系统立马去通知对应处理的函数    叫做钩子函数；一方面又变动。另一方面立马去处理

三、react组件经历总体阶段

1、mounted阶段  加载阶段  或者说初始化阶段  这个阶段组件由jsx转换成真实dom

2、update阶段 组件运行中阶段 或者更新阶段  当组件修改自身状态，或者父组件修改子组件属性的时候发生的阶段

3、umount阶段  组件卸载阶段  这个一般是组件被浏览器回收的阶段

四、生命周期整体流程：

1、实例化

getDefaultProps 取得默认属性

getInitialState 初始化状态

componentWillMount 即将进入dom

render 描画dom

componentDidMount 已经进入dom

2、具体的声明函数周期---运行中阶段  数据更新过程

运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况

1、组件将要接受新值componentWillReceiveProps（已加载组件收到新的参数时调用）

2、组件是否更新 shouldComponentUpdate  （影响整个项目的性能，决定视图的更新）

3、组件即将更新 componentWillUpdate

4、必不可少的render

5、组件更新完毕时运行的函数 componentDidUpdate

3、销毁时 componentWillUnmount

卸载组件

ReactDOM.unmountComponentAtNode(‘节点’)

react生命周期剖析

一、类生命周期
1.在react中，生命周期只有类组件才有，函数组件没有
在现在开发过程中，以函数组件为主要开发
1.生命周期 -- 挂载
constructor -- 是用于初始化数据 ,不能在这里写setState()调用方法
getDerivedSatteFrc --派生state props使用，
render -- react渲染
componentDidMount --等同于Vue的mounted挂载
2.生命周期 -- 更新

3.生命周期 -- 销毁