Vue nextTick：为什么 React 中很少见到它

2024/10/22

我确实主要在 Vue 项目里使用 nextTick，React 里几乎不会写到同名 API。原因不是 React 不需要处理“状态更新后再操作 DOM”，而是两个框架暴露更新时机的方式不同。

一、nextTick 解决的是什么问题

Vue 修改响应式数据后，通常不会立刻同步更新 DOM。它会把同一轮事件循环中的多次状态变化收集起来，再批量执行组件更新。这样可以避免每改一次数据就重新渲染一次。

import { nextTick } from 'vue';

count.value++;
console.log(el.value.textContent); // 此时可能还是旧内容

await nextTick();
console.log(el.value.textContent); // Vue 已完成本轮 DOM 更新

nextTick 返回一个 Promise，也可以接收回调。它等待的是 Vue 当前待处理的 DOM 更新队列完成，而不是简单地“延迟几毫秒”，也不等于浏览器已经完成绘制。

二、为什么 Vue 要批量更新 DOM

假设连续修改同一个状态三次，如果每次都立即触发组件渲染，会产生不必要的重复工作。Vue 会对更新任务去重并放入调度队列，在当前同步代码执行完成后统一刷新。

count.value++;
count.value++;
count.value++;

// 三次赋值会被合并处理，不需要同步更新三次 DOM
await nextTick();

所以“数据已经变了”和“页面 DOM 已经更新”是两个时刻。普通业务逻辑应该依赖响应式数据；只有确实需要读取或操作更新后的真实 DOM 时，才需要关心这段时间差。

三、一般什么时候使用 nextTick

常见场景都发生在“状态变化导致 DOM 结构或尺寸改变”之后：

  1. 列表追加内容后，读取新的高度并滚动到底部。
  2. 通过 v-if 显示输入框后，让输入框获得焦点。
  3. 展开面板或弹窗后，读取元素尺寸、位置或计算样式。
  4. 等待子组件因状态变化完成更新，再调用依赖其 DOM 的方法。
const showInput = ref(false);
const inputRef = ref(null);

async function openEditor() {
  showInput.value = true;
  await nextTick();
  inputRef.value?.focus();
}

如果不等待，输入框可能还没有被创建，模板引用仍是 null。不过也不要为了“保险”到处使用 nextTick：能通过数据驱动、组件属性、生命周期或侦听器完成的逻辑，优先使用这些方式。

四、React 为什么没有 Vue nextTick

React 同样会批量处理状态更新，也同样存在状态变化与 DOM 提交之间的时间差。但 React 不鼓励在调用 setState 后等待一个全局的“下一次 DOM 更新”。它把这类逻辑放进组件的提交阶段：

  1. useLayoutEffect：DOM 已更新，但浏览器通常还没有绘制，适合读取布局、测量尺寸或同步调整位置。
  2. useEffect：用于在组件提交后同步外部系统，通常适合不要求阻塞绘制的副作用。
  3. ref 或 callback ref：在节点挂载、替换时获取真实 DOM。
const [open, setOpen] = useState(false);
const inputRef = useRef(null);

useLayoutEffect(() => {
  if (open) inputRef.current?.focus();
}, [open]);

React 的思路是描述“当 open 变成 true 并且 DOM 已提交后做什么”，而不是在事件函数里执行 setOpen(true) 后手动等待一次刷新。

五、nextTick 和 React API 不是一一对应

await nextTick() 最接近“等待 Vue 当前更新队列刷新完成”；React 的 useLayoutEffect、useEffect 则是把逻辑声明在不同的提交时机。它们解决的问题有交集，但调用模型不同，不能机械替换。

React 也有 flushSync 可以强制同步提交更新，但它会影响批处理和性能，只适合必须立即让第三方 API 看到最新 DOM 等少数场景，不应该当作 React 版 nextTick 日常使用。

另外，Node.js 的 process.nextTick 是事件循环相关 API，与 Vue 的 nextTick 不是同一个概念。

六、我的判断方式

在 Vue 中，如果代码刚修改响应式状态，下一行就必须读取由这次状态变化产生的新 DOM，我会考虑 await nextTick()。如果只是继续计算数据，则不需要等待 DOM。

在 React 中，我会先判断副作用是否依赖 DOM 布局：需要在绘制前测量或调整就用 useLayoutEffect；普通外部同步用 useEffect；能通过组件状态表达的行为，就不直接操作 DOM。这样理解后，React 没有同名的 nextTick 也就很自然了。

泰斯