如何调整组件渲染优先级，不改变DOM位置让ComponentTwo先于ComponentOne渲染

解决方法 #

你可以通过状态控制+首屏渲染延后挂载的逻辑实现需求，不需要调整两个组件的排列顺序，具体实现代码如下：

import { useState, useEffect } from 'react'

function HOME(){
  // 控制ComponentOne是否渲染的状态，默认不渲染
  const [renderComponentOne, setRenderComponentOne] = useState(false)

  useEffect(() => {
    //  useEffect回调会在首屏渲染完成后触发，此时ComponentTwo已经渲染完毕
    //  如果希望更丝滑，也可以套一层requestIdleCallback，等浏览器空闲时再渲染
    // requestIdleCallback(() => setRenderComponentOne(true))
    setRenderComponentOne(true)
  }, [])

  // 组件排布顺序完全不变，只是通过状态控制ComponentOne的渲染时机
  return(
    <>
      {renderComponentOne && <ComponentOne />}
      <ComponentTwo />
    </>
  )
}

原理解释 #

• React的首屏渲染会先执行return里的所有同步逻辑，此时renderComponentOne为false，ComponentOne不会参与首次计算，ComponentTwo会优先完成渲染
• 首屏渲染完成后才会触发useEffect的回调，此时再把状态设为true，触发ComponentOne的渲染，完全符合你要的先后顺序，且两个组件的排布位置没有任何变化
• 如果担心ComponentOne渲染时出现布局跳动，可以在外层加一个固定高度的占位容器，提前占好位置即可。

如果ComponentOne的渲染过程会阻塞页面交互，也可以把ComponentOne内部的重计算逻辑改成Web Worker运行，进一步降低对主线程的影响。

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