第一次听说生命周期这个概念还是在一次面试中,面试官让我说说一个框架的生命周期,然后。。。然后。。。面试就结束了
好吧,回到正题,生命周期是什么,百度百科上面搜一下生命周期
、软件生命周期
很多描述。
我所理解的生命周期就是一个事物的核心流程,例如:
一个小球从松开手到落地必然经过:向下加速,和地面的碰撞,反弹,停止等步骤,通俗的讲,这几个步骤就是小球落地的生命周期
生命周期的重要性
然而,生命周期对于我们的软件开发有什么用呢,对于前端,如果你只是做做交互,实现一些简单的功能,生命周期的需求其实不是那么强烈。
但是如果你使用一些复杂的框架,复杂的组件,你就会发现生命周期不管是在开发,修改,优化,还是在调试中都是一个关键的因素。
了解程序生命周期,就是了解程序的核心步骤,了解程序运行的几个关键节点。
外面比较流行的框架,流行的ui库(工具类除外)都会有清晰的生命周期,在他们的生命周期中,会告诉你,每一步会做什么,程序执行的过程中会暴露什么方法或者接口给你调用,告诉你哪一步适合哪种操作。当你熟悉了框架的生命周期,你才能更好的驾驭他,知道什么时候该做什么正确的事情,如何用正确的姿势销毁才不会导致内存泄露等等。
曾经有人告诉我,看框架的第一件事,就是去看他的生命周期,我很赞同。
假如你需要去造轮子,我觉得第一件事,也是梳理清晰核心流程(生命周期),然后开始设计,最后码代码。
框架的生命周期
直接举例子:
reactjs的生命周期
目前也在学习阶段,下面内容从一些介绍文章中总结而来
初始化阶段
- getDefaultProps
- getInitialState
- componentWillMount - 在render之前调用此方法,在render之前需要做的事情就在这里处理
- render - 渲染并返回一个虚拟DOM
- componentDidMount -在render之后,react会使用render返回的虚拟DOM来创建真实DOM,完成之后调用此方法
更新
- componentWillReceiveProps - 父组件或者通过组件的实例调用 setProps 改变当前组件的 props 时调用
- shouldComponentUpdate - 是否需要更新
- componentWillUpdate - 调用 render方之前
- render
- componentDidUpdate - 真实DOM已经完成更新
销毁阶段
- componentWillUnmount
了解上面的生命周期后,我首先能够保证我在基本的使用上不出大问题
我们使用的mvc框架er的一个模块的生命周期
下面是我自己总结比较详细的流程
初始化
- 调用enter方法开始生命周期
- 触发enter事件
- 使用createModel方法获取关联的Model对象
- 执行this.model.load()加载数据,并等待数据加载完毕
- 执行forwardToView方法开始处理View相关的逻辑
- 触发modelloaded事件
- 调用createView方法获取关联的View对象
- 触发beforerender事件
- 执行this.view.render()渲染视图
- 触发rendered事件
- 调用initBehavior方法
- 触发entercomplete事件
销毁
- 调用leave方法开始退出Action,会执行 this.model = null;this.view = null;
- 触发beforeleave事件
- 如果Model有dispose方法,则执行this.model.dispose()销毁Model对象
- 如果View有dispose方法,则执行this.view.dispose()销毁View对象
- 触发leave事件
正是上面这个清晰的流程图,我遇到问题时,一般都能比较准确的定位到问题出在哪里。不然只能靠盲目debugger去试和猜
生命周期的实际应用
- 首先是保证正确姿势的使用框架或者组件,不埋奇奇怪怪的坑,这个非常重要
- 调试bug时,通过观察出错的点发生在哪个流程中,可以快速缩小范围,而且经常会发现出问题的点就是在错误的节点处理错误的事情
- 生命周期的了解是阅读源码的基础,先了解了核心,再去关注细节实现