• React生命周期


    1.React生命周期

    这张图可以看到React生命周期的四大阶段

    • Initalization:初始化阶段
    • Mounting:挂载阶段
    • Updation:更新阶段
    • Unmounting:销毁阶段

    2.什么是生命周期函数?

    生命周期函数指在某一时刻组件会自动调用执行的函数

    render()函数,就是一个生命周期函数,它在state发生改变时自动执行。这就是一个标准的自动执行函数。

    • constructor不算生命周期函数。

    constructor我们叫构造函数,它是ES6的基本语法。虽然它和生命周期函数的性质一样,但不能认为是生命周期函数。

    但是你要心里把它当成一个生命周期函数,我个人把它看成React的Initialization阶段,定义属性(props)和状态(state)。

    3.Mounting阶段

    Mounting阶段叫挂载阶段,伴随着整个虚拟DOM的生成,它里边有三个小的生命周期函数,分别是:

    1. componentWillMount : 在组件即将被挂载到页面的时刻执行。
    2. render : 页面state或props发生变化时执行。
    3. componentDidMount : 组件挂载完成时被执行。

     控制台打印出来的顺序是:

    这也是生命周期的顺序。这个函数书写有顺序吗?哪个在前?哪个在后?其实是没有顺序的,你可以随便改动他们的顺序。

    注意的问题

    componentWillMountcomponentDidMount这两个生命周期函数,只在页面刷新时执行一次,而render函数是只要有state和props变化就会执行

     4.updation阶段

    React生命周期中的Updation阶段,也就是组件发生改变的更新阶段,这是React生命周期中比较复杂的一部分,它有两个基本部分组成,一个是props属性改变,一个是state状态改变

    • shouldComponentUpdate函数

    shouldComponentUpdate函数会在组件更新之前,自动被执行。

    它要求返回一个布尔类型的结果,必须有返回值,这里就直接返回一个true了(真实开发中,这个是有大作用的)。

    现在就可以在控制台console里看到结果了,并且结果是每次文本框发生改变时都会随着改变。如果你返回了false,这组件就不会进行更新了。 简单点说,就是返回true,就同意组件更新;返回false,就反对组件更新。

    • componentWillUpdate函数

    componentWillUpdate在组件更新之前,但shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false,这个函数就不会被执行了。

     

    • componentDidUpdate函数

    componentDidUpdate在组件更新之后执行,它是组件更新的最后一个环节。

    • componentWillReceiveProps函数

    将这个函数如果写在父组件Xiao.js中,

    这时候会发现函数什么时候都不会被执行,因为Xiao.js算是一个顶层组件,它并没接收任何的props。可以把这个函数移动到XiaoItem.js组件中。

    凡是组件都有生命周期函数,所以子组件也是有的,并且子组件接收了props,这时候函数就可以被执行了。

    这个时候再预览,就会看到componentWillReceiveProps执行了。那现在可以总结一下它的执行时间了。

    子组件接收到父组件传递过来的参数,父组件render函数重新被执行,这个生命周期就会被执行。

    • 也就是说这个组件第一次存在于Dom中,函数是不会被执行的(第一次渲染子组件时候,componentWillReceiveProps函数不会被执行);
    • 如果已经存在于Dom中,函数才会被执行(只有发生变化时候,第二次渲染的时候,才会被执行)。

    这个生命周期算是比较复杂的一个生命周期,需要我们花点时间去消化。

     5.componentWillUnmount(只有在删除时候才会执行)

    这个函数时组件从页面中删除的时候执行,比如在XiaoItem.js,写入下面的代码:

     写完后,可以到浏览器终端中查看结果,当我们点击服务项,服务项被删除时,这个函数就被执行了。

  • 相关阅读:
    Entity Framework 4 in Action读书笔记——第七章:持久化对象到数据库:使用SaveChanges持久化实体
    ASP.NET MVC+Colorbox做的一个Demo(一)
    Entity Framework 4 in Action读书笔记——第七章:持久化对象到数据库:持久化的一些技巧
    NHibernate初学者指南(4):定义数据库架构
    Entity Framework 4 in Action读书笔记——第六章:理解实体的生命周期(三)
    NHibernate初学者指南(1):开篇
    Entity Framework 4 in Action读书笔记——第七章:持久化对象到数据库:持久化修改的实体到数据库
    Java面试题每日五题(2010/02/26)
    Notes for Hadoop the definitive guide
    简明Java笔记
  • 原文地址:https://www.cnblogs.com/GumpYan/p/13211093.html
Copyright © 2020-2023  润新知