一.setState()更新状态的两种写法 setState(updater, [callback]), updater为返回stateChange对象的函数: (state, props) => stateChange...总结: 对象方式是函数方式的简写方式 如果新状态不依赖于原状态 ===> 使用对象方式 如果新状态依赖于原状态 ===> 使用函数方式 如果需要在setState()后获取最新的状态数据, 在第二个...callback函数中读取 例子: 函数，在我们一般情况下是用其简写形式（对象形式），只有在需要setState()后获取最新的状态数据时才会用到函数形式的...在react控制的回调函数中: 生命周期勾子 / react事件监听回调 非react控制的异步回调函数中: 定时器回调 / 原生事件监听回调 / promise回调 /… 异步 OR 同步?
Promise对象可以进行链式调用，而且这个then()方法可以接收两个函数，一个是处理成功后的函数，一个是处理错误结果的函数。...成功调用后返回一个数组，数组的值是有序的，即按照传入参数的数组的值操作后返回的结果。...正常情况下，它返回一个Promise对象，状态为fulfilled。但是，当解析时发生错误时，返回的Promise对象将会置为rejected态。...，调用之后返回了一个迭代器对象（即show） 调用next方法后，函数内执行第一条yield语句，输出当前的状态done（迭代器是否遍历完成）以及相应值（一般为yield关键字后面的运算结果） 每调用一次...，我们想在showWords中调用一次，简单的 yield showNumbers()之后发现并没有执行函数里面的yield 10+1 因为yield只能原封不动地返回右边运算后值，但现在的showNumbers
内部函数 innerFunction 可以从其外部范围访问变量 x，因此，即使在 outerFunction 返回后它也可以返回其值。... 在这个例子中，如果 p 元素被点击，事件将首先被 p 元素捕获并调用 alert('p') 函数。 然后，事件将传播到 div 元素并调用 alert('div') 函数。...之后立即调用 console.log("Ended!") 。传递给 setTimeout 的回调函数将在 2 秒后调用。 7....)); 在此示例中，使用 setTimeout 函数创建了一个 promise，该函数在 2 秒后调用 resolve 函数。...promise 有两个方法，then 和 catch，可用于处理已解析的值或发生的任何错误。
setState和 useState 只在「合成事件」如onClick等和「钩子函数」包括componentDidMount、useEffect等中是“异步”的，在原生事件和 setTimeout、Promise.resolve...这里的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是「合成事件」和「钩子函数」的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”。...「批量更新优化」也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout、Promise.resolve().then 中不会批量更新，在“异步”中如果对同一个值进行多次修改，批量更新策略会对其进行覆盖...假如在一个「合成事件」中，循环调用了setState方法n次，如果 React 没有优化，当前组件就要被渲染n次，这对性能来说是很大的浪费。...useRef 是一个对象，它拥有一个 current 属性，并且不管函数组件执行多少次，而 useRef 返回的对象永远都是原来那一个。
执行结果是 2 5 6 7 3 1 4 再讲结果之前我们应该了解一下es6的新增的任务队列 是在事件循环之上的（onclick, setTimeout,Ajax） onclick 是浏览器内核的 DOM...Binding 模块来处理的，当事件触发的时候，回调函数会立即添加到任务队列中。...setTimeout 是浏览器内核的 timer 模块进行的延时处理，当时间到达后才会回调添加到任务队列中。 Ajax 是浏览器内核 network 模块在网络请求完成之后，将回调添加到任务队列中。...纯回调的形式是先指定回调函数，在我们想要启动异步任务前就必须指定好成功、失败的回调函数，而且我们不能在它完成后在指定回调函数，等他执行完毕已经获取不到数据了； 而 promise是通过执行一个函数，这个函数返回一个...promise对象，异步操作是在这个Promise对象内部进行的，也就是Promise构造函数执行时立即调用executor 函数，此时异步任务开始了，但是并不需要指定成功、失败的回调函数。
*/ onSomething: Function /** 没有参数&返回值的函数 */ onClick: () => void /** 携带参数的函数 */ onChange: (...function handleEvent(event: any) {、 console.log(event.clientY) } 试想下当我们注册一个 Touch 事件，然后错误的通过事件处理函数中的...类型 在做异步操作时我们经常使用 async 函数，函数调用时会 return 一个 Promise 对象，可以使用 then 方法添加回调函数。...然后声明了一个 异步函数 getResponse 并且将函数返回值的类型定义为 Promise> 。...最后调用 getResponse 方法会返回一个 promise 类型，通过 then 调用，此时 then 方法接收的第一个回调函数的参数 response 的类型为，{ message: string
栈里函数执行的时候可能会调一些Dom操作，ajax操作和setTimeout定时器，这时候要等stack（栈）里面的所有程序先走**（注意：栈里的代码是先进后出）**，走完后再走WebAPIs，WebAPIs...执行后的结果放在callback queue（回调的队列里，注意：队列里的代码先放进去的先执行），也就是当栈里面的程序走完之后，再从任务队列中读取事件，将队列中的事件放到执行栈中依次执行，这个过程是循环不断的...，加入栈中执行 stack（栈）里面都走完之后，就会依次读取任务队列,将队列中的事件放到执行栈中依次执行，这个时候栈中又出现了事件，这个事件又去调用了WebAPIs里的异步方法，那这些异步方法会在再被调用的时候放在队列里...，在下一个 task 执行开始前，对页面进行重新渲染 （task->渲染->task->…） 鼠标点击会触发一个事件回调，需要执行一个宏任务，然后解析HTMl。...空间小，运行效率高 先进后出，后进先出 栈中的DOM，ajax，setTimeout会依次进入到队列中,当栈中代码执行完毕后，再将队列中的事件放到执行栈中依次执行。
有这样一道关于promise的面试题，描述如下： 页面上有一个输入框，两个按钮，A按钮和B按钮，点击A或者B分别会发送一个异步请求，请求完成后，结果会显示在输入框中。...(); a.onclick = function(){ //将事件过程包装成一个promise并通过then链连接到 //全局的Promise...然后再观察点击事件的代码，用户每次点击按钮时，我们在事件中访问全局Promise实例，将异步操作包装到成新的Promise实例，然后通过全局Promise实例的then方法来连接这些行为。...连接的时候需要注意，then链的函数中必须将新的promise实例进行返回，不然就会执行顺序就不正确了。...需要注意的是，then链连接完成后，我们需要更新全局的P变量，只有这样，其它点击事件才能得到最新的Promise的执行链。
在后面特定时机调用 cancel 函数取消请求 在错误回调中判断如果 error 是 cancel, 做相应处理 实现功能 点击按钮, 取消某个正在请求中的请求, 实现功能 点击按钮, 取消某个正在请求中的请求...链串连起来, 返回 promise dispatchRequest(config): 转换请求数据 ===> 调用 xhrAdapter()发请求 ===> 请求返回后转换响应数 据....链串连起来, 返回 promise dispatchRequest(config): 转换请求数据 ===> 调用 xhrAdapter()发请求 ===> 请求返回后转换响应数 据....拦截器的模拟实现 array.shift()该方法用于把数组的第一个元素从其中删除，并返回第一个元素的值 思路为先将拦截器的响应回调与请求回调都压入一个数组中,之后进行遍历运行 promise = promise.then...promise函数 resolveAsync() //调用await+async
主要用来描述事件触发之后的执行任务，比如用户点击一个按钮，触发的onClick回调函数。...）， 输出 promise后出栈，并将这一项从队列中移除 7....3. promise的then返回的还是promise，所以在输出promise4后，继续检测到后续的then方法，马上放到microtask队列尾部，再继续取出执行，马上输出promise5； 而输出...因为此时promise1所在任务之后是promise3的任务，1和3在promise函数内部返回后就添加至队列中，2在1执行之后才添加 再来看个例子，就有点微妙了 console.log...因为click事件冒泡了，事件派发这个macrotask任务包括了前后两个onClick回调，两个回调函数都执行完之后，才会执行接下来的 setTimeout任务 期间第一个onClick回调完成后执行栈为空
栈里函数执行的时候可能会调一些Dom操作，ajax操作和setTimeout定时器，这时候要等stack（栈）里面的所有程序先走**（注意：栈里的代码是先进后出）**，走完后再走WebAPIs，WebAPIs...执行后的结果放在callback queue（回调的队列里，注意：队列里的代码先放进去的先执行），也就是当栈里面的程序走完之后，再从任务队列中读取事件，将队列中的事件放到执行栈中依次执行，这个过程是循环不断的...，加入栈中执行 stack（栈）里面都走完之后，就会依次读取任务队列,将队列中的事件放到执行栈中依次执行，这个时候栈中又出现了事件，这个事件又去调用了WebAPIs里的异步方法，那这些异步方法会在再被调用的时候放在队列里...，需要执行一个宏任务，然后解析HTMl。...存储的值大小固定 由系统自动分配内存空间 空间小，运行效率高 先进后出，后进先出 栈中的DOM，ajax，setTimeout会依次进入到队列中,当栈中代码执行完毕后，再将队列中的事件放到执行栈中依次执行
场景二：创建悬浮窗后，主窗口的系统侧滑返回事件可正常使用。...场景三：可响应正常点击事件，可通过触发拖动使悬浮窗的移动，根据最后手势停留位置，做动画靠屏幕左或靠右显示，跳转和返回上级页面后悬浮窗依然存在，且相对手机屏幕位置不变。...场景七：视频类应用主动调用画中画完成后台播放，以及返回桌面时自动启动画中画。...主窗口的系统侧滑返回事件可正常使用。...A：WindowStage需要在EntryAbility中的onWindowStageCreate中用AppStorage.setOrCreate()获取。Q：子窗口可以用于应用外么？
如果不想覆盖第一个添加的click事件，需要使用第二种方法。那怎么给ajax添加多个回调事件呢？ jQuery 中 Ajax 的发展 1....successFunction, 4 error: errorFunction 5 }); $.ajax()操作完成后，返回的是XHR对象，你没法进行链式操作； 2....链式操作，多次调用 但在JQuery的1.5版本中，引入了 Deferred 对象，它返回的是deferred对象，允许注册多个回调函数，并且能传递任何同步或异步函数的执行状态–成功或失败。...then方法的使用 另外一种产生链式调用的方式是利用Promise的 then 方法，它接受三个event handlers作为参数，对于多个回调函数，有需要以数组方式传入三个参数 $.ajax({...方法为多个操作指定回调函数 Deferred对象允许你为多个事件指定一个回调函数，这是传统写法做不到的。
#### 权限申请SW.register('sw.js') .then(reg=>{}) 它返回的是 Promise 对象。...; }) 它返回的是 Promise 对象。...如果有这种需求，可以直接监听 `message` 事件。...open(): 执行打开操作 * @return: promise WebCaches.table('demo-v1').open() .then(cache=>{}) 添加行 向表中添加具体的缓存行...') .onclick(e=>{ e.target.close(); }); Notify 还提供了其它的事件监听 * onclick * onclose * onshow * onerror
((c) => { // c是用于取消当前请求的函数 cancel = c; // 保存取消请求函数，用于之后取消请求 }); 在需要请求的地方，调用保存的取消请求的函数 <!...{ cancel = null; // 请求结束后保存的取消请求的函数不在需要保存 console.log("请求1成功: ", response.data...// 请求结束后保存的取消请求的函数不在需要保存 console.log('请求1成功: ', response.data) }, error => { if...因为返回一个pending状态的对象时，后续的回调就不能执行了。 // 因为后面的回调函数只有在状态发生变化时才能执行。...因为返回一个pending状态的对象时，后续的回调就不能执行了。 // 因为后面的回调函数只有在状态发生变化时才能执行。
答案就是使用Mutation事件可以异步执行操作（例子中的flush函数），一是可以尽快响应变化，二是可以去除重复的计算。...9.返回到第一步。...7.将前面运行的microtask从microtask队列中删除，然后返回到第二步（Microtask queue handling）。...当函数执行完后，它的执行上下文会从栈弹出。 ?...和上一个例子很像，不同的是这一轮事件循环的task是click的回调函数，Promise1则是microtask，paint同样是在他们之后完成。
Promise，或其它值 如果返回新的Promise，那么下一级.then()会在新Promise状态改变之后执行 如果返回其它任何值，则会立刻执行下一级.then() .then()接受两个函数作为参数...： fulfilled和rejected .then()返回一个新的Promise实例，所以它可以链式调用 当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行...$.ajax('http://baidu.com', { success: function (res) { // 这里就是回调函数了 } }); // 或者在页面加载完毕后回调 $(function...() { // 这里也是回调函数 }); 异步操作以事件为主 回调主要出现在Ajax和File API 这个时候问题尚不算严重 异步回调的问题 遍历目录，找到最大的文件 const fs = require...= new Promise( (resolve, reject) => { this.confirmButton.onClick = resolve; this.cancelButton.onClick
比如点击事件（onClick）和内容改变时间（onChange）等。...实现了链式调用，每次调用then之后返回的都是一个Promise对象，如果在then使用了return，return返回的值会被Promise.resolve()包装。...Generator Generator是一种特殊的函数，有以下特点： 声明时需要在function后面加上*，并且配合函数里面yield关键字使用。...async在使用上会有一些需要注意的地方： async函数的返回值是一个Promise对象，不像是generator函数返回的是Iterator遍历器对象，所以async函数执行后可以继续使用then等方法来继续执行后面的逻辑...await后边一般跟Promise对象，async函数执行遇到await后，等待后面的Promise对象的状态从pending变成resolve后，将resolve的参数返回并自动往下执行知道下一个await
createElement和component 在react里面，经过babel的解析后，jsx会变成createElement执行后的结果。...setState导致多次渲染带来不必要的性能开销，会将待更新的state放到队列中，等到合适的时机（生命周期钩子和事件）后进行batchUpdate，所以在setState后无法立即拿到更新后的state...如果是给setState传入一个函数，这个函数是执行前一个setState后才被调用的，所以函数返回的参数可以拿到更新后的state。...但是如果将setState在异步方法中（setTimeout、Promise等等）调用，由于这些方法是异步的，会导致生命周期钩子或者事件方法先执行，执行完这些后会将更新队列的pending状态置为false...比如当触发onClick事件时，会先执行target元素的onClick事件回调函数，如果回调函数里面阻止了冒泡，就不会继续向上查找父元素。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
