快速了解函数式组件为什么比对象类组件性能更加优秀

已于 2022-08-02 18:03:12 修改
阅读量704 收藏
点赞数 1
文章标签： 前端 javascript 开发语言
于 2022-08-02 18:02:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37174991/article/details/126127344
版权

首先理解什么是diff算法，以及diff算法的机制，在这里我们不做过多的介绍

1、函数式组件我们可以把它理解成一个函数，它可以根据你传递的上下文数据渲染生成一片DOM
2、函数式组件和普通的对象类型组件不同，他不会被看作成为一个真正的组件；我们知道在diff的时候会patch出一个对象，如果遇到一个节点式组件vnode，会递归执行子组件的初始化过程，而函数式组件的render生成的是普通的vnode，不会有递归子组件的过程，所以这里渲染开销就会低很多
3、因此函数式组件也不会有状态，不会有响应式数据以及生命周期钩子函数，你可以把它当成普通组件模板的一部分DOM剥离出来，通过函数式渲染出来，是一种在DOM层的复用

扩展：js引擎思浩单线程的运行机制，js线程会阻塞ui线程，所以如果脚本执行时间过长，就会阻塞渲染，导致页面卡顿，而函数式组件因为上述三个点，执行script的时间会变短，所以性能更好

渣男语录
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue函数式组件-你值得拥有
10-17
主要介绍了Vue函数式组件及vue函数式组件的优缺点，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
react中，函数式组件和类组件的优缺点。
lizhongyu0922的博客
07-27 6858
1.类组件的性能消耗比较大，因为类组件需要创建类组件的实例，而且不能销毁。 2.函数式组件性能消耗小，因为函数式组件不需要创建实例，渲染的时候就执行一下，得到返回的react元素后就直接把中间量全部都销毁。 函数式组件是不能有状态的，但是现在有了react hooks，也可能有状态了。 ...
react-函数组件的性能优化突破口
冷月心的博客
01-16 1674
react-函数组件的性能优化突破口
写文章 类组件(Class component)和 函数式组件(Functional component)之间有何区别
最新发布
zzx262625的博客
10-22 278
尽管函数式组件在 React 的最新版本中已经变得非常强大并且被广泛使用，但类组件仍然具有它们的用途。例如，当需要使用生命周期方法、管理复杂的组件状态或者使用上下文时，类组件仍然是一个合适的选择。对于简单的场景，函数式组件可能更适合，而对于大型应用程序或需要处理复杂逻辑的场景，类组件可能更有优势。在 React 中，有两种主要的组件类型：类组件和函数式组件。语法：类组件是使用 ES6 的类语法来定义的，而函数式组件是使用 JavaScript 函数来定义的。组件状态和上下文：类组件可以使用。
前端开发常见面试题总结
weixin_39883767的博客
04-21 534
1.js的基本类型有哪些？引用类型有哪些？ 基本类型也称为原始数据类型，基本数据类型有 7 种，number、string、boolean、null、undefined，symbol(ES6)，bigint(ES10) 引用类型统称为 object 类型，细分的话有：Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型 等。 基本数据类型变量保存在栈（stack）中,它们的值直接存储在变量访问的位置。 引用类型的存储需要内存的栈区和堆区（堆区是指内存里
vue函数式组件
time141的博客
01-04 9910
什么是函数式组件？ 我们可以把函数式组件想象成组件里的一个函数，入参是渲染上下文（render context），返回值是渲染好的HTML 对于函数式组件，可以这样定义： Stateless(无状态)：组件自身是没有状态的 Instanceless(无实例)：组件自身没有实例，也就没有this 由于函数式徐建拥有拥有这两个特性，我们就可以把它用作高阶组件(High order components)，所谓高阶，就是可以生成其他组件的组件。 函数式组件的特点 没有管理任何状态 没有监听任何传递给
React 函数组件和类组件的优缺点
liuhebahuang的博客
05-09 1447
React 类组件和函数组件的优缺点
总结Vue性能优化方式及原理
qq_45279574的博客
04-07 201
一：使用计算属性 计算属性最大的一个特点就是它是可以被缓存的，这个缓存指的是只要它的依赖的不发生改变，它就不会被重新求值，再次访问时会直接拿到缓存的值，在做一些复杂的计算时，可以极大提升性能 <template> <div>{{superCount}}</div> </template> <script> export default { data() { return { count: 1
vue面试题之一：生命周期函数面试题
Arthas_Xue的博客
09-19 989
1. 生命周期函数面试题 1. 什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。 2. vue生命周期的作用是什么 Vue 所有的功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。...
vue 函数式组件
weixin_44862325的博客
02-14 1804
函数式组件定义 组件没有管理任何状态 也没有监听任何传递给它的状态 也没有生命周期方法时 可以将组件标记为functional 这意味它无状态(没有响应式数据) 也没有实例（没有this上下文） Vue.component('heading', { functional: true, //标记函数式组件 props: ['level', 'title', 'icon'], render(h, context) { //context上下文传参 let children = []; // 属.
Java 面向对象和函数式编程的混合和scala的比较.pdf
07-02
以数据库的性能为例，但运行环境的任何部分都可能会引起性能问题。 对于整体系统，采取结构化方法针对系统的所有方面分析性能。CPU 使用率、I/O 延迟、系统整体的吞吐量都必须测量和分析。只有到那时，我们才能判定...
Spring面试题
05-06
Execute（）从ActionForm对象中获取数据，完成业务逻辑，返回一个ActionForward对象，ActionServlet再把客户请求转发给ActionForward对象指定的jsp组件，ActionForward对象指定的jsp生成动态的网页，返回给客户。...
微软开源 JavaScript 引擎 ChakraCore-易语言
06-14
很多游戏使用Lua的原因是比Python性能好，没有其他可选方案了。Chakra的开源，应该带动开发者去使用JS脚本。Chakra对于大型Windows游戏开发者更大的好处在于系统支持，Lua需要去下载编译，而Chakra只需要包含头文件...
Vue 函数式组件原理和使用详解
热门推荐
陆小森_红齐飘飘的博客
09-02 1万+
Vue 提供了一种称为函数式组件的组件类型，用来定义那些没有响应数据，也不需要有任何生命周期的场景，他只接受一些props 来显示组件。 一：使用方法 Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺少的实例 // 提供第二个参数作为...
React函数组件与类组件优劣对比
m0_47670683的博客
04-25 4556
类组件的问题 自从React推出Hooks之后，函数组件写法大行其道，而类组件写法有些日渐式微。为什么要推广函数组件？我觉得有以下三个原因。 原因一，因为this带来的问题 有一个著名的案例展示了类组件this带来的问题，下面我将其本土化复现一下这个案例。 import React from "react" const ProfileFunction: React.FC<{goods:string}> = (props) => { const showMessage = () =
react中函数组件和class组件的区别
Laollaoaolao的博客
08-09 875
走到handerClick，此时handerClick被重新创建，即handerClick指向了新的内存空间，值得注意的是：for循环接着往下走的时候，num所在的上下文并不是当前函数（新创建的函数），而是第一次初始化时创建的函数，而那个函数的上下文中，num永远都是0，所以console.log输出都是0。不论react对状态进行了什么处理,我们要知道的是,class组件是有状态的,他的状态会在组件生命周期中一直保存。的,每一次更新数据都会重新调用函数,生成新的函数执行上下文。...
前端Vue：函数式组件
weixin_33854644的博客
05-07 9003
每天学习一个vue知识点呀 函数式组件特点： 没有管理任何状态 没有监听任何传递给它的状态 没有生命周期方法 它只是接收一些prop的函 我们将这样的组件标记为functional： 无状态 == 无响应式数据 无实例 == 无this上下文 函数式组件的优点： 渲染开销低，因为函数式组件只是函数； 函数式组件基本写法： { functional: true, // Prop...
函数式组件与类式组件的语法及区别
04-21
3. 性能：函数式组件比类式组件更简单，通常会更快地被执行。因为它不需要实例化，只需要返回渲染结果。 4. 使用场景：函数式组件通常用于渲染静态内容，而类式组件用于需要管理状态（state）、生命周期方法、以及...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值