React与Vue组件生命周期以及钩子函数

最新推荐文章于 2024-05-23 09:21:57 发布
最新推荐文章于 2024-05-23 09:21:57 发布
阅读量626 收藏
点赞数
文章标签： react.js vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Roobert_Chao/article/details/129552334
版权

React与Vue组件生命周期以及钩子函数

组件生命周期

组件生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程。

  • 钩子函数，使开发者的代码可以在固定阶段执行。

  • 注意：只有类组件才有生命周期。函数组件每次都是重新运行函数，旧的组件即刻被销毁。

React组件的生命周期

在这里插入图片描述

组件的生命周期主要包括三阶段

  1. 挂载阶段
  2. 更新阶段
  3. 卸载阶段

  • 挂载阶段：组件被创建，执行初始化，并被挂载到DOM中，完成组件的第一次渲染（已经插入真实DOM）

  • 更新阶段：组件被挂载到DOM之后，props和state都可以引起组件的更新（重新渲染）

  • 卸载阶段：在组件被卸载前调用（已经移出真实DOM）

挂载阶段

  1. constructor()

    • ES6中class的构造方法，组件被创建时会首先调用组件的构造方法

    • 初始化state，以及为事件处理程序绑定this

  2. componentWillMount() 不建议使用，已经废用了，是在组件被挂载在DOM之前调用，而且只会被调用一次

  3. render()

    • 根据组件的props和state返回一个React元素

    • 渲染UI

    • 注意：在render()里面不能调用setState()

    • 实际上是调用React.creatElement()

  4. componentDidMount()

    • 在组件被挂载在DOM之后调用，而且只会被调用一次。

    • 可以调用 setState()

    • 向服务器端发送网络请求，以及处理依赖DOM节点的操作

更新阶段

  1. 父组件调用render方法
  2. 组件调用this.setState

  1. componentWillReceiveProps()

    • 已废用
    • 由props引起的组件更新过程中被调用
    • 由state引起的组件更新并不会触发该方法的执行

  2. shouldComponentUpdate()

    • 用于决定组件是否继续执行更新过程，默认值为true

    • 可以用来减少组件不必要的渲染，从而优化组件的性能

    • 对比前后两个props和state是否相同

  3. componentWillUpdate()

    • 组件初始化时不调用

    • 只有在组件将要更新时才调用，此时可以修改state

  4. render()

    • 根据组件的props和state返回一个React元素

    • 渲染UI

    • 注意：在render()里面不能调用setState()

    • 实际上是调用React.creatElement()

  5. componentDidUpdate()

    • 组件更新之后被调用

卸载阶段

  1. componentWillUnmount()

    • 在组件被卸载前调用

其他

  • componentDidCatch(error, errorInfo)在子组件发生错误是被调用。

    • 接收error和errorInfo两个参数，
      • error 表示抛出的错误
      • errorInfo 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息

React 生命周期函数调用顺序

简记，容易记住的生命周期方法

单个组件生命周期函数调用顺序

  1. 单组件初始化

    • constructor -> componentWillMount -> render -> componentDidMount

    • 常用 constructor -> render -> componentDidMount

  2. 单组件更新state

    • shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

  3. 单组件卸载

    • componentWillUnmount
父子组件生命周期函数调用顺序

  1. 父子组件初始化

    • 父组件constructor -> 父组件componentWillMount -> 父组件render -> 子组件constructor -> 子组件componentWillMount -> 子组件render -> 子组件componentDidMount -> 父组件componentDidMount

  2. 父组件更新state

    • 父组件shouldComponentUpdate -> 父组件componentWillUpdate -> 父组件render -> 子组件componentWillReceiveProps -> 子组件shouldComponentUpdate -> 子组件componentWillUpdate -> 子组件render -> 子组件componentDidUpdate -> 父组件componentDidUpdate

  3. 子组件更新state

    • 子组件shouldComponentUpdate -> 子组件componentWillUpdate -> 子组件render -> 子组件componentDidUpdate

  4. 父子组件卸载

    • 父组件componentWillUnmount -> 子组件componentWillUnmount

