如何判断react加载完成
判断 React 组件加载完成的方法
使用 componentDidMount 生命周期方法
在类组件中，componentDidMount 会在组件挂载到 DOM 后立即调用。这是执行初始化操作（如数据获取或订阅）的理想位置。
class MyComponent extends React.Component {
componentDidMount() {
console.log('Component has loaded');
}
render() {
return <div>Hello World</div>;
}
}使用 useEffect Hook（函数组件）
在函数组件中，useEffect 可以模拟 componentDidMount 的行为。通过传递空依赖数组 []，可以确保回调仅在组件挂载后执行一次。
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
console.log('Component has loaded');
}, []); // 空数组表示仅在挂载时执行
return <div>Hello World</div>;
}监听全局加载事件
如果需要检测整个应用或动态内容的加载完成，可以使用 window.onload 或 DOMContentLoaded 事件。
window.addEventListener('load', () => {
console.log('All resources (images, scripts) are loaded');
});
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM is ready, but external resources may still be loading');
});结合异步操作
若组件依赖异步数据（如 API 请求），可在数据获取完成后触发回调或更新状态来标记加载完成。
function DataComponent() {
const [isLoaded, setIsLoaded] = React.useState(false);
useEffect(() => {
fetchData().then(() => {
setIsLoaded(true);
});
}, []);
return isLoaded ? <div>Data loaded!</div> : <div>Loading...</div>;
}注意事项
- 避免阻塞渲染：长时间运行的操作应放在
useEffect或componentDidMount中异步处理，防止界面冻结。 - 动态内容加载：对于懒加载组件或动态导入，可使用
React.Suspense和lazy配合捕获加载状态。 - 错误处理：在异步操作中添加错误处理逻辑，避免因加载失败导致界面无响应。
通过上述方法，可以灵活判断 React 组件或应用的加载状态，并根据需求执行后续逻辑。
