react生命周期

react 15.0的生命周期
在这里插入图片描述
页面第一次加载
componentWillMount 挂载前
render 渲染Dom
componentDidMount 挂载后

页面更新
子组件更新
componentWillReceiveProps 子组件有父组件传过来的值,就会触发这个生命周期
shouldcomponentUpdata 是否更新页面,返回boolean,return false,就不会执行后面的生命周期
componentWillUpdata 更新前
render 渲染Dom
componentDidUpdata 更新后

父组件更新
shouldcomponentUpdata 是否更新页面,返回boolean,return false,就不会执行后面的生命周期
componentWillUpdata 更新前
render 渲染Dom
componentDidUpdata 更新后

页面销毁
componentWillUnmont 页面销毁

=============================================================================
在这里插入图片描述
react 16.4和react 15.0 相比删除了几个生命周期,添加了两个生命周期
1. render之前除了shouldComponentUpdata的,其他的生命周期都被删除了,都被getDerivedStateFromProps替代
2. getSnapshotBeforeUpdate 被调用于render之后,可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息(例如滚动位置)。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。

react为什么会修改生命周期
React Fiber这个大改变Facebook已经折腾两年多了,终于确认,React Fiber会搭上React下一个大版本v16的顺风车发布。
浏览器中的渲染引擎是单线程的,几乎所有的操作都在这个单线程中执行——解析渲染DOM Tree和CSS Tree,解析执行JavaScript——除了网络操作。这个线程就是浏览器的主线程。单线程意味着,一段时间只做一件事,所以浏览器在同一时间内,其主线程只能关注于一个任务。
比如:react要渲染一万条数据,需要6秒,渲染期间,用户在input框输入,这时候react已经占据了浏览器渲染,只能等他6秒后渲染完后,才会渲染用户输入的值,这对于用户体验非常不好。

在这里插入图片描述

React Fiber 就是把一万条数据分成拆分成一个个小任务,每次做完一个小任务之后,放弃一下自己的执行将主线程空闲出来,看看有没有其他的任务。如果有的话,就暂停本次任务,执行其他的任务,如果没有的话,就继续下一个任务。

在这里插入图片描述
就是因为他会执行多次主线程,就会多次调用挂载前的生命周期,所以会去掉过多的生命周期。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值