您的位置:首页 > Web前端 > React

React之生命周期函数

2020-01-13 07:21 204 查看

react生命周期函数图解

各个生命周期详解

1,comonentWillMount() 挂载前

在组件挂载前调用,且圈布局只调用一次,在这里可以发起异步请求,setState
这个函数在react.16当中废除,设置state在constructor当中完成

2,render()渲染组件

是react必须定义的生命周期函数,用来渲染dom

3,componentDidMount() 组件挂载完成后

全局只调用一次,可使用refs来获取真实的dom元素,可以发起异步请求,以及setState(1,dom节点初始化,2,网络请求,3,添加订阅)

4,componentWillReceiveProps(nextprops) Props即将变化之前

react.16当中废除,由static getDerivedStateFromProps()这个函数代替
props发生变化时,以及父组件重新渲染时都会触发该生命周期函数,在该狗子函数内可以通过参数nextprops获取变化后的props参数(this.props可以访问之前的props,可以setState)

5,shouldComponentUpdate(nextProps,nextstate) 是否重新渲染

组件挂载后,每次调用setState后都会调用这个函数,判断是否重新渲染,默认返回true(返回false则不渲染)

6,componentWillUpdate(nextprops,nextState)组件重新渲染之前

react.16当中废除,由getSnapshotBeforeUpdate()代替
上一个生命周期返回true/调用forceupdate之后,这个才会被调用,不能再次setState,否则会触发循环

7,componentDidUpdate(prevprops,prevstate)完成组件渲染

首次渲染:componentDidMount
其他次渲染:componentDidUpdate

8,componentWillUpdate()组件即将被卸载

组件被卸载的时候调用,一般在componentDidMount里面注册的事件需要在这里删除

新增生命周期函数

1,static getDerivedStateFromProps(newxtProps,prevState)

代替componentWillReceiveProps
触发时间:在组件构建之后(虚拟dom之后,实际dom挂载之前),以及每一次获取新的props之后
注意:以下几个场景有可能触发这个钩子函数
(1)父组件的state发生变化(此时子组件的props有可能变化,也有可能不变),导致父组件中的当前组件被重新渲染
(2)子组件的属性props被修改时
(3)自身组件state变化时,也会触发
(4)初始化render()之前会触发
其他:
[1]nextProps:传入后的props数据(最新的)
[2]prevstate:相对于合并state前的一个状态
[3]return{x:nextProps.a}//将props合并到state当中
++++return null 如果不需要返回其他东西,则必须写return null
[4]static 描述的是静态函数,没有this指向,无权操作实例,所以更安全,而且消耗的性能比较低
[5] 它将原本的componentWillReceiveProps功能进行了划分----更新state和操作/调用props,很大程度避免了职责不清而导致过多的渲染,从而影响该性能

2,getSnapShotBeforeUpdate(prevProps,prevState)在render()之后执行

(1)此生命周期的返回值将作为第三个参数传递给componentDidUpdate
(2)这个生命周期函数不经常需要,但可以用于在恢复期间手动保存滚动位置

getSnapshotBeforeUpdate () {//很关键的,我们获取当前rootNode的scrollHeight,传到componentDidUpdate 的参数perScrollHeight
return this.rootNode.scrollHeight;
}
componentDidUpdate (perProps, perState, perScrollHeight) {
const curScrollTop= this.rootNode.scrollTop;
if (curScrollTop < 5) return ;
this.rootNode.scrollTop = curScrollTop + (this.rootNode.scrollHeight  - perScrollHeight);
//加上增加的div高度,就相当于不动
}
  • 点赞
  • 收藏
  • 分享
  • 文章举报
RyleeLouth 发布了40 篇原创文章 · 获赞 3 · 访问量 3157 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: