Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么useState导致dom呈现两次

问为什么useState导致dom呈现两次
EN

Stack Overflow用户

提问于 2020-04-08 17:35:47

回答 3查看 623关注 0票数 4

我有一个简单的hello-world示例来尝试useState钩子；但是，当我在控制台中输出测试信息时，我发现每当我启用useState时，控制台日志就会记录到信息的两倍。

参见示例 in CodeSandbox (控制台中显示了调试信息)。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-04-08 17:52:35

控制台语句在函数体中，React将在每次呈现时执行函数体。

在组件挂载上，由于init状态为空，控制台将打印一个空字符串。
在更新组件挂载上的状态时，React将再次执行函数体，然后用更新的值记录状态。

在使用React.StrictMode时，它可以多次呈现组件。这就是您多次看到控制台日志的原因。提交阶段通常非常快，但呈现可能很慢。因此，即将到来的并发模式(默认情况下尚未启用)将呈现工作分解为碎片，暂停并继续工作，以避免阻塞浏览器。这意味着React可以在提交之前多次调用呈现阶段生命周期，或者它可以在不提交的情况下调用它们(因为错误或优先级较高的中断)。呈现阶段生命周期包括以下类组件方法：

构造器
1. componentWillMount (或UNSAFE_componentWillMount)
2. componentWillReceiveProps (或UNSAFE_componentWillReceiveProps)
3. componentWillUpdate (或UNSAFE_componentWillUpdate)
4. getDerivedStateFromProps
5. shouldComponentUpdate渲染
6. setState更新函数(第一个参数)

，因为上面的方法可能不止一次调用，所以它们不包含副作用是很重要的。忽略此规则会导致各种问题，包括内存泄漏和无效的应用程序状态。不幸的是，很难发现这些问题，因为它们往往是不确定的.

您可以阅读更多关于React.StrictMode 这里的内容。

票数 4

EN

Stack Overflow用户

发布于 2020-04-08 17:48:44

您的index.js有带有React.StrictMode的应用组件包装器。

这就是导致它的原因。

票数 1

EN

Stack Overflow用户

发布于 2020-04-08 17:44:29

useEffect异步运行，所以在开始时，首先将呈现组件作为其正常行为，然后useEffect运行，正如我们所知，每个setState将导致组件重新呈现，这是第二次，这就是为什么您看到它记录两次

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61112615

复制

相关文章

CUDA 04 - 同步

深度学习其他

栅栏同步是一个原语, 在很多并行编程语言中都很常见. 在CUDA中, 同步可以在两个级别执行:

Reck Zhang

2021/08/11

7380

CUDA编程.内核调用

ansi block host thread 内核

首先我说一下什么叫内核，这里的内核很狭义就是ANSI C关键字+CUDA扩展关键字编写的设备代码~

云深无际

2021/03/12

9380

同步调用与异步调用

ajax https java 网络安全

同步调用：提交完任务后，就在原地等待任务执行完毕，拿到运行结果/返回值后再执行下一步，同步调用下任务是串行执行。

全栈程序员站长

2022/09/08

1.2K0

聊聊内核的数据同步

内核中同步、交换、回收简要说明同步、换出、回收三个操作的最小的单位是以页帧为单位，并且和磁盘文件系统操作紧密相关。比如一些针对文件的page缓存进行修改时候在一定时候需要把数据刷到后端的磁盘文件系统，这过程就是同步；进程的堆、栈、匿名映射区通过交换把这些数据换出到交换文件中，这个就是交换(换出)，当这些数据再次需要访问时候，就从交换文件中读取加载到内存中;回收操作涉及到物理页的使用问题，比如一个文件的两个dirty page数据flush到磁盘文件系统后，这个2个page回收到buddy系统已备侯勇。同

用户4700054

2022/08/17

6360

Windows内核原理-同步IO与异步IO

在前段时间检查异常连接导致的内存泄漏排查的过程中，主要涉及到了windows异步I/O相关的知识，看了许多包括重叠I/O、完成端口、IRP、设备驱动程序等Windows下I/O相关的知识，虽然学习到了很多东西，但是仍然需要自顶而下的将所有知识进行梳理。

用户6786055

2019/12/16

1.8K0

linux内核同步机制

linux 编程算法

关于同步理论的一些基本概念临界区（critical area）: 访问或操作共享数据的代码段简单理解：synchronized大括号中部分（原子性）竞争条件（race conditions）两个线程同时拥有临界区的执行权数据不一致：（data unconsistency）由竞争条件引起的数据破坏同步（synchronization）避免race conditions 锁：完成同步的手段（门锁，门后是临界区，只允许一个线程存在）上锁解锁必须具备原子性原子性（象原子一样不可分割的操作）有序

lovelife110

2021/01/14

2K0

Linux内核24-内核同步理解

我们可以把内核想象成一个服务器，专门响应各种请求。这些请求可以是CPU上正在运行的进程发起的请求，也可以是外部的设备发起的中断请求。所以说，内核并不是串行运行，而是交错执行。既然是交错执行，就会产生竞态条件，我们可以采用同步技术消除这种竞态条件。

Tupelo

2022/08/15

1.1K0

Linux内核37-内核数据的同步访问

linux 数据结构

每一种技术的出现必然是因为某种需求。正因为人的本性是贪婪的，所以科技的创新才能日新月异。

Tupelo

2022/08/15

9300

DAY40:阅读Memory Fence Functions