React组件的生命周期（新版）

在这里插入图片描述

新版本主要是React 16.3+

新版本的react生命周期函数主要变化

  1. 去除了三个不安全函数 componentWillMount、componentWillReceiveProps、componentWillUpdate
  2. 新增了三个生命周期函数 static getDerivedStateFromProps、getSnapshotBeforeUpdate 、static getDerivedStateFromError

  • 版本说明

    • componentWillMount，componentWillReceiveProps，componentWillUpdate 表示使用这些生命周期的代码，有可能在未来的 React 版本中存在缺陷，可能会影响未来的异步渲染。

    • React 16.3 版本：为不安全的生命周期引入别名 UNSAFE_componentWillMount，UNSAFE_componentWillReceiveProps 和 UNSAFE_componentWillUpdate。（旧的生命周期名称和新的别名都可以在此版本中使用）

    • React 16.3 之后的版本：为 componentWillMount，componentWillReceiveProps 和 componentWillUpdate 启用弃用警告。（旧的生命周期名称和新的别名都可以在此版本中使用，但旧名称会记录DEV模式警告）

    • React 17.0 版本：推出新的渲染方式—异步渲染（ Async Rendering），提出一种可被打断的生命周期（实际 dom 挂载之前的虚拟 dom 构建阶段），去掉的三个生命周期 componentWillMount，componentWillReceiveProps 和 componentWillUpdate。（从这个版本开始，只有新的“UNSAFE_”生命周期名称将起作用）

挂载阶段

constructor -> getDerivedStateFromProps -> render -> componentDidMount

  1. componentWillMount 不再使用
  2. getDerivedStateFromProps 替换 componentWillMount

  • static getDerivedStateFromProps(props, state) 在组件初始化和组件更新时都会被调用

    • 接收state和props两个参数

      • 可以通过返回一个对象来更新组件自身的state
      • 返回null来表示接收到的props没有变化，不需要更新 state

    • 静态方法，所以该生命周期钩子函数内部没有this

    • 将父组件传递过来的props映射到子组件的state上

    • 注意：子组件通过 setState 更新自身状态时，不会改变父组件的 props

更新阶段

getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate

  1. 新增 getDerivedStateFromProps
  2. 替换 componentWillUpdate 为 getSnapshotBeforeUpdate

  • getSnapshotBeforeUpdate(prevProps, prevState) 在组件更新时被调用。被调用于 render之后、更新 DOM 和 refs 之前。

    • 必须有返回值，返回值将作为 componentDidUpdate 函数方法的第三个参数。

    • 通过this.props和this.state是最新的数据，函数的参数prevProps和prevState是更新前的数据。可以通过比较，做逻辑处理。

卸载阶段

componentWillUnmount
无变化

其他

  • static getDerivedStateFromError(error) 在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state。

    • 在渲染DOM之前调用，当我们遇到子组件出错的时候可以渲染备用UI，常用作错误边界。

    • componentDidCatch是在DOM渲染完后才会调用，可以用来输出错误信息或上传一些错误报告。

React 生命周期函数调用顺序

单组件

  1. 单组件初始化

    • constructor -> getDerivedStateFromProps -> render -> componentDidMount

  2. 单组件更新state

    • getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate

  3. 单组件卸载

    • componentWillUnmount
父子组件

  1. 父子组件初始化

    • 父组件constructor -> 父组件getDerivedStateFromProps -> 父组件render -> 子组件constructor -> 子组件getDerivedStateFromProps -> 子组件render -> 子组件componentDidMount -> 父组件componentDidMount

  2. 父组件更新state

    • 父组件getDerivedStateFromProps -> 父组件shouldComponentUpdate -> 父组件render -> 子组件getDerivedStateFromProps -> 子组件shouldComponentUpdate -> 子组件render -> 子组件getSnapshotBeforeUpdate -> 父组件getSnapshotBeforeUpdate -> 子组件componentDidUpdate -> 父组件componentDidUpdate

  3. 子组件更新state

    • 子组件getDerivedStateFromProps -> 子组件shouldComponentUpdate -> 子组件render -> 子组件getSnapshotBeforeUpdate -> 子组件componentDidUpdate

  4. 父子组件卸载

    • 父组件componentWillUnmount -> 子组件componentWillUnmount

VUE@2组件的生命周期

在这里插入图片描述

组件的生命周期

  1. 初始化阶段
  2. 编译阶段
  3. 挂载阶段
  4. 更新阶段
  5. 销毁阶段

初始化阶段

  • beforeCreate

    • 在实例初始化之后，进行数据侦听和事件/侦听器的配置之前同步调用。

    • 实例的data和methods等配置还未初始化，无法调用，只能使用一些默认事件。

  • created

    • 在实例创建完成后被立即同步调用。

    • 实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。

    • 挂载阶段还没开始，且 $el.property 目前尚不可用。

    • 模板还没有编译，不能获取到DOM。

编译阶段

  • VUE对象是否指定el

  • VUE对象是否指定template

  • 将<template>编译到render函数中

挂载阶段

  • beforeMounted

    • 挂载开始之前被调用，相关的 render 函数首次被调用。

    • 函数在模板渲染之前调用，也就是DOM节点挂载到真实DOM树之前调用。

    • 此模板进行编译，会调用render函数生成虚拟DOM，同样无法获取DOM节点（此时只存在虚拟DOM，还在JS级别）。

  • mounted

    • 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换。

    • 注意:mounted不会保证所有的子组件也都被挂载完成。

      • 如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick

    • 执行该钩子函数时，模板编译完成，而且挂载到真实DOM树上面去了，也就是页面可以显示了。（该钩子在服务器端渲染期间不被调用）

生命周期组件调用顺序

单组件

  1. 单组件初始化

    • beforeCreate -> created -> beforeMount -> mounted

  2. 单组件更新

    • beforeUpdate -> updated

  3. 单组件卸载

    • beforeDestroy -> destroyed
父子组件

  1. 父子组件初始化

    • 父组件beforeCreate -> 父组件created -> 父组件beforeMount -> 子组件beforeCreate -> 子组件created -> 子组件beforeMount -> 子组件mounted -> 父组件mounted

  2. 父组件更新data，此data没传递给子组件

    • 父组件beforeUpdate -> 父组件updated

  3. 父组件更新data，此data传递给了子组件

    • 父组件beforeUpdate -> 子组件beforeUpdate -> 子组件updated -> 父组件updated

  4. 子组件更新data

    • 子组件beforeUpdate -> 子组件updated

  5. 父子组件卸载

    • 父组件beforeDestroy -> 子组件beforeDestroy -> 子组件destroyed -> 父组件destroyed

更新阶段

  • beforeUpdate

    • 在数据发生改变后，DOM 被更新之前被调用。

    • 这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。

    • 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。

    • 该钩子函数在data数据发生变化之后调用，data里面的数据已经是最新的了，但是页面上DOM还没有更新最新的数据。

  • updated

    • 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

    • 当这个钩子被调用时，组件 DOM 已经更新，可以执行依赖于 DOM 的操作。要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

    • 注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick

    • 该钩子函数会在data数据更新之后执行，而且此时页面也渲染更新完成了，显示的就是最新的数据。

    • 注意：不要在updated中修改data数据，很容易造成死循环。

销毁阶段

  • beforeDestroy

    • 实例销毁之前调用。实例仍然完全可用。

    • 在这个钩子函数里面解除一些全局或者自定义事件。

  • destroyed

    • 实例销毁后调用。

    • 该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE@2生命周期</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="app">
    {{ message }}
</div>
<div class="test">
    {{ msg }}
</div>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>
<script type="text/javascript">
    const myVue = new Vue({
        el: ".test",
        data: {
            msg: "在控制台输入 myVue.msg=666666,可以改变值触发更新前，更新后"
        },
        beforeCreate: function () {
            console.log("建立前 --- beforeCreate");
        },
        created: function () {
            // 在实例创建之后同步调用。数据绑定，计算属性，方法，watcher/事件回调。
            // 没有开始 DOM 编译，$el 还不存在，但是实例存在，即 this.a 存在，可打印出来 。
            console.log("建立 --- created");
        },
        beforeMount: function () {
            console.log("渲染前 --- beforeMount");
        },
        mounted: function () {
            console.log("渲染后 --- mounted");
        },
        beforeUpdate: function () {
            console.log("更新前 --- beforeUpdate");
        },
        updated: function () {
            console.log("更新后 --- updated");
        },
        beforeDestroy: function () {
            // 触发方式,在console里面打myVue.$destroy();
            // 在开始销毁实例时调用。此时实例仍然有功能。
            console.log("销毁前 --- beforeDestroy");
        },
        destroyed: function () {
            // 触发方式，在console里面打myVue.$destroy(); 其中myVue.$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在
            // 在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，注意是解绑不是销毁,所有的子实例也已经被销毁。
            console.log("已销毁 --- destroyed");
        }
    });
</script>
</body>

其他钩子函数

  • errorCaptured

    • 在捕获一个来自后代组件的错误时被调用。

    • 钩子函数的三个参数：错误对象、发生错误的组件实例、一个包含错误来源信息的字符串。

    • 该钩子函数可以返回 false 以阻止该错误继续向上传播。

  • activated

    • 被 keep-alive 缓存的组件激活时调用。

  • deactivated

    • 被 keep-alive 缓存的组件失活时调用。

VUE@3组件的生命周期

在这里插入图片描述

  1. setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

  2. onBeforeMount() : 组件挂载到节点上之前执行的函数；

  3. onMounted(): 组件挂载完成后执行的函数；

  4. onBeforeUpdate(): 组件更新之前执行的函数；

  5. onUpdated(): 组件更新完成之后执行的函数；

  6. onBeforeUnmount(): 组件卸载之前执行的函数；

  7. onUnmounted(): 组件卸载完成后执行的函数；

  8. onActivated(): 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数，被激活时执行；

  9. onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

  10. onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

生命周期执行顺序

生命周期函数的运行基本顺序是 setup -> beforeCreate -> created

单个组件

  1. 单组件初始化

    • setup -> created -> onBeforeMount -> onRenderTracked -> onMounted

  2. 单组件更新

    • onRenderTriggered-> onBeforeUpdate -> onUpdated

  3. 单组件卸载

    • onBeforeDestroy -> onDestroyed
父子组件

  1. 父子组件初始化

    • 父组件setup -> 父组件onBeforeMount -> 父组件onRenderTracked -> 子组件setup -> 子组件onBeforeMount -> 子组件onRenderTracked -> 子组件onMounted -> 父组件onMounted

  2. 父组件更新data，此data没传递给子组件

    • 父组件onRenderTriggered-> 父组件onBeforeUpdate ->父组件 onUpdated

  3. 父组件更新data，此data传递给了子组件

    • 父组件onRenderTriggered -> 父组件onBeforeUpdate -> 子组件onBeforeUpdate -> 子组件onUpdated -> 子组件onUpdated

  4. 子组件更新data

    • 子组件onRenderTriggered -> 子组件onBeforeUpdate -> 子组件onUpdated

  5. 父子组件卸载

    • 父组件onBeforeDestroy -> 子组件onBeforeDestroy -> 子组件onDestroyed -> 父组件onDestroyed

VUE@2与VUE@3对比

vue@2vue@3
beforeCreatesetup(()=>{})
createdsetup(()=>{})
beforeMountonBeforeMount(()=>{})
mountedonMounted(()=>{})
beforeUpdateonBeforeUpdate(()=>{})
updatedonUpdated(()=>{})
beforeDestroyonBeforeUnmount(()=>{})
destroyedonUnmounted(()=>{})
activatedonActivated(()=>{})
deactivatedonDeactivated(()=>{})
errorCapturedonErrorCaptured(()=>{})
  • Vue@2和Vue@3钩子变化不大，使用setup()钩子来替代 beforeCreate、created 两个钩子函数。

