类组件运行两次，而函数只运行一次，为什么？
类组件运行两次，而函数只运行一次的原因是因为类组件和函数组件在运行机制上存在一些差异。
首先，类组件是通过类的实例化来创建的，而函数组件是直接执行函数体来创建的。当类组件被实例化时，会经历以下几个阶段：
- 实例化阶段：创建类的实例，并初始化实例的属性和状态。
- 挂载阶段：将实例挂载到虚拟DOM树上，并执行
render方法生成虚拟DOM。 - 更新阶段：当组件的状态或属性发生变化时，会触发更新阶段，重新执行
render方法生成新的虚拟DOM。 - 卸载阶段：当组件被销毁时，会执行一些清理操作。
在挂载阶段和更新阶段，类组件会执行render方法生成虚拟DOM，并将其渲染到页面上。因此，类组件的render方法会运行两次。
相比之下，函数组件没有实例化的过程，它只是执行函数体并返回一个React元素。函数组件在每次渲染时都会执行函数体，但不会像类组件那样经历挂载和更新阶段。因此，函数组件只会运行一次。
总结起来，类组件运行两次是因为它们经历了实例化、挂载和更新阶段，而函数组件只运行一次是因为它们没有实例化的过程，只是执行函数体并返回结果。
相关·内容
我搞不懂为什么当状态发生变化时，函数组件(非类组件不会与functional混淆)会被构造两次？
我的理解是，函数只构造一次，就像类的组件构造函数一样？
注意：未在严格模式下运行。
样本代码：
index.js:
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, // notice no strict mode
rootElement
);
示例1: LogStatement曾被称为“简单而明显的”：
function App1() {
console
浏览 3提问于2020-12-10得票数 0
回答已采纳
为什么响应钩子Axios调用两次..。即使是装上子弹的支票？
我已经习惯了this.setState，但是我试着理解为什么它会在我的控制台日志中出现两次。
我的代码：
import React, { useState, useEffect } from "react";
import axios from "axios";
const App = () => {
const [users, setUsers] = useState({ results: [] });
const [isLoading, setIsLoading] = useSta
浏览 1提问于2019-05-29得票数 4
回答已采纳
上下文
我已经构建了一款应用程序，可以在react中将outlook帐户中的邮件呈现到网页中。我正在尝试将一个“已查看”的布尔值设置为redux store提供的类属性，并在组件中对其进行更改(该更改必须影响redux才能管理整个应用程序的更改)
问题
正如你可能在下面的代码中看到的，我用redux reducer中的给定信息启动了构造函数中的实例变量，我已经用一堆控制台日志测试了动作创建器是否成功地更新了存储上的信息，它确实做到了。我的问题是我的实例变量(this.viewed)没有使用redux的reducer信息进行更新(实际上是更新)
import React from "re
浏览 10提问于2020-05-19得票数 0
回答已采纳
最近，我对函子感到兴奋，并在各地使用它们。然后出现了这样的情况:我需要我的函子执行两种不同的操作，并且我考虑向函子中添加另一种方法(而不是重载()运算符)。这是否是不好的做法，我不确定(也许你可以告诉我)，但它让我思考为什么我使用函子在第一，而不仅仅是对象。所以我的问题是：
重载()运算符是否有什么特别之处，还是它在语法上比使用普通命名方法更有吸引力？
更新：
首先，我知道为什么函子可能比函数指针更可取，就像在其他问题中解释的那样。我想知道为什么它们比具有命名方法的对象更可取。
其次，关于我想使用另一种可能命名的函子方法的例子:基本上我有两个函数，一个计算一个图分区的模块化- compute_
浏览 4提问于2011-04-05得票数 7
3回答
每个角( 表示ngOnInit是在指令的数据绑定属性第一次被检查之后，在检查它的任何子程序之前调用的。)在实例化指令时只调用一次。),
因此，应该只调用一次ngOnInit，但正如中所示(这是来自的副本)，我只修改了应用程序/英雄/英雄。
当打开F12 (Developer )时，控制台会在路由更改时反复显示日志。
我看上去像，，，
但不明白为什么每次都打电话给ngOnInit。
console.log("ngOnInit in All Heroes");
console.log("ngOnInit InDashBoard");
浏览 6提问于2018-01-04得票数 4
2回答
我正在浏览React ，并看到了这个示例，在这个示例中，它们展示了什么是不纯的组件。
我无法理解的是，在第5行中，我们将guest变量递增1，但是为什么每次调用<Cup />函数时它都会增加2，因为它是在右边呈现的？
浏览 29提问于2022-07-26得票数 0
回答已采纳
最近，我在上为练习编写了一个解决方案，当我通过运行这个函数时
\c -> isDigit c || c == 'X'
我回来了：
liftM2 (||) isDigit ('X' ==)
为什么pointfree.io从Control.Monad选择liftM2而从Control.Applicative选择liftA2
浏览 0提问于2018-03-29得票数 2
回答已采纳
2回答
这起作用的关键原因是，for_each ()实际上并没有假定是它的第三个参数为函数。它只是假定它的第三个参数可以用适当的参数调用。一个适当定义的对象不仅服务于--而且往往比--功能更好。例如，内联类的应用程序运算符要比内联作为函数指针传递的函数容易。因此，函数对象通常比普通函数执行得更快。带有应用程序运算符的类的对象(§11.9)称为类函数对象、函子或简单的函数对象。
Stroustrup，C++第3版，18.4-最后一段
我一直认为操作符()调用就像运行时的函数调用一样。它与正常函数调用有何不同？
为什么内联应用程序运算符比普通函数更容易？
它们如何比函数调用更快？
浏览 5提问于2010-10-14得票数 14
在我的项目中，有一些数据类型如下所示
data StructureA = StructureA [Int] Bool Int
data StructureB = StructureB [String] String
我的目标是在这些数据类型的实例中包含的数组上映射函数。
inst = StructureA [1,1,1] True 0
fmap (+1) inst -- [2,2,2]
我最初的解决方案如下所示
instance Functor StructureA where
fmap (StructureA arr _ _) = fmap arr
然而，我得到了类错配错误。
问题是
浏览 0提问于2018-05-23得票数 3
回答已采纳
1回答
lambda函数与函子
、、、
当我浏览lambda函数时，我看到人们将lambda与函子进行比较&我遇到了一种说法。
用户不必在一些可访问的范围内用小函子干扰他们的代码。
我的怀疑是
在某些可访问范围内有小函子的问题是什么？
拥有一个函数(实际上是函子)，并在我们的项目中跨多个文件重用它，这不是一个好主意吗？
谢谢。
浏览 2提问于2016-05-13得票数 3
当oldRunIn为undefined时，以下代码的输出与触发效果时所期望的一样：
效果正在运行
setState正在运行
但是，下次useEffect使用定义的状态变量runInArrow (在setState函数中称为oldRunInArrow )运行时，输出是：
效果正在运行
setState正在运行
setState正在运行
setState正在运行
怎么可能效果只运行一次而setState运行3次呢？
const [runInArrow, setRunInArrow] = useState<mapkit.PolylineOverlay[] | undefined
浏览 6提问于2020-02-19得票数 3
回答已采纳
如果我在应用程序根部的组件中使用预加载函数，它为什么从来不运行？从，我认为这曾经是一个bug，但被修复了。
所以我很难理解为什么这是不能运行的：
_layout.svelte
import someComponent from 'someComponent.svelte';
<someComponent />
someComponent.svelte
<script context="module">
export async function preload({ params, query }) {
console.log
浏览 5提问于2020-10-23得票数 0
回答已采纳
我是哈斯克尔的新手，试着理解函子。我从Data.Either模块获取了以下代码(用Either1替换数据)。我刚刚更新了删除'Either1 a‘，并将其替换为'Either1’(实例函子Either1 where)。
data Either1 a b = Left1 a | Right1 b
instance Functor Either1 where
fmap f (Left1 x) = Left1 x
fmap f (Right1 y) = Right1 (f y)
当我试图加载上面的片段时，我会得到以下错误。
Prelude> :load Sam
浏览 4提问于2016-04-22得票数 3
回答已采纳
1回答
我正在学习一个教程，并且刚刚了解到了useEffect。我的问题是我想要得到result.hours[0].is_open_now。我发现组件呈现了两次，而且由于一开始没有定义，所以它会失败。
有没有办法让它只运行一次。
const ResultsShowScreen = ({ navigation }) => {
const id = navigation.getParam('id');
const [result, setResult] = React.useState({})
const getResult = async (id) =&
浏览 1提问于2019-10-28得票数 0
回答已采纳
1回答
对模板和函数指针的理解
、、、
我想知道为什么必须将fun1()作为静态成员函数？模板中的函数指针？在下面的代码中。
#include<iostream>
using namespace std;
class A
{
int temp;
public:
A():temp(1){}
template<class T, void (*fn)(T* )>
static void create(T *ptr)
{
cout <<"create fn"<<endl;
//fun1(pt
浏览 2提问于2017-12-07得票数 0
4回答
import { useContext, useEffect, useState } from 'react';
const Log = () => {
useEffect(() => {
console.log('Running ...')
},[])
return(<p>here</p>)
}
export default Log;
每当这些代码运行时，我就会让在浏览器控制台中运行两次.消息。
我认为它应该运行一次，因为我在useEffect中有一个空的第二个参数。
浏览 13提问于2022-05-24得票数 6
我在我的前端使用了一个select-tag从数据库中检索某一类型的电影。它是通过angular 4和mongodb完成的。前端如下所示：
<select name="select" id="selectGenre" (click)="clearSearch()" (change)="getGenres()" [(ngModel)]="wantGenre">
<option value="null" disabled="true" [selected]
浏览 3提问于2017-11-22得票数 0
1回答
嗨，我有一个简单的知识库，定义为：
carClass('X1','Oil','small').
carClass('X2','gas','big').
carClass('X3','Petrol','big').
carClass('X4','oil','small').
carClass('X5','Oil','small').
carClass('
浏览 1提问于2016-01-03得票数 1
回答已采纳
23回答
我试图创建新组件ResultComponent，但是它的ngOnInit()方法被调用了两次，我不知道为什么会发生这种情况。在代码中，ResultComponent从父组件mcq-component继承@Input。
以下是代码：
父组件(MCQComponent)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'mcq-component',
template: `
<div *ngIf = 'isQuestio
浏览 0提问于2016-08-05得票数 80
回答已采纳
2回答
我不知道为什么console.log()在运行我的应用程序时会执行两次？
import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import SearchBar from '../components/SearchBar';
import useResults from '../hooks/useResults';
import ResultsList from '
浏览 6提问于2021-10-03得票数 0
回答已采纳
1回答
我有一个App class组件，它是两个孩子的父组件: Table和BarChart。 我希望将来自表的数据数组传递给BarChart组件(重图库)。 为此，数据从表到应用程序，然后从应用程序到BarChart。 当Table状态改变时，App中的数据确实会更新(状态作为prop和回调函数传递)： Table.js： const Table = function CustomEditComponent(p) {
const { useState } = React;
const [columns, setColumns]= useState([
{
tit
浏览 42提问于2021-11-17得票数 1
我想知道在Scala中应用函数式编程风格是否是一个很好的实践，即使它是一个简单的开关用例工作流。
例如：
方案1：
def myMethod1():Unit = {
....
}
def myMethod2():Unit = {
...
}
def execFunc(myMethod: Unit=>Unit): Unit ={
myMethod(...)
}
def main((args:Array[String]) {
if(args(0) == "1")
{
execFunc(myMethod1)
浏览 0提问于2018-03-16得票数 0
回答已采纳
2回答
我目前正在阅读。在第51页。他在其中一个脚注中说：
虽然在构造函数中设置的字段值似乎是写入这些字段的第一个值，因此不存在将其视为陈旧值的“旧”值，但在子类构造函数运行之前，对象构造函数首先将默认值写入所有字段。因此，可以将字段的默认值视为陈旧值。
因此，我现在还不清楚最后领域的概念。考虑示例类：
public class MyClass{
private final MyImmutableClass mic;
public MyClass(){
mic = MyImmutableClass.empty();
}
}
根据上面的脚注，mic字段被
浏览 3提问于2015-12-28得票数 2
回答已采纳
我正在尝试执行DAO测试，所以我希望Spring构建实现，所以我有了这个测试：
@RunWith(SpringJUnit4ClassRunner.class)
@SpringApplicationConfiguration(classes = FakeServiceRunner.class)
public class ClientDAOTests {
@Autowired
private ClientDAO dao;
@Test
public void testFindAllClients() {
....
Page<C
浏览 2提问于2015-05-26得票数 0
回答已采纳
我目前正在使用react项目，它从api中获取数据并显示在控制台上。
虽然我只在console.log挂钩中编写了useEffect ()一次(与文章的依赖关系)，但web浏览器的console.log总是显示console.log两次，如下所示：
但我不知道为什么..。
在我的思想中，当第一个useEffect钩子设置的“文章”状态时，第二个useEffect钩子激活，console.log只运行一次。但事实并非如此。
这是我的密码
const NewsList = () => {
const [articles, setArticles] = useState([]);
浏览 7提问于2022-08-31得票数 3
回答已采纳
2回答
我在这方面已经有一段时间了，我不能理解它。我觉得自己好傻。有人能告诉我出了什么问题吗？
控制台日志当前有效，对象的console.log表示状态已由false更新为true。
class ChoiceBar extends React.Component {
constructor() {
super();
this.state = {
handleFirstQuestion: false,
};
this.handleFirstQuestion = this.handleFirstQuestion.bind(this)
}
handl
浏览 0提问于2021-06-02得票数 0
1回答
非常简单的示例:我的App.js文件读取
import React from 'react';
import Test from './component/Test';
function App() {
return (
<div className="App">
<Test/>
</div>
)
}
export default App;
我的Test.js文件读取
import React, { Component } from 'react'
cl
浏览 1提问于2020-06-25得票数 0
回答已采纳
考虑将可调用类模板作为模板参数传递给某个类。下面有三种方法，但只有函子一起作用。
由于无法充当类模板，朴素模板函数失败；然而，为什么C++20熟悉的模板lambda失败？
template <typename T>
T SomeFunc() {
return T{};
}
template <typename T>
struct SomeFunctor {
T operator()() const { return T{}; }
};
auto SomeLambda = []<typename T>() { return T{}; };
浏览 10提问于2022-02-27得票数 -2
我们有一个相当大的osgi应用程序，它由大约80个自定义服务包组成，在运行时还有20到30个第三方包依赖项(我们运行的是R7风格的osgi)。当我们开始这个项目时，我们通常会使用带有@Reference注解的服务的字段注入，没有任何问题，但现在，我们越来越多地看到这些注入的依赖项有时随机出现为null -我们发现的解决问题的一种方法是用服务的方法注入替换字段注入。
我注意到的是，注入的服务通常出现null是在我们的组件服务中，这些服务实际上只是带有@Component注释的Java类，但不实现"ProviderType“或"ConsumerType”接口(我们的REST端点如下
浏览 0提问于2018-12-14得票数 0
3回答
在javascript类constructor()中获取数据是一种好的做法吗？
例如，在react类constructor()中，我找到的每个教程都在componendDidMount()中获取数据，但没有人质问为什么我们不能在constructor()中这样做。
这个问题与javascript类有关，不仅仅是react。
浏览 3提问于2019-03-15得票数 13
1回答
它是我的角度控制器
var app=angular.module('app',[]);
app.controller('myCtrl', function ($scope,$http) {
console.log($scope.add)
$scope.asd = function (data)
{
$http({
url: '/Home/My',
method: "GET",
data: data
});
}
//console.log($s
浏览 1提问于2016-06-15得票数 0
回答已采纳
尝试编写一个测试来确保handleClick()被调用，但我得到了以下错误：TypeError: Cannot read property '_isMockFunction' of undefined。
下面是我正在测试的组件(主要是)，以及我正在使用Jest和Enzyme运行的测试代码。
import React from 'react';
import localize from '../data/Localize';
import translations from './translations';
class Cate
浏览 2提问于2017-10-14得票数 1
class B {
{
System.out.println("IIB B");
}
B(int i) {
System.out.println("Cons B int");
}
public B() {
this(10);
System.out.println("Cons B");
}
}
public class C extends B {
{
System.out.println("II
浏览 6提问于2014-02-28得票数 5
回答已采纳
我有一个奇怪的认证问题与反应。
当用户登录时，authentication prop设置为true。如果用户试图进入一个路由，而身份验证是未定义的或假的，那么我将他们推回登录页面。
目前的情况如下：
PersonId组件
componentWillMount() {
console.log("MOUNTING PERSON ID COMPONENT IF AUTHENTICATED IS TRUE", this.props.authenticated)
if (!this.props.authenticated) {
browserHisto
浏览 5提问于2017-04-05得票数 1
回答已采纳
我正在分析siebel日志，我发现每个查询都在日志中运行两次。有人能告诉我为什么会发生这种事吗？
例如，下面的查询是我发现在日志中执行了两次的许多查询之一
SELECT /*+ ALL_ROWS */
T2.CONFLICT_ID,
T2.LAST_UPD,
T2.CREATED,
T2.LAST_UPD_BY,
T2.CREATED_BY,
T2.MODIFICATION_NUM,
T2.ROW_ID,
T1.BU_ID,
T2.MULTI_LINGUAL_FLG,
:1
FROM
SIEBEL.S_LST_OF_VAL_BU T1,
S
浏览 2提问于2015-05-13得票数 0
回答已采纳
我有两个按钮(“批准”、“不批准”)和一个加载旋转器的图像。默认情况下，将显示“批准”按钮，并隐藏“不批准”按钮和加载旋转图像。
当单击“批准”按钮时，我希望它消失，显示加载旋转器，然后执行ajax请求。在请求完成后，我希望加载旋转图像再次被隐藏。如果ajax请求成功，我希望显示“不批准”按钮。如果ajax请求失败，我希望“批准”按钮再次显示。
我遇到的问题是，在ajax请求完成后，我的.always()方法将运行，但旋转器映像不会隐藏。下面是一个示例：
如果我更改ajax请求的url以给我一个404未找到的错误，这个过程的工作方式应该是：
有人知道为什么在我的第一个例子中，spinner
浏览 9提问于2016-02-12得票数 0
回答已采纳
5回答
为什么函数类没有返回函数？
、、、、
从范畴的角度来看，函子是两个映射对(一个在对象之间，另一个在类别的箭头之间)，遵循一些公理。
我假设，每个函子实例都类似于数学定义，即可以同时映射对象和函数，但是Haskell的Functor类只有映射函数的函数fmap。
为什么会这样呢？
换句话说，UPD：
每个Monad类型的M都有一个函数return :: a -> M a。
而函子类型F没有函数return :: a -> F a，只有F x构造函数。
浏览 7提问于2014-02-08得票数 20
回答已采纳
2回答
我对功能组件非常陌生，我已经研究了几个小时了。我只是想把一个支柱从父函数组件传递给类子组件，这样我就可以使用更新的支柱(它将是一个布尔值)来更改元素的显示。就这样。
在这个场景中，我想根据道具将sidenav从打开切换到关闭。
以下是父组件(功能)：
let opened = false;
function openSidenav(){
opened = !opened;
}
const [sidebarOpened, setOpened ] = useState(opened);
return (
<Sidebar side
浏览 6提问于2020-05-25得票数 2
回答已采纳
请注意，我刚刚开始学习Angular 9：
我正在尝试使用递归组件创建一个树。在每次递归调用时，组件都会在@input上获取一个不同的对象，然后使用ngOnChanges进行一些计算并更新该对象。
第一次生成树是很好的，但是当生成第二次和更多次时，值会成倍增加。据我所见，项对应值保留了在ngOnChanges()上更改的上一代树的值
下面是代码:递归组件ts
import { Component, Input, OnChanges } from '@angular/core';
import { IItem, IComponent } from 'src/app/ite
浏览 1提问于2020-03-21得票数 0
1回答
我的应用程序中有一个mods页面，只有版主和管理员才能访问。如果一个人试图通过直接输入URL来访问它，我有一些逻辑可以重定向他们。
import { useHistory } from "react-router";
import createNotification from "../../../addNotification";
import getRole from "../../../authentication";
const ModHome = () => {
const history = useHistory();
浏览 3提问于2021-11-24得票数 0
回答已采纳
为什么我们不在std::generate (myvector.begin(), myvector.end(), RandomNumber)中添加运算符()？就像这样：std::generate (myvector.begin(), myvector.end(), RandomNumber())。
摘自cplusplus的代码：
int RandomNumber () { return (std::rand()%100); }
int main () {
std::srand ( unsigned ( std::time(0) ) );
std::vector<int>
浏览 1提问于2020-05-31得票数 1
回答已采纳
1回答
在ApplicationComponent引用的模块中，有如下定义的MainActivity注入器：
@PerActivity
@ContributesAndroidInjector(modules = MainActivityModule.class)
abstract MainActivity mainActivityInjector();
贡献者引用的MainActivityModule如下所示：
@Module
public class MainActivityModule {
@Provides
@PerActivity
public MyActivityD
浏览 0提问于2017-08-22得票数 0
在Prolog中定义了两个运算符：
op(100, xfy, #).
op(100, fy, ϴ).
表达方式是什么？
a # ϴ b # c
相当于？
a # ϴ (b # c)
或者也许
a # ((ϴ b) # c)
为什么？
浏览 0提问于2017-05-20得票数 3
回答已采纳
我不明白ref系统在反应钩子中的潜在行为。
据我所知，useRef将创建一个常量对象，在每个呈现过程中，只有当前属性会更改。
我原以为createRef的行为也是一样的，但显然不是这样的：
此代码正在创建一个无限循环。
import React from "react";
export default function App() {
const [count, setCount] = React.useState(0)
const ref = React.createRef()
React.useLayoutEffect(() => {setCount(c
浏览 4提问于2020-08-06得票数 0
回答已采纳
3回答
响应JS重呈现
、、
当一个组件由于调用useState返回的状态设置器函数而重新呈现时，整个函数组件是再次被调用还是只调用了该函数组件的一部分？
function MyComponent() {
let [count, setCount] = useState(0);
const handleChange = () {
setCount((prevCount) => prevCount+1)
}
return (
<p onClick={handleChange}>
Count = {count}
</p>
)
}
在上
浏览 10提问于2022-07-14得票数 0
我正在试验STL算法，更具体的是使用for_each函数。我尝试了一个简单的用例来连接字符串向量。请注意，这可能不是一个好的和/或有效的代码。如果您真的想连接字符串向量，请看boost::algorithm::join函数。
#include <iostream>
#include <string>
#include <vector>
#include <algorithm>
#include "concatenator.h"
using namespace std;
int main(int argc, char **arg
浏览 7提问于2010-11-17得票数 1
我在做一个定时器在丹齐的游戏里。当用户单击按钮时，onClick函数将isTimerActive状态设置为true，最初为false，tenzie状态也为false，当用户完成游戏时，tenzie状态集设置为true。
React.useEffect(() => {
let timer = null;
if(isTimerActive && !tenzie){
timer = setInterval(() => {
setTime(prevSecond => prevSecond +
浏览 4提问于2022-06-15得票数 0
1回答
我试着遵循这个教程：
我使用了加载到ghci中的以下代码：
{-# LANGUAGE RankNTypes, ScopedTypeVariables #-}
import Control.Applicative
import Data.Functor.Identity
import Data.Traversable
-- Define Lens type.
type Lens s t a b = forall f. Functor f => (a -> f b) -> s -> f t
type Lens' s a = Lens s s a a
--
浏览 0提问于2014-12-10得票数 3
回答已采纳
1回答
我经常看到它，我想知道它的作用/目的。
重载操作符()是做什么的？
为什么人们通常会超载这个接线员？
示例
std::vector<double> operator()(int seed) const;
谢谢!
浏览 1提问于2019-10-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
