react navite process.nextTick 和 Promise.then 的执行顺序

在 React Native 里,process.nextTick() 和 Promise.then() 的执行顺序,不能简单套用浏览器的 Event Loop 规则。关键取决于 RN 使用的 JS Runtime(Hermes / JSC)以及 RN 的调度机制。

如果是在常见的 Hermes 环境下,可以先记住:

javascript 复制代码
process.nextTick(() => {
  console.log('nextTick');
});

Promise.resolve().then(() => {
  console.log('promise');
});

console.log('sync');

通常输出:

arduino 复制代码
sync
nextTick
promise

也就是:

arduino 复制代码
同步代码
   ↓
process.nextTick
   ↓
Promise.then
   ↓
其他异步任务

为什么?

Node.js 中,process.nextTick() 有一个专门的 nextTick queue,优先级高于 Promise microtask:

arduino 复制代码
┌─────────────────────┐
│ 同步 JavaScript      │
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│ process.nextTick    │  ← 更高优先级
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│ Promise microtask   │
│ queue               │
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│ timer / IO / ...    │
└─────────────────────┘

但是这里有一个非常重要的 RN 特殊点:

RN 不是 Node.js

React Native 里的:

arduino 复制代码
process.nextTick

并不是因为 RN 运行在 Node.js 中才存在的。RN/Metro 可能提供 Node API 的 polyfill,而不同 RN 版本、Hermes/JSC 配置下具体实现可能不同。

所以不要把下面这个 Node.js 结论无条件套到 RN:

arduino 复制代码
process.nextTick > Promise.then

尤其是现代 React Native + Hermes 环境,process.nextTick 的行为需要看实际 runtime/polyfill。

你可以直接测试:

javascript 复制代码
console.log('1');

process.nextTick(() => {
  console.log('2 nextTick');
});

Promise.resolve().then(() => {
  console.log('3 promise');
});

queueMicrotask?.(() => {
  console.log('4 microtask');
});

console.log('5');

如果你的目标是解决 RN 中某段代码到底谁先执行 的问题,最好把你当前 RN 版本、Hermes/JSC,以及这段代码贴出来,我可以按 RN Event Loop → Hermes Microtask → MessageQueue → React Scheduler 给你画出完整执行链。

相关推荐
Lank_M2 小时前
白底都占八成,PNG 为何只在图表页赢过 JPG
前端
张一凡932 小时前
给 Coding Agent 加一道"架构闸门":Jin 是如何做到"先审架构、再写代码、不漂移"的
前端·后端·agent
Linye2 小时前
AI 写的 HTML 原型全是空壳?聊聊真实 DOM 交互避坑
前端·人工智能
ZANE2 小时前
纯前端实现的 PDF 与图片互相转换工具技术实现
前端
Swot3 小时前
SvelteKit Remote Functions 使用指南
前端·后端
Cooper253 小时前
三源热榜去重加 AI 摘要:URL 唯一键踩出的三个坑
前端·python
Yk酱228403 小时前
A2UI探索随笔-技术选型
前端
前端繁华如梦3 小时前
# 从 73000 行压缩代码到 TypeScript 模块化:我把一个 Three.js FPS 游戏 1:1 复刻了一遍
前端
Penge6663 小时前
React Context 详解:从 Props 传递到跨组件状态共享
前端
Penge6663 小时前
React 事件处理:bind(this) 原理与实际开发常用写法
前端