在这里插入图片描述

VUE与React生命周期对比

对比的目的在于处理相同与不同

相同点

  1. Vue、React 生命周期函数基本类似，组件的创建、更新、卸载都有对应的函数方法调用。

  2. 单组件、父子组件渲染类似。

不同点

  • 参数比较：

    • Vue生命周期函数除了 errorCaptured 都是没有参数的。
    • React生命周期函数都有参数并且能访问到旧的或新的props和state。

  • 组件更新

    • React父组件更新，子组件一定都会更新渲染，除非自己手动优化（继承PureComponent或者实现shouldComponent方法）。
    • Vue中除非子组件依赖父组件的数据改变了，否则子组件是不会重新渲染的。

  • 组件更新处理

    • Vue 数据改变就一定会重新渲染，无法阻止。
    • React 能通过 shouldComponent 方法来决定是否需要渲染。

  • 错误处理

    • Vue 在组件报错的时候页面还是会渲染，只是引发出错的地方可能数值不对。
    • React 组件报错的时候会导致页面空白，编译报错将提示信息到浏览器（getDerivedStateFromError 做边界处理）。

  • 生命周期影响

    • React的生命周期函数，大多都在处理当前的props与state
    • VUE相比较多了缓存的生命周期函数 activated、deactivated 和用于开发调试的renderTracked、renderTriggered生命周期函数。
