React的生命周期钩子函数

React的常用的声明周期钩子函数

数据初始化阶段

组件初始化会执行的四个钩子函数

1.constructor( props, context)

//初始化动作
//用于初始化数据

2.static getDerivedStateFromProps(props,state)  

//静态方法 不能使用this 不实例化也可以通过 类名.方法名 来调用
能实时更新父组件传递过来的参数

3.render()

这个方法是必须的,当他被调用是,他讲计算 this.props和this.state

• 并返回以下一种类型
  • React 元素,通过 jsx 创建,既可以是 dom元素,也可以是用户自定义的组件
  • 字符串或数字,他们将会以文本节点形式渲染到dom中
  • null,什么也不许安然
  • 布尔值,也是什么都不许安然

4.componentDidMount

组件呗装配后立即调用,初始化时的DOM节点应该进行到这里
通常在这里进行 ajax 请求
如果要初始化第三方的dom库，也是在这里进行初始化
只有到这里才能获取到真是的dom节点

更新阶段的常用的四个钩子函数

1.shouldComponentUpdate(nextProps,nextState){
	return boole
}

判断组件是否需要更新
返回值是一个布尔值
true 就进行渲染
flase 就会渲染
默认为 true
如果 shouldComponentUpdate 返回 false
compentWillUpdate，render 和 componentDidUpdate 将不会被调用
通过条件判断 减少不必要的渲染，增加性能

2.render

3.getSnapshotBeforeUpdate(prevProps,prevState)

在更新之前获取快照
参数为前一个 props 和 前一个 state
必须返回一个值
更新之前的 DOM 状态
必须 和 componentDidUpdate一起用

在 react render后的输出被渲染到 DOM之前被调用
它能使你的组件能够在它们呗潜在更改之前捕获当前值（例如滚动位置）
这个生命周期返回的任何值都将作为 componentDidUpdate() 的第三个参数

4.componentDidUpdate(prevProps,prevState,snapshot)

组件更新完成之后会立即执行，此时可以获取dom节点。

卸载时会执行的一个钩子函数

componentWillUnmout()

组件将要卸载时调用，用于清除事件监听和定时器。

疫情期间，在逆战班，学习永不止步！

来源：CSDN

作者：超厉害的沫璃

链接：https://blog.csdn.net/M0li0809/article/details/104482154