React.js中如何在组件渲染前完成API调用

原因说明 #

React 函数组件的执行顺序是固定的：先执行组件函数体、执行return返回JSX并完成页面渲染后，才会触发useEffect的回调函数。另外setTimeout属于异步宏任务，默认不会阻塞主线程的渲染流程，因此你当前的写法必然会先显示Dashboard内容，再触发日志打印。

方案1：组件内部加渲染开关 #

直接在Dashboard组件内加状态控制，异步操作完成前不渲染实际内容：

import { useState, useEffect } from 'react'

export default function Dashboard(){
  const [isApiCompleted, setIsApiCompleted] = useState(false)

  useEffect(() => {
    setTimeout(()=>{
      console.log("API Call Completed")
      setIsApiCompleted(true)
    },5000)
  },[])

  // 异步操作完成前返回空或者自定义加载UI，不会渲染Dashboard核心内容
  if(!isApiCompleted) return <div>加载中...</div>

  return(
    <div>
      <h1>Dashboard</h1>
    </div>
  )
}

方案2：父组件控制渲染时机 #

如果需要把异步逻辑和Dashboard组件拆分，可以在父组件中先执行异步操作，完成后再渲染Dashboard：

// 父组件代码
import { useState, useEffect } from 'react'
import Dashboard from './Dashboard'

export default function App() {
  const [isApiCompleted, setIsApiCompleted] = useState(false)

  useEffect(() => {
    setTimeout(()=>{
      console.log("API Call Completed")
      setIsApiCompleted(true)
    },5000)
  },[])

  if(!isApiCompleted) return <div>加载中...</div>
  return <Dashboard />
}

// 简化后的Dashboard组件代码
export default function Dashboard(){
  return(
    <div>
      <h1>Dashboard</h1>
    </div>
  )
}

如果是React 18及以上版本的真实接口请求场景，你也可以使用Suspense搭配异步组件实现相同效果，本质逻辑和上述方案一致，都是在异步操作完成前渲染兜底的加载内容，操作完成后再渲染实际组件。

内容的提问来源于stack exchange，提问作者Surya M N