react中如何设置一个flag，判断组件加载完成

Question

我在父组件中引入了若干子组件，包括一些图表啥的，页面加载时感觉内容出现不同步，所以想在加载 过程中做一个loading效果，那怎么判断各个组件的内容已经加载完成了呢？

// 父组件
const parent = () =>{
    ...............

    return (
        <>
        <Child1/>
        <Child2/>
        <Child3/>
        </>
    )
}
export default parent

Answer 1

需要确认内容出现不同步的原因是什么？一些子组件里有异步处理么，比如数据请求。
如果是这样还是需要子组件主动告知父组件已经显示完毕，父组件里最简单的记录方式是计数，比如
[loadedComponent, setLoadedComponent] = useState(0)，把 setLoadedComponent 传给子组件，子组件在加载完毕时调用 setLoadedComponent(prev => prev + 1)，父组件通过 loadedComponent === 3 判断是否显示 loading