[笔记]记录react native 事件处理顺序（settimeout,promise,then,手势事件）

最新推荐文章于 2022-04-03 15:57:44 发布
最新推荐文章于 2022-04-03 15:57:44 发布
阅读量309 收藏
点赞数
分类专栏： react native 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/loveseal518/article/details/115703783
版权

以下信息主要做笔记记录，未详细整理文字，仅供参考。

流程是我使用自定义的滑动杆组件，在抬起的事件中执行testEventLoop方法（代码见图3），抬起手指后，迅速再次拖动滑动杆，这时因为JS线程阻塞，导致需要等testEventLoop方法中代码全部走完，手势事件才会发给自定义组件，导致了较长时间的响应滞后。

第一步确认promise的then里面跑代码依然阻塞JS线程，影响手势事件的开始。

当我给promise加了await时，执行顺序时123，去掉await是132

定时器 在最后才跑

我是把InteractionManager.runAfterInteractions去掉后测得，如果加上这个方法，方法中的代码像是又增加了任务 ，会被推迟执行，promise中的runafterinteractions中的代码也会推迟到前面标记的3后面执行。

也是等then里面跑完 才会收到touches

也测试了then中InteractionManager.runAfterInteractions中的代码，也是会阻塞的.原因：这个代码块开始的时候  交互实际上还没开始

这个函数使里面的循环推迟约3毫秒执行

 

 

