• react的生命周期


    之前在vue中花了很大的篇幅去讲了什么是生命周期,vue中分为

    1)创建期间的生命周期函数

    i. beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好data和methods属性
    
    ii. created:实例已经在内存中创建好,此时data和methods已经创建好,此时还没有开始编译模板
    
    iii. mounted:此时,已经将编译好的模板,挂在到了页面指定的容器中显示

    2)运行期间的生命周期函数

    i. beforeUpdate:状态更新之前执行此函数,此时data中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点
    
    ii. Updated:实例更新完毕之后调用此函数,此时data中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!

    3)销毁期间的生命周期函数

    i. beforeDestory:实例销毁之前调用,在这一步,实例仍然完全可用;
    
    ii. destoryed:Vue实例销毁后调用,调用后,vue实例指令的所有东西都会解绑完,所有的事件监听器会被移除,所有的子实例也会被销毁

    React 生命周期

    组件生命周期: 组件从创建到销毁的整个生命过程

    React 组件的生命周期分 3 个阶段:

    1, 挂载阶段(Mounting) ---- 2 

    2, 更新阶段(Update) ----- 3

    3, 销毁阶段(移除阶段)(Unmounting) 从元素上移除就会触发 --- 1

    虽然声明周期只有这三个阶段,但是每个阶段都对应的有不同的方法

    React的生命周期从广义上分为三个阶段:挂载、渲染、卸载因此可以把React的生命周期分为两类:挂载卸载过程和更新过程。

    如果按照正常的执行流程,顺序应该是:

    1) componentWillMount 在渲染前调用,在客户端也在服务端。
    
    2) componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
    
    3) componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
    
    4) shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
    
    5) 可以在你确认不需要更新组件时使用。
    
    6) componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    
    7) componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
    
    8) componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

    最开始先初始化props(设置props的默认值)和state(设置state的初始值)

  • 相关阅读:
    webpack基础
    LeetCode232. 用栈实现队列做题笔记
    mysql 时间加减一个月
    leetcode 1381. 设计一个支持增量操作的栈 思路与算法
    LeetCode 141. 环形链表 做题笔记
    leetcode 707. 设计链表 做题笔记
    leetcode 876. 链表的中间结点 做题笔记
    leetcode 143. 重排链表 做题笔记
    leetcode 1365. 有多少小于当前数字的数字 做题笔记
    LeetCode1360. 日期之间隔几天 做题笔记
  • 原文地址:https://www.cnblogs.com/ranyihang/p/12955980.html
Copyright © 2020-2023  润新知