首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

类组件运行两次,而函数只运行一次,为什么?

类组件运行两次,而函数只运行一次的原因是因为类组件和函数组件在运行机制上存在一些差异。

首先,类组件是通过类的实例化来创建的,而函数组件是直接执行函数体来创建的。当类组件被实例化时,会经历以下几个阶段:

  1. 实例化阶段:创建类的实例,并初始化实例的属性和状态。
  2. 挂载阶段:将实例挂载到虚拟DOM树上,并执行render方法生成虚拟DOM。
  3. 更新阶段:当组件的状态或属性发生变化时,会触发更新阶段,重新执行render方法生成新的虚拟DOM。
  4. 卸载阶段:当组件被销毁时,会执行一些清理操作。

在挂载阶段和更新阶段,类组件会执行render方法生成虚拟DOM,并将其渲染到页面上。因此,类组件的render方法会运行两次。

相比之下,函数组件没有实例化的过程,它只是执行函数体并返回一个React元素。函数组件在每次渲染时都会执行函数体,但不会像类组件那样经历挂载和更新阶段。因此,函数组件只会运行一次。

总结起来,类组件运行两次是因为它们经历了实例化、挂载和更新阶段,而函数组件只运行一次是因为它们没有实例化的过程,只是执行函数体并返回结果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

编程语言:类型系统的本质

为什么要引入类型的概念? 编程语言中的基本类型 类型组合 OOP与接口类型 函数类型 子(Functor)和单子(Monad) 1. 概述:什么是类型?为什么要引入类型的概念?...编译器在转换代码时进行类型检查,运行时在执行代码时进行类型检查。编译器中负责实施类型规则的组件叫作类型检查器。...每当我们需要使用一次性函数时,就会使用lambda。所谓一次性函数,是指我们只会引用这种函数一次,所以为其命名就成了多余的工作。...这样一来,组件对其内部管理的数据能够做出的保证就得到了强化,因为如果不经过该组件的接口,外部代码将无法修改这些数据。 一个“参数化表达式”的面向对象继承体系的例子。图如下。...也就是说,如果不查看单个组件以及它们如何相互作用,就无法理解其整体行为的系统,同时也无法通过仅查看单个组件忽略系统影响来理解系统的整体行为。

2.6K31

函数式编程了解一下(下)

为什么要这样呢?其实还是我们之前说的,函数的原则就是小、单一、简单。因为易测、简单。而我们呢,通过组合使用这些简单的函数实现一个不简单的函数,完成一个不简单的功能。...是不是类似于React编写组件的概念。通过组合各种小组件完成页面编写的感觉?...如上,我们请求一个接口,然后日常处理接口返回数据,并不需要去担心值是否存在导致程序异常~ ? img Either子 上面,我们可以正确的处理数据了,但是错误的数据呢?...img 说说问题 是的,我们解决了我们的需求,但是仔细看上面代码,貌似丢失我们使用子的初衷:代码简洁,看着爽~ 上面的map多到怀疑人生,自己写起来可能会很好,但是别人维护起来是一个非常头疼的事情...最头痛的时候,运行上面的函数后,我们拿到的值也是子套子,所以,该如何解决呢?

