关于软件的生命周期
发布在前端修炼2015年10月28日view:999JavaScriptReact前端的畅想
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

第一次听说生命周期这个概念还是在一次面试中,面试官让我说说一个框架的生命周期,然后。。。然后。。。面试就结束了

好吧,回到正题,生命周期是什么,百度百科上面搜一下生命周期软件生命周期 很多描述。
我所理解的生命周期就是一个事物的核心流程,例如:
一个小球从松开手到落地必然经过:向下加速,和地面的碰撞,反弹,停止等步骤,通俗的讲,这几个步骤就是小球落地的生命周期

生命周期的重要性

然而,生命周期对于我们的软件开发有什么用呢,对于前端,如果你只是做做交互,实现一些简单的功能,生命周期的需求其实不是那么强烈。
但是如果你使用一些复杂的框架,复杂的组件,你就会发现生命周期不管是在开发,修改,优化,还是在调试中都是一个关键的因素。

了解程序生命周期,就是了解程序的核心步骤,了解程序运行的几个关键节点。
外面比较流行的框架,流行的ui库(工具类除外)都会有清晰的生命周期,在他们的生命周期中,会告诉你,每一步会做什么,程序执行的过程中会暴露什么方法或者接口给你调用,告诉你哪一步适合哪种操作。当你熟悉了框架的生命周期,你才能更好的驾驭他,知道什么时候该做什么正确的事情,如何用正确的姿势销毁才不会导致内存泄露等等。

曾经有人告诉我,看框架的第一件事,就是去看他的生命周期,我很赞同。

假如你需要去造轮子,我觉得第一件事,也是梳理清晰核心流程(生命周期),然后开始设计,最后码代码。

框架的生命周期

直接举例子:

reactjs的生命周期
目前也在学习阶段,下面内容从一些介绍文章中总结而来
初始化阶段

  1. getDefaultProps
  2. getInitialState
  3. componentWillMount - 在render之前调用此方法,在render之前需要做的事情就在这里处理
  4. render - 渲染并返回一个虚拟DOM
  5. componentDidMount -在render之后,react会使用render返回的虚拟DOM来创建真实DOM,完成之后调用此方法

更新

  1. componentWillReceiveProps - 父组件或者通过组件的实例调用 setProps 改变当前组件的 props 时调用
  2. shouldComponentUpdate - 是否需要更新
  3. componentWillUpdate - 调用 render方之前
  4. render
  5. componentDidUpdate - 真实DOM已经完成更新

销毁阶段

  1. componentWillUnmount

了解上面的生命周期后,我首先能够保证我在基本的使用上不出大问题

我们使用的mvc框架er的一个模块的生命周期
下面是我自己总结比较详细的流程 初始化

  1. 调用enter方法开始生命周期
  2. 触发enter事件
  3. 使用createModel方法获取关联的Model对象
  4. 执行this.model.load()加载数据,并等待数据加载完毕
  5. 执行forwardToView方法开始处理View相关的逻辑
  6. 触发modelloaded事件
  7. 调用createView方法获取关联的View对象
  8. 触发beforerender事件
  9. 执行this.view.render()渲染视图
  10. 触发rendered事件
  11. 调用initBehavior方法
  12. 触发entercomplete事件

销毁

  1. 调用leave方法开始退出Action,会执行 this.model = null;this.view = null;
  2. 触发beforeleave事件
  3. 如果Model有dispose方法,则执行this.model.dispose()销毁Model对象
  4. 如果View有dispose方法,则执行this.view.dispose()销毁View对象
  5. 触发leave事件

正是上面这个清晰的流程图,我遇到问题时,一般都能比较准确的定位到问题出在哪里。不然只能靠盲目debugger去试和猜

生命周期的实际应用

  1. 首先是保证正确姿势的使用框架或者组件,不埋奇奇怪怪的坑,这个非常重要
  2. 调试bug时,通过观察出错的点发生在哪个流程中,可以快速缩小范围,而且经常会发现出问题的点就是在错误的节点处理错误的事情
  3. 生命周期的了解是阅读源码的基础,先了解了核心,再去关注细节实现

博客地址

http://tangguangyao.github.io/

微信公众号

前端修炼](![/img/weixin.jpg)

评论
发表评论
暂无评论
WRITTEN BY
YaoTang
javascript修炼
TA的新浪微博
PUBLISHED IN
前端修炼

前端修炼之路,关于系统级别的前端开发,设计经验

我的收藏