React的生命周期钩子函数
2020-07-15 06:18
281 查看
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()
组件将要卸载时调用,用于清除事件监听和定时器。
疫情期间,在逆战班,学习永不止步!
相关文章推荐
- react生命周期钩子函数
- react入门系列之生命周期钩子函数
- react系列(6)组件生命周期钩子函数
- react组件生命周期钩子函数
- Vue提高篇-生命周期及其钩子函数
- 教女朋友学习 vue的生命周期钩子函数
- react 利用路由钩子函数进行设置网页标题以及登录验证
- vue生命周期钩子函数
- React子父组件生命周期函数执行顺序
- Vue中组件生命周期中涉及的钩子函数
- 【React】 12课 react的生命周期函数执行顺序详解
- Vue实例的生命周期钩子函数
- vue的生命周期及钩子函数
- React组件详细介绍及其生命周期函数
- react生命周期函数
- 图解React生命周期函数
- React生命周期函数的使用
- JSX组件计数器看React生命周期函数
- 【Vue2.0】vue生命周期中的钩子函数
- react---- 生命周期函数