如何判断react加载完成
判断 React 组件加载完成的方法
使用 componentDidMount 生命周期方法
在类组件中，componentDidMount 是组件挂载到 DOM 后触发的生命周期方法。在此方法内执行的操作可以确保组件已加载完成。
class MyComponent extends React.Component {
componentDidMount() {
console.log('组件加载完成');
}
render() {
return <div>Hello World</div>;
}
}使用 useEffect Hook
在函数组件中，可以通过 useEffect Hook 模拟 componentDidMount 的行为。传入空依赖数组 [] 确保副作用仅在组件挂载时执行一次。
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
console.log('组件加载完成');
}, []);
return <div>Hello World</div>;
}监听 DOM 元素渲染完成
若需等待特定 DOM 元素渲染完成，可通过 ref 结合 useEffect 或 componentDidMount 实现。
function MyComponent() {
const divRef = React.useRef(null);
useEffect(() => {
if (divRef.current) {
console.log('DOM 元素已渲染', divRef.current);
}
}, []);
return <div ref={divRef}>Hello World</div>;
}判断异步数据加载完成
结合状态管理
当组件依赖异步数据时，可通过状态变量标记数据加载状态。
function MyComponent() {
const [data, setData] = React.useState(null);
const [isLoaded, setIsLoaded] = React.useState(false);
useEffect(() => {
fetchData().then((result) => {
setData(result);
setIsLoaded(true);
});
}, []);
if (!isLoaded) return <div>Loading...</div>;
return <div>{data}</div>;
}使用 Promise 或 async/await
在异步操作完成后触发回调，确保数据已加载。
useEffect(() => {
const loadData = async () => {
await fetchData();
console.log('数据加载完成');
};
loadData();
}, []);判断子组件加载完成
通过回调函数传递状态
父组件可以通过 props 接收子组件的加载状态回调。
function Child({ onLoaded }) {
useEffect(() => {
onLoaded();
}, [onLoaded]);
return <div>Child Component</div>;
}
function Parent() {
const handleChildLoaded = () => {
console.log('子组件加载完成');
};
return <Child onLoaded={handleChildLoaded} />;
}使用 React.forwardRef 暴露方法
通过 ref 暴露子组件方法，父组件可直接调用。
const Child = React.forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
notifyLoaded: () => console.log('子组件加载完成'),
}));
return <div>Child Component</div>;
});
function Parent() {
const childRef = React.useRef();
useEffect(() => {
if (childRef.current) {
childRef.current.notifyLoaded();
}
}, []);
return <Child ref={childRef} />;
}注意事项
- 避免在
render方法中直接监听加载状态，可能导致无限循环。 - 对于动态渲染的组件（如列表项），需结合唯一标识（如
key）跟踪单个元素的加载状态。 - 使用第三方库（如
react-query）管理异步数据时，可依赖其内置的isLoading或isSuccess状态。
