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()
组件将要卸载时调用,用于清除事件监听和定时器。