React中是否存在与Vue nextTick()功能等价的函数？

React 没有内置同名的nextTickAPI，但有官方标准实现方式，比盲目用setTimeout包裹逻辑靠谱得多，完全覆盖「等待DOM刷新完成后执行操作」的需求。

类组件实现 #

类组件下直接用setState的第二个回调参数即可，传入的回调会在本次状态更新触发的DOM重渲染完成后立即执行：

this.setState({
  commentList: newLoadedComments
}, () => {
  // 此处DOM已经完成更新，可直接执行DOM操作
  document.querySelector('.comment-area').scroll(0, 99999)
})

函数组件实现 #

函数组件没有setState的回调入参，根据使用场景选对应方案即可：

• 等待特定状态更新触发的DOM渲染完成：优先用useEffect/useLayoutEffect
  • 滚动、获取元素宽高/位置这类不需要同步阻塞绘制的操作，用useEffect，执行时机在浏览器完成DOM绘制之后，不会阻塞页面渲染
  • 输入框聚焦、同步调整元素位置这类需要避免页面视觉闪烁的操作，用useLayoutEffect，执行时机在DOM更新完成、浏览器正式绘制之前，执行完再绘制不会出现闪屏
    示例代码：

  const [commentList, setCommentList] = useState([])
  const commentAreaRef = useRef(null)
  
  // 依赖项填入需要等待更新的状态，状态更新触发重渲染后就会执行effect逻辑
  useEffect(() => {
    commentAreaRef.current?.scroll({
      top: commentAreaRef.current.scrollHeight
    })
  }, [commentList])
  
  const loadMoreComments = async () => {
    const newData = await fetchComments()
    setCommentList(prev => [...prev, ...newData])
  }
  

• 需要通用的、不绑定特定状态的下一次DOM刷新等待逻辑：可以自己封装一个通用nextTick工具，时机比setTimeout准确很多：

  const nextTick = (callback) => {
    const runCb = () => requestAnimationFrame(() => callback())
    if (typeof queueMicrotask === 'function') {
      queueMicrotask(runCb)
    } else {
      Promise.resolve().then(runCb)
    }
  }
  

不推荐用无延迟参数的setTimeout实现这类需求：setTimeout属于宏任务，执行时机受事件循环队列排队情况影响，很容易出现回调执行时DOM还没更新完成、或者回调不必要延迟的问题，稳定性很差。

内容的提问来源于stack exchange，提问作者rodrigocfd