React的生命周期

97 阅读1分钟

React的生命周期从广义上分为三个阶段:挂载、渲染、卸载

生命周期的分类:

实例期:

constructor

getDerivedStateFromProps

render

componentDidMount

存在期:

getDerivedStateFromProps

shouldComponentUpdate

render

getSnapshotBeforeUpdate

componentDidUpdate

销毁期:

componentWillUnmount

react组件的生命周期过程相当于一个组件的生命历程

1.常用的生命周期

1.constructor(构造函数)

2.getDerivedStateFromProps:会在调用render方法之前,并且在初始挂载及后续更新时都会被调用,他返回一个对象来更新 state,如果返回null则不更新任何内容

3.shouldComponentUpdate:根据返回值,判断react组件的输出是否受当前state或props更改的影响,默认行为是state每次发生变化组件都会重新渲染

4.render:当被调用时,他会检查this.props和this.state的变化并返回虚拟dom

5.getSnapshotBeforeUpdate:在最近一次渲染输出提交到dom节点之前调用,它使得组件能在发生更改之前从DOM中捕获一些信息, 任何返回值将作为参数传递给componentDidUpdate();此用法可能出现在UI处理中。

6.componentDidMount():会在组件挂载后插入DOM树种立即调用,此处是实例化请求的好地方。

7.componentDidUpdate()会在更新后会被立即调用。首次渲染不会执行此方法。也可以在componentDidUpdate()中直接调用 setState()但注意:它必须被包裹在一个条件语句里,否则会导致死循环

8.componentWillUnmount():会在卸载及销毁之前直接调用,不能调用setState(),因为该组件将永远不会重新渲染,组件实例卸载后,将永远不会再挂载它。