当前位置: 首页 > 网络应用技术

角成分生命周期实践

时间:2023-03-07 11:09:59 网络应用技术

  本文来自Tan Pengfei的任命。他结合了丰富的实践经验,并介绍了Angular生命周期的全部知识

  在Angular中,实现组件生命周期的钩接口方法是使用Angular框架来实现插入业务的时机,并且不同的生命周期适合不同的初始化服务。在 - 深入了解生命周期钩子以及对其与其他特征的结合的理解可以帮助您更好地实现业务并撰写较少的隐藏错误。官方章节内容基于生命周期本身以及生命周期的实施过程实际使用过程中的实际使用过程将由注射,数据传输,更改和父子组件数据更改,组件继承和其他特征的时间来使用。理解我们。只有在经过大量思考和实践之后,我们才能知道并总结其定律。我希望本文能够为您提供一些灵感。

  在Angular中,实现组件生命周期的钩接口方法是使用Angular框架来实现插入业务的时间。

  在Angular的官方文档中,有一个章节生命周期的钩子,可以专门解释生命周期的机制以及如何观察组件的生命周期。

  从官方章节中,我们可以理解生命周期钩方法的所有方面,并且基本上没有不同的差异。

  我列出了正式收获的几点:

  这基本上涵盖了组件生命周期的各个方面;

  官方章节内容基于生命周期本身,实际使用过程的生命周期的实现过程将由注射,数据传输,更改和父子成分数据更改的时间来使用组件的继承和其他特征。顺序,对我们来说,执行顺序是什么易于理解的。只有经过大量思考和实践,我们才能知道并总结其定律。

  与正式入口点不同,本文希望从实践中总结法律。

  在本文中选择以下场景以进行实际演示并尝试获得规则:

  我希望通过阅读本文,您可以帮助您打开一些面纱,以便您可以进一步掌握Angular的特征,并考虑角度生命周期环境中Angular的操作机理;了解Angular的思想,思想和思想模式由开发人员塑造。

  只有我们才能在角度思考,当我们遇到复杂的业务来参与复杂的数据流,复杂的组件关系和复杂的关系时,我们可以通过思考来快速理解知识的盲点,并迅速组织关键字以获取相关知识。广阔的角度概念和新知识的海洋,您会变得像鱼一样,当我们开发业务代码以优化重建并解决问题时,它也将成为最清晰的长矛。

  由于已经在官方文件中引入和证明了生命周期的顺序,因此我们将在此处进行简单的验证和摘要作为审查。

  首先查看实际执行渲染

  注意:如果您有一个仔细的合作伙伴,您可能会注意到在这张照片中,您看不到ngonchanges事件。不忘记root组件不会触发ngonchanges事件,因为没有@inpput变量具有组件;

  下图是一个普通组件,带有@Input属性

  我们可以与上述顺序结合使用粗略图片的图片:如下:

  说明这张图片中每个钩子的含义:

  注意:

  所有方法的执行顺序如下:

  []()执行构造构造器时,执行一次。

  []()onchanges被调用,当调用指令的任何绑定属性(在继承指令中的组件继承的实现)时。

  [](]()点:[](](](]([]()([]()指令的初始化后呼叫;

  [](]()点:[](]()()Docheck在更改检测过程中,可以根据引用的参考来粘结到属性,以找到差异。您可以使用此挂钩以其他方式检查和响应。

  []()点:[](]()AfterContentInit,它将在初始化初始化后立即调用。

  [](]()点:[](]()在默认更改检测器上进行了访问检查,以完成指令完成后立即完成指令的更改检测。

  []()AfterViewInit [](]()AfterViewChecked在默认更改处由组件视图完成检测器视图完成后立即调用。

  []()(当说明,管道或服务被销毁时,都会调用ondestroy。

  进一步的解释:

  因为我们担心使用这些钩子时,每个人都返回上面这些回调钩的定义,并仔细观察钩子的内容。您可以看到OnInit,AfterContentInit,AfterViewInit.进行一些初始化任务。这三个钩子之间的区别就像定义中的描述不同。

  您可以在文章下方留言,以查看是否需要仔细解释实际情况,即适用于这三个钩子的差异化场景。

  我还没有研究这三个的不同合作伙伴,并且经常将异步的初始化业务放在应该头晕的钩子上,因此,如果您发现可以'可以'可以'可以'',所以请随便选择一个,或者在onInitit上或AfterviewInit上选择一个。将其放在一个中,您将不起作用。只是更改另一个,直到问题解决或消耗了很长时间,无法解决问题或偶尔离开错误(原因是因为它在技术上无法通过顺序执行从技术上保证异步顺序),再次研究非常艰难。

  因此,这三个INT非常有价值地为更多的异步业务写更多合作伙伴。

  在第一个场景中,我们回顾了每个生命周期的钩子。

  接下来,让我们用@Input来看一下场景:

  我们将输入属性添加到Hello组件中,而Parent Coption AppComponent在初始化时将初始值分配给了名称。仅在角度处理过程中,输入属性的绑定才发生在Hello组件初始化之前(当然,在调用Hello组件组件的生命周期呼叫的过程中,父组件可以随时更改名称)。

  我们还添加了AppComponenent组件中生命周期的执行。会发生什么?

  现象:

  关键点:

  接下来,让我们看看角度将如何处理生命周期以在继承组件的情况下回电。

  我们还将这些生命周期用于子类别。查看子类别或父级,或其中两个将被执行。执行顺序是什么?

  最后,看看模板结合的角度结合的情况,如下图所示

  最后,附加一个角度项目的图片,该图片结合了上述三个组成部分和生命周期操作的执行

  最后,如果您对上述表达方式或结论感到困惑,则可以在评论区域留言。

  我们是华为Cloud的Web能力中心团队,重点是建造大型前端工具。团队业务涉及低代码平台,UI组件库,前端监视,访问控制,API安排和其他方向。在现场进行杂货以及通过QCON,GMTC等各种平台共享和学习。如果您也认识到我们的“诗歌和遥远的地方”,欢迎注意我们的掘金帐户?

  原始:https://juejin.cn/post/7100103691474059272