link: https://github.com/alibaba/hooks/issues/new
useRequest:
Fetch.ts 文件:
useRequestImplement.ts 文件:
当触发用户交互行为, 如拖拽行为时:
React 17 会按照下列顺序执行:
- 依照 Effect 链条顺序优先执行
drag文件 Effect Cleanup
- 接着执行
useRequest Hook Effect Cleanup, 此时会触发 useRequestImplement.ts useUnmount 回调函数, 即 fetchInstance.cancel(), 而执行 fetchInstance.cancel() 后会使得 this.count + 1, 此时 this.count 值为 1
- 接着触发 drag文件 useRequest 返回的 run 函数, 此时
this.count 再次 + 1, 值为 2, 因此 currentCount 的值也为 2, 因此会按照预期执行 onSuccess 回调函数
符合预期
React 18 执行顺序 :
- 优先触发拖拽行为, 即 drag文件 useRequest 返回的 run 函数, 此时
this.count + 1, 值为 1, 因此 currentCount 的值为 1
- 执行异步逻辑
const res = await servicePromise; 触发 异步可中断更新
3.. 时间切片 调度其他优先级任务, 执行 Effect 链条 Cleanup: useDragPreCheck Hook Effect Cleanup -> useRequest Hook Effect Cleanup, 此时执行 fetchInstance.cancel(), this.count + 1, 此时 this.count 值为 2
- 当
异步 行为完成后, 回到上下文继续执行逻辑, 此时判断 currentCount !== this.count 成立, currentCount 由于闭包存在, 值为1, 而 this.count 值为 2, 因此返回了 new Promise(() => {}); 导致 onSuccess 未被执行
在页面中的表现则为 onSuccess 未触发, loading 不消失, 数据未处理
相关 demo (React 18.2.0 + ahooks 3.7.10) : https://is.gd/lZJgyH
将一个节点拖拽到另一个容器中, 表现为 loading 不消失; 而将 react 版本更换为 react 17 后则表现正常;
useRequest:
Fetch.ts文件:useRequestImplement.ts文件:当触发用户交互行为, 如拖拽行为时:
React 17 会按照下列顺序执行:
drag文件Effect CleanupuseRequestHook Effect Cleanup, 此时会触发useRequestImplement.tsuseUnmount回调函数, 即fetchInstance.cancel(), 而执行fetchInstance.cancel()后会使得this.count + 1, 此时this.count值为 1this.count再次 + 1, 值为 2, 因此 currentCount 的值也为 2, 因此会按照预期执行 onSuccess 回调函数符合预期
React 18 执行顺序 :
this.count + 1, 值为 1, 因此 currentCount 的值为 1const res = await servicePromise;触发异步可中断更新3..
时间切片调度其他优先级任务, 执行 Effect 链条 Cleanup:useDragPreCheckHook Effect Cleanup ->useRequestHook Effect Cleanup, 此时执行fetchInstance.cancel(),this.count + 1, 此时this.count值为 2异步行为完成后, 回到上下文继续执行逻辑, 此时判断currentCount !== this.count成立, currentCount 由于闭包存在, 值为1, 而this.count值为 2, 因此返回了new Promise(() => {});导致onSuccess未被执行在页面中的表现则为
onSuccess未触发,loading不消失, 数据未处理相关 demo (React 18.2.0 + ahooks 3.7.10) : https://is.gd/lZJgyH
将一个节点拖拽到另一个容器中, 表现为 loading 不消失; 而将 react 版本更换为 react 17 后则表现正常;