当前位置：首页 > React

如何判断react加载完成

2026-01-24 22:16:07React

判断 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 实现。

如何判断react加载完成

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
在异步操作完成后触发回调，确保数据已加载。

如何判断react加载完成

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} />;
}