如何在手动刷新页面时强制app.js中的useEffect先于其他组件的useEffect加载

// app.js
import React, { useEffect, useState } from 'react';

const App = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    // 在这里加载app.js中的useEffect需要的数据或执行其他操作
    // ...

    // 加载完成后，将状态变量设置为true
    setIsLoaded(true);
  }, []);

  return (
    <div>
      {/* 其他组件 */}
      <ComponentA isLoaded={isLoaded} />
      <ComponentB isLoaded={isLoaded} />
      {/* ... */}
    </div>
  );
};

export default App;

// ComponentA.js
import React, { useEffect } from 'react';

const ComponentA = ({ isLoaded }) => {
  useEffect(() => {
    // 只有当isLoaded为true时，才执行该useEffect
    if (isLoaded) {
      // 在这里加载ComponentA.js中的useEffect需要的数据或执行其他操作
      // ...
    }
  }, [isLoaded]);

  return (
    <div>
      {/* ComponentA的内容 */}
    </div>
  );
};

export default ComponentA;

// ComponentB.js
import React, { useEffect } from 'react';

const ComponentB = ({ isLoaded }) => {
  useEffect(() => {
    // 只有当isLoaded为true时，才执行该useEffect
    if (isLoaded) {
      // 在这里加载ComponentB.js中的useEffect需要的数据或执行其他操作
      // ...
    }
  }, [isLoaded]);

  return (
    <div>
      {/* ComponentB的内容 */}
    </div>
  );
};

export default ComponentB;