学习React一段时间后对React生命周期(旧)的理解

        React生命周期(旧)在我看来可以大体分为两个部分,其一组件挂载或者卸载的过程,其二数据更新的过程。而在生命周期中一直穿插着一个很重要的问题:setState! setState不仅仅的问题不仅仅是他怎么起作用的 在什么时候起作用,还有就是他的同异步问题。

        在组件的挂载和过程中共执行了一下几个钩子。

1. getDefaultProps

2. getInitalState

3.componentWillMount

4.render

5. componentDidMount 

        1与2是在初始化props与state componentWillMount 和 componentDidMount 则是在渲染的前后时刻。在前面组件挂载的阶段可执行setState的阶段有componentWillMount 与componentDidMount,但是在 componentWillMount中使用setState在我看来是没必要的也是不规范的,如果在这里调用setState,会有两种可能的情况其一:继续按照顺序跑下去,执行render 和 componentDidMount,在执行完毕后在向下进行。其二是直接进入setState的执行顺序,走shouldComponentUpdate与之后的流程,但是又因为setState是异步的,也得等待主线程执行完毕后也就是在componentDidMount执行完毕之后进行所以这两者的虽然调用的时机不同但是单从结果上来说是一样的,所以应该采取更加规范的在componentDidMount中或后调用setState。

        在数据更新过程中,会有如下的生命周期钩子执行顺序 

1. componentWillReceiveProps(nextProps)

2. shouldComponentUpdate(nextProps, nextState)

3. componentWillUpdate(nextProps, nextState)

4. render()

5. componentDidUpdate

        当代码中数据发生了更新调用了setState会进行一个判断,如果是通过props驱动的数据更新则会从componentWillReceiveProps(nextProps)开始走,接着按下面的顺序执行,如果是由state驱动的数据更新则会直接从shouldComponentUpdate开始走,到这里首先会做一个判断如果为true才会继续向下走,执行页面的再次渲染等,在componentDidUpdate钩子中也可以调用setState,调用后是从shouldComponentUpdate开始向下执行。

                             

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小法宝学前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值