1K20
  • JavaScript代码风格要素

    每个函数只做一件事情:如果你的函数主要用于I/O,就不要在其中混入映射型代码,反之亦然。...几乎每一个函数式编程库都提供至少两种函数组合方法:从右到左依次运行的 compose();从左到右依次运行的 pipe()。...你没有必要听到同一个对象的名字两次。...最终,我们都会一次一次地做着同样的事情。当这样的场景发生时,意味着代码重构的机会来啦。分辨出类似的部分,然后抽取出能够支持每个不同部分的公共方法。这正是库以及框架为我们做的事情。...最终,我们就能用完全相同的方式去表达所有组件的更新逻辑、生命周期,不用再写一堆命令式的代码 对于熟悉组件的人,很容易看懂每个组件的原理:利用标签来表示UI元素,事件处理器用来触发行为,以及用于添加回调的生命周期钩子函数

    851100

    函数式编程(FP)

    高阶函数就是以函数为参数或返回的函数。...可能有的同学会问,为什么有引用不会被释放?...子:一个特殊的容器,通过一个普通的对象来实现,该对象具有 map 方法, map 方法可以运行一个函数对值进行处理(变形关系)。...hooks 对比组件的写法有几处优势这也刚好是符合函数式编程的特性的。 通过自定义 hooks 来共享一些组件的逻辑,如果用组件实现,只能通过高阶组件模拟,这样会不断嵌套,无用的“龟壳”。...每个方法都是独立的, 不需要像组件那样在一个 mount 生命周期里做一堆不相关的操作,更新时又做一堆不相关的操作。不相关的逻辑整合在一个生命周期内,本来就是不易读、不易维护的。

    1.7K10

    编程(18)-泛库设计-并行运算组件

    通常这些工具库的功能都是在特别定制的一些数据类型支持下由一系列函数围绕着这些数据类型进行运算实现的。在泛编程范畴内也不例外。...但在泛工具库里的函数则更重视函数的组合能力(functional composition);因而泛的工具库一般称为组件库(combinator library),库内函数则被称之为组件(combinator...泛组件库设计一般针对特别的功能需求或课题:首先尝试用一些数据类型来表述课题需求,然后围绕这些特制的数据类型设计一系列函数针对课题各个最基本需求范畴提供解决方法。...我们在这节讨论中从一个并行运算组件库的设计过程来介绍泛组件库设计模式。     我们设计这个并行运算组件库的目的:可以把一个普通运算放到另外一个独立的线程(thread)中去运行。...我们在这节介绍了一个简单的泛并行组件库设计,可以把一个运算放到主线程之外的另一个新的线程中计算。但是抽取运算结果却还是会锁定线程(blocking)。

    68870

    C++11 lambda

    在本文中,我们将研究lambda与纯函数和子类(实现的)在实现方面的区别operator()。...唯一的区别是lambda的构造函数被内联到创建lambda的函数中,不是像子的构造函数那样是一个单独的函数。...与按值捕获一样,functor和lambda调用代码是等价的,但是lambda的构造函数是内联的,functor的则不是。 结论 C ++ lambda和子比相似之处更多。...总结主要区别: 1、子和lambda总是传递一个this指针,普通函数自然不是。这会消耗一个额外的寄存器和8个字节的堆栈空间。 Lambda“构造函数”被内联到创建Lambda的函数中。...在大多数情况下,“漏斗式”的普通函数已经完全可以满足需要了,但在某些特殊情况下,下一次的函数执行是在上一次函数执行的结果基础上进行的。这时,函数就需要记住上一次的执行状态数据以备下一次函数执行使用。

    1.1K30

    单例对象不适合用static对象

    C++ static对象只会被初始化一次,而且整个应用内只有一个对象,于是经常看到开发人员会将其作为单例对象,一般情况下没有问题,但是在多线程场景下static对象不适合用作单例对象,为什么呢?...A通过GetInstance()提供单例对象的访问接口,单例对象使用static a,static关键字保证a只会被初始化一次,在多线程环境下为什么就有问题呢?...编译器自动增加一个static int flag = 0的变量来控制a对象的构造函数只调用一次。...flag和a都是static变量,程序运行后就在全局数据区为他们分配空间,并给flag赋值为常量0,由于a需要调用其构造函数初始化,于是延迟到第一次调用GetInstance()才进行初始化。...两次判断pInstance是否为空,第一次是为了减少不必要的加锁,提升性能。第二次是为了避免多次实例化。

    81520

    什么是函数式编程

    , 将UI组件完全的函数化这类的操作能够降低耦合, 并且能够更好地进行代码复用....并返回一个输出: function squreNumber(number) { return number * number; } squireNumber(2); 纯函数独立于函数外的状态运行...condition(arr[i])) { filteredArr.push(arr[i]); } } return filteredArr; } 第二高阶返回一个函数作为其返回值...开发者可以使用体量更小的, 可以被一次一次复用的函数. 了解每一个函数的功能与特性意味着能够更清晰明了地进行调试与测试. 更不用说这些函数都是可预测的....此外, 对于多核的开发, 可以放心地向这些CPU核心分发函数的运行(译者: 因为只关心输入和输出了, 不会受到外部变量或者状态的影响), 继而能够达到更高的运行效率. 怎么样才能使用函数式编程?

    1.6K30

    深入理解JavaScript函数式编程

    为什么要学习函数式编程?...(还有面向过程编程、面向对象编程) 面向对象编程的思维方式: 把现实世界中的事物抽象成程序世界中的和对象,通过封装、继承和多态来演示事物事件的联系 函数式编程的思维方式是把现实世界的事物和事物之间的联系抽象到程序世界...(4)); // console.log(getAreaWithMemory(4)); // console.log(getAreaWithMemory(4)); /* 4 表示getArea这个函数只执行了一次...当函数有多个参数的时候,对函数进行改造调用一个函数只传递并返回一个新的函数(这部分参数以后永远不会发生变化),这个新的函数去接收剩余的参数,返回结果。...这些问题引入了子的概念 Fuctor子 容器:包含值和值的变形关系(这个变形关系就是函数) 子:是一个特殊的容器,通过一个普通的对象来实现,该对象具有map方法,map方法可以运行一个函数对值进行处理

    4.3K30

    appium自动化测试

    :被装饰的测试用例test_one会连续执行两次,再执行test_two,即按照顺序,第一个测试用例执行N次,再执行下一个测试用例 image.png 方法二:使用命令参数,实现重复执行所有用例 在终端传入...:测试用例test_one会连续执行两次,再执行两次test_two,即按照执行顺序,每一个测试用例都执行N次 image.png 注意:-s:表示输出用例中的调式信息,比如print的打印信息等。...方法三:所有测试用例执行一次,重复执行N遍(我在使用下面四个参数运行脚本后的结果都与- -count即方法二的结果一样,但不影响其它功能的运行,所以这边先做个记录,后续有用到这个知识再去解决。...,class中的每条测试用例执行一次,共执行N遍,再执行下一个测试 module:以模块为单位,模块中的每条测试用例执行一次,共执行N遍,再执行下一个模块 session:重复执行整个测试会话,将会话中的所有测试用例执行一遍...: # 重复运行5次,运行过程中第一次失败时就停止运行 import pytest class TestFailure: def test_one(self): a = 1 +

    60620

    了解 React setState 运行机制

    那问题来了, 为什么前一种方式就不行呢?带着这个疑问,继续往下看。 setState 为什么不会同步更新组件?...ReactElement则仅仅是一个数据。 var internalInstance = ReactInstanceMap.get(publicInstance); if (!...3.batchedUpdates发起一次transaction.perform()事务 4.开始执行事务初始化,运行,结束三个阶段 5.初始化:事务初始化阶段没有注册方法,故无方法要执行 6.运行:执行...后面两次会同步更新, 分别输出2, 3; 很显然,我们可以将4次setState简单分成两: componentDidMount是一 setTimeOut中的又是一,因为这两次在不同的调用栈中执行...这也解释了两次打印this.state.val都是0的原因,因为新的state还没被应用到组件中。

    1.2K10

    深入理解函数式编程(下)

    React Hooks的设计是很巧妙的,以useEffect为例: 图 43 在函数组件中,useState用来产生状态,在使用useEffect的时候,我们需要挂载这个state到第二个参数,第一个参数给到的运行函数在...上面这个例子里面的Num,实际上就是一个最简单的Monad,fmap是属于Functor(子)的概念。...为什么一定要Monad类型? 首先,fmap的目的是把数据从一个类型映射到另一个类型,JavaScript里面的map函数实际上就是这个功能。...图 62 你可以想象为Just增加了一个抽象实现,这个抽象为: 图 63 这个抽象我们称为“应用子”,它可以保存一个函数作为内部值,并且使用apply方法可以把这个函数作用到另一个Monad上...惰性计算 被组合的函数只会生成一个更高阶的函数,最后调用时数据才会在函数之间流动。

    95430

    腾讯·微信事业群(WXG)初面回忆录

    文章目录 投递简历 等待召唤 收到邀请 面试开始 算法题 MySQL git与SVN 感触 投递简历 当内推浪潮掀起的时候,优秀的水手便开始出征。 当时咱也没想那么多,就挑个自己喜欢的就投了。...期间重新进行了两次投递,或者说是一次。第一次是因为,那是我第一份投出去的简历,人生第一次投简历。然后紧张了,就投到了微信事业群的校招里面去了。 投完想起来,怎么没有显示收录比?...不怕邀请来,就怕邀请不来。 ---- 收到邀请 今天早上,终于收到了邀请。这时候,就更紧张更刺激了。毕竟是人生的第一次正式面试嘛。 然后,我就问了几个去了大厂的朋友和老师。...由于文件管理的那个项目是由我设计的,当时留下了不少的设计图和图。于是我就拿着这些图给面试官介绍我的项目,就像当时给我哥介绍一样。...然后面试官问了我第一题为什么不写,我就如实说了,接着我们讨论了一下解法。 这件事告诉我:我要去买一本《剑指offer》,然后开始手写算法题。不然下次还是完蛋。

    1.6K10

    深入理解函数式编程(下)

    React Hooks的设计是很巧妙的,以useEffect为例: 在函数组件中,useState用来产生状态,在使用useEffect的时候,我们需要挂载这个state到第二个参数,第一个参数给到的运行函数在...上面这个例子里面的Num,实际上就是一个最简单的Monad,fmap是属于Functor(子)的概念。...为什么一定要Monad类型? 首先,fmap的目的是把数据从一个类型映射到另一个类型,JavaScript里面的map函数实际上就是这个功能。...你可以想象为Just增加了一个抽象实现,这个抽象为: 这个抽象我们称为“应用子”,它可以保存一个函数作为内部值,并且使用apply方法可以把这个函数作用到另一个Monad上。...惰性计算 被组合的函数只会生成一个更高阶的函数,最后调用时数据才会在函数之间流动。

    48410

    前端一面react面试题总结

    总结:跟服务器端渲染(同构)有关系,如果在componentWillMount里面获取数据,fetch data会执行两次一次在服务器端一次在客户端。...⽤域为⽗组件⾃身的 数,⼦组件调⽤该函数,将⼦组件想要传递的信息,作为参数,传递到⽗组件的作⽤域中兄弟组件通信: 找到这两个兄弟节点共同的⽗节点,结合上⾯两种⽅式由⽗节点转发信息进⾏通信跨层级通信:...该方法和 componentWillMount 一样,有且仅有一次调用。constructor 为什么不先渲染?...组件是基于面向对象编程的,它主打的是继承、生命周期等核心概念;函数组件内核是函数式编程,主打的是 immutable、没有副作用、引用透明等特点。...性能优化上,组件主要依靠 shouldComponentUpdate 阻断渲染来提升性能,函数组件依靠 React.memo 缓存渲染结果来提升性能。

    2.9K30

    6小时撸一个拖拽式表单生成低代码工具——leggo

    于是开始思考为什么不能通过拖拽直接生成和维护这些表单呢?于是leggo就此诞生,名字来源于乐高Lego,寓意像搭积木一样完成表单的设计。 leggo哲学 虽然利用了“拖拽”这一最直观简单的交互方式。...所以leggo并不会为了能够实现复杂逻辑的表单组件放弃易用性。leggo真正要做的是帮助前端开发快速搭建和维护表单结构,轻松完成那些无脑重复搬砖的表单组件。...return } //筛选我们需要改造的表单 itemProps.label= 'test2' //我们更换了label itemProps.options= [ //我们更换了选项组件所需要的...SuperSuccessor则非常激进的覆盖和丢弃了原有的表单组件(itemProps和inputprops也被丢弃)。...select', configs => { const { inputprops }= configs inputprops.disabled= true }) // 中间件函数实现方式(注意这个函数只运行一次

    1.2K00

    C# 托管资源与非托管资源

    非托管资源: 对于非托管资源,GC只能跟踪非托管资源的生存期,不知道如何去释放它。这样就会出现当资源用尽时就不能提供资源能够提供的服务,windows的运行速度就会变慢。...用 Finalize 方法回收对象使用的内存需要至少两次垃圾回收。所以有析构函数的对象,需要两次,第一次调用析构函数,第二次删除对象。...托管资源的回收工作是不需要人工干预的,有.NET运行库在合适调用垃圾回收器进行回收。...在没有析构函数的对象在垃圾处理器一次处理中从内存删除,但有析构函数的对象,需要两次,第一次调用析构函数,第二次删除对象。而且在析构函数中包含大量的释放资源代码,会降低垃圾回收器的工作效率,影响性能。...{ PrivateIntPtr handle; // 句柄,属于非托管资源 PrivateComponet comp; // 组件

    3.2K10

    你需要的react面试高频考察点总结

    此时需要采取一些措施来提升运行性能,其很重要的一个方向,就是避免不必要的渲染(Render)。...useState 要使用数组不是对象useState 的用法:const [count, setCount] = useState(0)可以看到 useState 返回的是一个数组,那么为什么是返回数组不是返回对象呢...但是每一次组件渲染子组件即使没变化也会跟着渲染一次。(5)不要滥用useContext可以使用基于 useContext 封装的状态管理工具。...总结:跟服务器端渲染(同构)有关系,如果在componentWillMount里面获取数据,fetch data会执行两次一次在服务器端一次在客户端。...⽤域为⽗组件⾃身的 数,⼦组件调⽤该函数,将⼦组件想要传递的信息,作为参数,传递到⽗组件的作⽤域中兄弟组件通信: 找到这两个兄弟节点共同的⽗节点,结合上⾯两种⽅式由⽗节点转发信息进⾏通信跨层级通信:

    3.6K30
    领券