Roobert_Chao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2020: Vue和React生命周期
flitrue的博客
06-03 597
Vue 生命周期 vue2有9个生命周期钩子 vue3也有9个生命周期钩子 2.x和3.x钩子的对应关系： beforeCreate -> 使用 setup() created -> 使用 setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnm
React-hooks的useEffect模拟componentDidUpdate生命周期
热门推荐
codingWeb的博客
08-15 1万+
先回忆一下： class组件中的componentDidUpdate生命周期是初次渲染完后，当接收的props，state改变时或者this.forceUpdate()就会调用 函数组件中的useEffect可以看做 componentDidMount，componentDidUpdate 和componentWillUnmount 这三个函数的组合 useEffect( ()=>{ } ) 只有第一个参数的时候 此时相当于componentDidMount + componentDidUpdat
ReactNative中组件的生命周期
02-25
就像Android开发中的View一样，ReactNative（RN）中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。生命周期回调函数在组件创建之前，会先调用getD
React之 事件处理
qq_42420970的博客
06-01 155
以下内容摘自：https://reactjs.bootcss.com/docs/handling-events.html 1、React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同： 2、使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 例如，传统的 HTML： <button onclick="activateLasers()"> Activate Lasers </button> 在 React 中略微不同： <butto
React16、17和Vue2、3生命周期、渲染顺序
luemeon的博客
07-19 1397
主要就是命名不同。
Vue的生命周期和React的生命周期
weixin_43613849的博客
11-13 839
1、Vue2生命周期函数 一、创建前 / 后 在beforeCreate生命周期函数执行的时候，data和method 还没有初始化 在created 生命周期函数执行的时候，data和method已经初始化完成 二、渲染前/后 在beforeMount 生命周期函数执行的时候，已经编译好了模版字符串、但还没有真正渲染到页面中去在mounted 生命周期函数执行的时候，已经渲染完，可以看到页面 三、数据更新前/后 在beforeUpdate生命周期函数执行的时候，已经可以拿到最新的数...
React笔记：类似生命周期函数componentDidMount、componentWillUnmount、componentDidUpdate在useEffect中的使用
init_8y0的博客
07-30 2526
文章目录前言一、类似于componentDidMount的useEffect1.对应代码2.使用示例二、类似于componentWillUnmount的useEffect1.对应代码2.使用示例三、类似于componentDidUpdate的useEffect1.对应代码总结 前言 本文为React中useEffect的使用笔记 一、类似于componentDidMount的useEffect 1.对应代码 import { useEffect } from 'react' const Demo
【React】React组件生命周期以及触发顺序（部分与vue做比较）
fangyuan__的博客
10-01 1093
当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期当父组件中状态发生变化（包括子组件的挂载以及卸载）时，会触发自身对应的生命周期以及子组件的更新render 以及 render 之前的生命周期，则 父组件先执行render 以及 render之后的声明周期，则子组件先执行，并且是与父组件交替执行当子组件进行卸载时，只会执行自身的 componentWillUnmount 生命周期，不会再触发别的生命周期。
详解React组件生命周期中挂载、更新和卸载三个阶段
qq_38586431的博客
09-06 2506
一、挂载阶段 这个阶段是指组件被创建，初始化执行，并且被挂载到DOM中，完成组件的第一次渲染。以下为它依次调用的生命周期方法： （1）constructor （2）componentWillMount （3）render （4）componentDidMount 1、constructor 相信大家多少都了解构造方法，这个构造方法主要负责接收一个props参数、初始化组件的state以及...
recat和vue生命周期的对比
iiiiiiiice的博客
02-25 587
对比react和vue的生命周期，包括class的新旧版本生命周期的对比，以及hooks和vue的生命周期。
vue生命周期和react生命周期对比【推荐】
10-18
本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
老生常谈js-react组件生命周期
10-19
下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React组件生命周期详解
12-03
React组件提供了生命周期的钩子函数去响应组件不同时刻的状态，组件的生命周期如下： 实例化 存在期 销毁期 实例化 首次调用组件时，有以下方法会被调用（注意顺序，从上到下先后执行）： getDefaultProps ...
Hooks时代，如何写出高质量的react和vue组件
油墨香^-^的博客
08-17 142
一个组件内部的所有代码——无论vue还是react——都可以抽象成以下几个部分:组件视图，组件中用来描述视觉效果的部分，如css和html、react的jsx或者vue的template代码组件相关逻辑，如组件生命周期，按钮交互，事件等业务相关逻辑，如登录注册，获取用户信息，获取商品列表等与组件无关的业务抽象单独拆分这三块并不难，难的是一个组件可能写得特别复杂，里面可能包含了多个视图，每个视图相互之间又有交互；...
react一个框选插件的使用吧。。.。（获取时间戳）
qq_41605935的博客
04-28 377
刚用react不久 一个小白的成长之路 时间戳的精度为半小时，一次性为一周的时间戳128位的string 插件支持框选 以及框选获得框选的id 支持点击选中再次点击取消选中 对插件进行二次修改 先给插件地址附上git地址 下面就是具体代码了 import Selection from './Selection' import React, { Component } from 'react' export default class Test ex...
React和Vue的生命周期对比表
WWEIZAI的博客
06-23 246
React和Vue的生命周期对照表
react组件生命周期
UUID、
04-02 321
以上就是我对react组件生命周期的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。组件销毁前，组件挂载类型Vue中的onUnmounted、unmounted。组件挂载完毕，组件挂载类型Vue中的onMounted、mounted。子组件接受新的props时会触发，第一次不触发。
Vue与React的异同—生命周期（一）
吴孔云的博客
01-09 4337
React与Vue都有lifecycle生命周期的概念，表示每个组件实例在被创建之前都要经过一系列的初始化过程。比如设置数据监听、编译模板、挂载实例到视图、在数据变化时更新视图等。 Vue生命周期 所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fe
React hooks - useState
最新发布
是草莓味的啊
05-23 142
在hooks出现之前，react的函数式组件也叫做无状态组件（函数里面无法创建属于自己的状态，只能使用props接收）一个管理状态的 hooks，能让函数组件拥有自己的状态，实现状态的初始化、读取、更新。
vue react生命周期
09-14
Vue和React是两个常用的前端框架，它们都有自己的生命周期函数用于管理组件的创建、更新和销毁过程。 Vue的生命周期函数包括初始化、创建、挂载、更新和销毁等几个阶段。具体来说，Vue的生命周期函数按照顺序包括：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值