The CUDA programming model assumes a device with a weakly-ordered memory model, that is the order in which a CUDA thread writes data to shared memory, global memory, page-locked host memory, or the memory of a peer device is not necessarily the order in which the data is observed being written by another CUDA or host thread.

GPUS Lady

2018/08/01

7710

DAY40:阅读Memory Fence Functions

DAY11：阅读CUDA异步并发执行中的Event和同步调用

今天内容比较简单，讲解Events和同步调用。自此，关于异步并发执行部分的1.主机与GPU之间的并发执行；2.内核并发执行；3.数据传输和内核执行之间的重叠；4.并行数据传输；5.Stream；6.Event；7.同步调用就全部讲完。 3.2.5.6. Events【事件】 The runtime also provides a way to closely monitor the device's progress, as well as perform accurate timing, by le

GPUS Lady

2018/06/22

2.8K1

Linux内核38-内核同步实际例子

linux 编程算法

要想一个系统不崩溃，性能还得好，同步技术是非常关键的。但是，完全避免竞态条件几乎是难于上青天。因为它要求对内核各个功能模块之间的交互得有一个清晰深刻的理解。下面我们看一下Linux内核中一些具体保护数据访问的示例，加深对其理解，甚至可以在自己的内核设计上借鉴一下。

Tupelo

2022/08/15

6580

同步调用和异步调用

对于同步与异步来说，好多人与我在初学的时候一样，肯定是一脸蒙x。不过没关系，慢慢来，我将我见到和理解的和大家分享一下，希望对大家有所帮助。

小闫同学啊

2019/07/18

1.5K0

linux 内核同步机制使用

Linux 内核中的同步机制：原子操作、信号量、读写信号量、自旋锁的API、大内核锁、读写锁、大读者锁、RCU和顺序锁。 1、介绍在现代操作系统里，同一时间可能有多个内核执行流在执行，即使单CPU内核也需要一些同步机制来同步不同执行单元对共享的数据的访问。主流的Linux内核中的同步机制包括：原子操作信号量（semaphore）读写信号量（rw_semaphore）自旋锁spinlock 大内核锁BKL(Big Kernel Lock) 读写锁rwlock、 brlock（只包含在2.4内核中

李海彬

2018/03/22

2.4K0

Java中的线程同步与同步器

java 多线程线程线程安全

# [AI文本 OCR识别最佳实践](https://cloud.tencent.com/developer/article/2304343)

疯狂的KK

2023/08/14

2770

android账号与同步之同步实现

访问管理 xml android

上一篇博文我先介绍了账号与同步的账号管理，这篇就介绍一下还有一部分。就是android给提供的sync同步机制的使用。事实上sync机制的使用和上一篇博文中介绍的账号管理非常类似，也是基于binder机制的跨进程通信。首先它须要一个Service。这个服务提供一个Action给系统以便系统能找到它。然后就是继承和实现AbstractThreadedSyncAdapter。此类中包括实现了ISyncAdapter.Stub内部类。这个内部类封装了远程接口调用，这个类getSyncAdapterBinder()方法，返回内部类的IBinder形式，以便对AbstractThreadedSyncAdapte进行远程调用；在manifest中须要对Service注冊，并且指定meta-data。这个meta-data是一个xml文件，在SampleSyncAdapter实例中，它的名字是syncadapter.xml，这个文件指定了账号和被监听的contentprovider。

全栈程序员站长

2022/07/10

1.3K0

Linux内核36-内核同步之禁止中断

数据结构单片机汇编语言

每一种技术的出现必然是因为某种需求。正因为人的本性是贪婪的，所以科技的创新才能日新月异。

Tupelo

2022/08/15

1.5K0

同步与异步

python io 事务同步异步

一、同步与异步的概念前言 python由于GIL（全局锁）的存在，不能发挥多核的优势，其性能一直饱受诟病。然而在IO密集型的网络编程里，异步处理比同步处理能提升成百上千倍的效率同步指完成事务的逻辑，先执行第一个事务，如果阻塞了，会一直等待，直到这个事务完成，再执行第二个事务，顺序执行异步是和同步相对的，异步是指在处理调用这个事务的之后，不会等待这个事务的处理结果，直接处理第二个事务去了，通过状态、通知、回调来通知调用者处理结果说明假设用户访问一个网站并得到响应的时间

星哥玩云

2022/09/08

9710

blob转string，同步调用

blob string 后端接口同步

前端接口请求的时候，设置responseType: 'blob'，后端接口直接返回的是文件流。

甜点cc

2023/10/16

2520

linux内核级同步机制--futex

在面试中关于多线程同步，你必须要思考的问题一文中，我们知道glibc的pthread_cond_timedwait底层是用linux futex机制实现的。

李红

2019/07/29

3.3K0

Linux内核同步机制之completion

Linux内核同步机制之completion 内核编程中常见的一种模式是，在当前线程之外初始化某个活动，然后等待该活动的结束。这个活动可能是，创建一个新的内核线程或者新的用户空间进程、对一个已有进程的某个请求，或者某种类型的硬件动作，等等。在这种情况下，我们可以使用信号量来同步这两个任务。然而，内核中提供了另外一种机制——completion接口。Completion是一种轻量级的机制，他允许一个线程告诉另一个线程某个工作已经完成。结构与初始化 Completion在内核中的实现基于等待队列（关于等待队

233333

2018/07/03

4.2K0

相似问题

Keras输入形状误差

10

输入形状Keras问题

20

请用Keras解释输入形状。

10

返回错误的Keras输入形状

20

输入形状卷积神经网络的误差

10

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例