Zsama666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React-Native：用JavaScript Promise来顺序处理setTimeout
yu314092706的专栏
11-18 780
React-native进阶之Promise的异步处理
[React Native]Promise机制
weixin_33724059的博客
09-09 141
React Native中经常会看到Promise机制。 Promise机制代表着在JavaScript程序中下一个伟大的范式。可以把一些复杂的代码轻松撸成一个串，和Android中的rxjava非常像。 Promise代表一个任务结果，这个任务有可能完成，有可能没有完成。Promise模式唯一需要的一个接口是调用then方法，用来...
React Native项目运行流程
牛八少爷的专栏
08-26 1378
目录 1.创建新项目 2. 运行流程 3. 流程图 1.创建新项目 ## RNApp 项目名称 react-native init RNApp --version 0.55.4 参考：创建指定版本的react-native项目 2. 运行流程 1. run-android运行 react-native run-android run-android运行后从项目目录的node...
reactnative中父子组件中component执行顺序
scry丶坏坏的博客
10-09 900
React Native 中 component 生命周期参考：https://blog.csdn.net/ElinaVampire/article/details/51813677 test1.js import React, { Component } from 'react'; import { View, } from 'react-native'; import Test2 fr...
react-native fetch的具体使用方法
Quincylk的专栏
11-13 2155
原文：https://www.jb51.net/article/127286.htm 在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架，此文将简要介绍下 fetch 的基本使用。 在 AJAX 时代，进行请求 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而...
React学习笔记之事件处理（二）
12-09
之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： React的事件处理和DOM的事件处理是很相似的，只是有一些语法...
React Native 基础学习笔记.rar
01-28
事件处理在React Native中也是关键部分，通过在组件上添加事件监听器，如`onPress`，可以实现用户交互。同时，React Native支持手势识别，如`PanResponder`，用于处理更复杂的触摸事件。 样式在React Native中是...
react-native-swipe手势：reactive-native的4向滑动手势
02-05
React Native组件用于处理上下左右方向的滑动手势。 安装 npm i -S react-native-swipe-gestures 用法 'use strict' ; import React , { Component } from 'react' ; import { View , Text } from 'react-native' ;...
react-native-keyevent：捕获外部键盘键或远程控制按钮事件
02-05
react-native link react-native-keyevent （仅适用于React Native <= 0.59） iOS： 在ios文件夹中pod install 。 注意：您仍然必须在MainActivity中手动注册模块！ （以下在Android配置下的说明） 手动链接 ...
react-native-shake:React Native震动事件检测器
05-15
React Native Shake事件检测器 使用此库，您可以在React Native应用程序上添加震动事件检测器。 因为react-native-shake-event不再处于活动开发中，所以我决定创建它。 请注意，它仅适用于真实设备 安装 npm ...
11.React Native之Promise介绍；
Tiger的专栏
03-25 3307
目录 1.Promise介绍 2.Promise语法 2.1构造方法 2.2Promise示例 2.3Promise对象串联 2.4Promise执行并行任务 3.Promise网络请求示例 在JavaScript的世界中，所有代码都是单线程执行的。 由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。 1.Promise介绍 Promis...
React-Native笔记--ES6中Promise
ljt2724960661的博客
12-28 163
Promise的含义:从语法上说，Promise 是一个对象，从它可以获取异步操作的消息 Promise 状态状态的特点 Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。 Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 r...
Promise与setTimeout那些事儿
weixin_33922670的博客
06-01 133
Promise与setTimeout大家应该都比较熟悉，无论是面试中还是在实际编程它们都会经常出现。面试题中经常会将二者放在一起，加些console，让你判断输出顺序，这些熟悉但是又陌生的code让人抓狂，到底顺序是啥呢？js的世界里没有偶然，没有侥幸，一切发生皆有其原由，今天让我们来一探究竟！ 不多说，直接上菜： setTimeout(() =&gt; { // t1 conso...
在 react-native 中实现 Promise 和 AsyncStorage
chaindev
04-03 186
问题 2个功能- getListInfo – 这里我检查一个对象是否存在，如果不存在，创建它，然后返回它。 getInitialState – react native 的默认函数。 我想要达到的目标 尝试从 getInitialState 调用 getListInfo，并最终填充列表视图。 但是，发生了什么—— 甚至在返回值 obj 之前，整个页面的代码就已被执行。所以，问题是，列表视图正在获取未定义的数据。 我知道的 使用promise来解决问题。但是，方法不对。 实际
react（十五）-- promise（面试）
m0_48942526的博客
11-05 136
以下代码，打印结果为： setTimeout(() => { console.log(1); }, 0) Promise.resolve().then(()=>{ console.log(2); }) Promise.resolve().then(()=>{ console.log(3); }) console.log(4); 分析： 01 先同步后异步 setTimeout 与 Promise里面的回调函数都是异步的 console.log(4);.
ReactNative学习笔记之调用原生模块（进阶）之Callback、Promise使用
加油，向未来！
02-28 6267
前言 前文ReactNative学习笔记——调用原生模块（Android）简单说了下ReactNative调用Android原生模块的基本用法，下面讲解下调用原生模块经常会用到的Callback和Promise。 很多时候我们可能不仅仅是调用Native的方法，还要通过原生方法获取它的返回值，但是，前面说过，要导出一个方法给JavaScript使用，Java方法的返回类型必须为void，Rea...
React组件的生命周期及执行顺序
zhou_xiao_cheng的博客
09-07 1万+
本文全面介绍了React组件的生命周期及执行顺序。
React-Native生命周期的触发场景和一些小建议
王亟亟的博客
11-09 1万+
转载请注明出处：王亟亟的大牛之路把王者荣耀删了后这几天回到了举铁，遛鸟，打球，睡觉的正常节奏，然后卡了看之前写的一些东西，发现生命周期没写，那么就补一篇（虽然搜搜一大堆，但是残缺总不合适，再加点建议点那就和别人的不同了）老规矩案例地址：https://github.com/ddwhan0123/Useful-Open-Source-Android（最近把时间选择器/日历这一块更新了好多内容）Reac
React Native入门－实战解析（上）
热门推荐
Leo的专栏
04-21 1万+
来自Leo的原创博客，转载请著名出处我的stackoverflow 概述随着app端越来越复杂，迭代越来越快，很多app采用原生＋html5的方式来实现，然后不知道什么时候，它就有了个高大上的名字 - hybrid app。类似的框架也很多，比较有名的有 Ionic PhoneGap 这种app的原理是，用webview来实现类似原生的界面，也就是用h5写的代码是运行在webview里的。优点很明
React Native入门指南
在“Native VS React for Web”部分，作者分析了React Native与传统的Web开发的区别，特别是在生命周期管理和视图处理上的差异。React Native应用有自己独特的生命周期，这使得开发者需要理解如何在JavaScript和原生...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值