定时器和promise_useState 在定时器和promise中的执行问题

最新推荐文章于 2023-02-14 09:25:44 发布
最新推荐文章于 2023-02-14 09:25:44 发布
阅读量818 收藏
点赞数
文章标签： 定时器和promise
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_29978783/article/details/114016890
版权
本文探讨了在React应用中，当useState的更新被包含在Promise和setTimeout中时，为何会导致两次渲染，而直接调用则只触发一次渲染的问题。通过代码示例，展示了不同情况下的渲染行为差异。
摘要由CSDN通过智能技术生成

21726796f606e0afe90b70330ec7433a.png

为什么 setLoading 和 setSecond 在Promise和setimeout中执行会分别出发两次render，而直接调用的话只会触发一次render

注明： 这里去除useEffect执行前的首次渲染

效果如下

bed21e73c56a71bc4d3eb22e2ddae142.png

代码：function App() {

const ref = useRef(0)

const [loading, setLoading] = useState(true);

const [second, setSecond] = useState([]);

useEffect(() => {

console.log('useEffectuseEffectuseEffect')

setLoading(true)

/**

* 包含在Promise和setTimeout中

* 执行setLoading和setSecond会分别执行两次渲染

*/

Promise.resolve().then(() => {

console.log('Pr

最低0.47元/天 解锁文章
萝魏紫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React useState与定时器一起用，如何解决刷新List属性不显示的问题，请参考，实测可行。
xglinux的博客
09-23 1036
1.useRef 引用定时函数 2. useEffect(() => { callback.current = callBack; return () => {}; }); 3.setList(oldList=>{ newList=oldList.slice() //修改属性 return newList ) import React, {useEffect, useRef, useState} from 'react'; const Test: React.FC = () =>
useState执行机制
Gleason
02-08 1743
使用 react hooks 很久了，对于 useState 的理解一直都是模糊不清，终于下定决心把它理清楚，看似简单的 useState 暗藏玄机，先来看一段代码 import { useState } from 'react'; console.log('函数外'); const HomePage = () => { console.log('函数内 顶部'); const [num, setNumber] = useState(0); const [count, setCount] =
项目经验：react中使用typescript
weixin_44828005的博客
08-16 720
前言 如果你学会了，可以忽略本文章，或去项目经验地图寻找更多答案 使用规则 在 react 中使用 ts 的几点原则和变化： 所有用到jsx语法的文件都需要以tsx后缀命名 使用组件声明时的Component<P, S>泛型参数声明，来代替PropTypes！ 全局变量或者自定义的window对象属性，统一在项目根下的global.d.ts中进行声明定义 对于项目中常用到的接口数据对象，在types/目录下定义好其结构化类型声明 函数组件 import React from 'react
震惊! React中三个方法获取setState更新之后的state !其中一个竟用到Promise!
lanadeus
08-18 1万+
问题的诞生React的setState方法是个异步方法.所以,若是在setState之后立即访问state,往往是不能得到更新之后的state值的.试看如下代码:class Orz extends Component{ constructor(props){ super(props); this.state = { value:1, } } compo
React函数组件最重要的Hook之一useState操作与原理分析
前端攻城狮Dannis
04-17 8193
State Hook State Hook是一个在函数组件中使用的函数, 该函数名字是useState, 用于在函数组件中提供状态 让React的函数组件能够像类组件一样拥有state useState函数有一个参数, 这个参数的值表示状态的默认值 在我们引入react的时候顺带先引入一下stateHook import React, { useState } from 'react'; us...
定时器和promise_Promise 与定时器
weixin_39637711的博客
01-17 1198
ECMAScript 6 的 Promise 是一个非常重要的特性，有了它，JavaScript 异步嵌套的问题算是得到了比较好的解决。同时，Promise 也是 ES7 中 async/await 的基础。介绍 Promise 基础的文章已经非常多了，在这里就不再讲解 Promise 本身的用法。本文主要介绍利用 Promise 的特性改良异步 Timer 的一种思路。在产品中，异步加载资源的时...
定时器和promise_浅析setTimeout与Promise
weixin_29146477的博客
02-12 754
关于JavaScript异步编程，前文解析过了JavaScript并发模型，该并发模型基于事件循环。正好在Stackoverflow上回答了一个关于setTimeout与Promise执行顺序相关的问题，于是总结这一知识点，与更多读者分享，同时完善JavaScript异步编程系列文章。前言我们先看一到常见的前端面试题：var p1 = new Promise(function(resolve, r...
promise, 异步,同步,定时器的执行顺序
weixin_42011096的博客
08-31 2531
通常情况下,js的执行顺序是从上到下的, 但是遇到定时器以及异步的时候情况会有所不一样.这时候想要理解它,得用宏任务以及微任务来解释了.js异步执行的机制是遇到宏任务就先执行宏任务,接着执行所有的微任务.然后再次从宏任务开始,找到其中一个任务队列执行完毕,再执行所有的微任务.微任务包括Promise、MutaionObserver、process.nextTick；宏任务包括setTimeout、setInterval、I/O等 示例如下： console.log('js-start');
promise和定时函数执行顺序的面试题粗俗理解
wwqqaaa8552的博客
12-02 391
promise和定时函数的面试题粗俗理解
useState实现回调
酸酸的博客
03-07 6463
useState实现"回调" 团队最近从类组件转向函数式组件，遇到了一个问题就是无法在useState中设置回调方法。 react hook，官方将setState移除了回调方法，由于setState是异步方法，没办法直接在set后拿到最新的数据，所以我们可以通过以下两种方式来拿到更新后的值。 useEffect实现 const [count, setCount] = useState(0); const addCount = () => { setCount(count+1); };
问：React的useState和setState到底是同步还是异步呢？
最新发布
beifeng11996的博客
02-14 448
在正常的react的事件流里（如onClick等）setState和useState是异步执行的（不会立即更新state的结果）多次执行setState和useState，只会调用一次重新渲染render不同的是，setState会进行state的合并，而useState则不会在setTimeout，Promise.then等异步事件中setState和useState是同步执行的（立即更新state的结果）
useState用法指南
热门推荐
前端精髓
03-29 11万+
useState const [state, setState] = useState(initialState); 返回一个 state，以及更新 state 的函数。 在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。 setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。 setStat...
react-hooks的页面设置定时器
weixin_45315794的博客
01-11 2167
hooks页面设置定时器 在hooks中设置定时器时，设置变量储存定时器时最后用：const [timer, setTimer] = useState(null); 这样方式存储，否则会导致在使用完定时器，清除定时器，无法清除干净，定时器仍然还在，（特别是页面定时器） import React, { useState, useEffect, } from "react"; const ChallengeModal = (props) => { const [timesContent,
react技术分享----useState的原理及自定义useState的实现
m0_46694056的博客
01-24 4877
*前言： 本次分享将主要自定义实现useState为主，以通俗易懂的目的让大家了解useState实现的大体逻辑。 一、hook的价值： hook出现的意义是巨大的，在React Conf 2018 会议上，react团队的leader---- Sophie Alpert提出了三个class组件存在的问题（而hook的出现就是来解决这些的）： 逻辑复用问题：要逻辑复用，在class组件中无非是用高阶组件，或者render props来解决，但是如果项目庞大的话，就有可能造成组件层级过深，无限嵌套导致追
ReactNative 计时器组件 - RN
survivorsfyh的博客
03-28 1148
初识 ReactNative 正巧项目中遇到了一个计时器的需求，官方没有找到提供现成的组件便尝试着用钩子方式（useState、useEffect）简单封装了个小组件，具体如下： 首先，将时间进行转换处理并与钩子相互关联 const [span, setSpan] = useState(Math.floor((Date.now() - new Date(start.replace(/-/g,...
useEffect进阶指南（下）
weixin_47352287的博客
03-22 390
React的内部更新机制？ <h1 class="name">我的名字是：Kyrie</h1> <h1 class="name">我的名字是：IRVING</h1> React也跟vue有着Diff算法，它每次render只会更新与上一次渲染不同的节点和内容，所以上面的例子，React只需要这样做： h1.innerText = Kyrie -> h1.innerText = IRVING 那useEffect呢？ function Demo() {
React进阶用法和hooks的个人使用见解(Typescript版本) - 2.hooks的useState、useEffect、自定义钩子的实际使用
mackJun的博客
08-17 1万+
2.hooks的useState、useEffect的实际使用（Typescript） 从React16.8版本的hooks正式发布，hooks的使用是越来越火，从而出现了许多使用无状态组件(函数)+hooks替代有状态组件(类)来书写React组件的热潮，但是由于一些实际运用还有些缺乏，接下来介绍一下useState、useEffect两个hooks的一些简单使用吧 2.1 useState：官...
React useState用法指南
skysys的研究小屋
08-25 3023
useState const [state, setState] = useState(initialState); 返回一个 state，以及更新 state 的函数。在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。 setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。 setState(newState); 在后续的重新渲染中，useState 返回的第一个值将始终是更新后最新的 state。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值