Question

假设我需要构建一个主页，并且希望先呈现h1和p，并且如果用户滚动到MyComponent区域，则呈现MyComponnet或MyComponent中的异步调用不会阻止h1或p呈现，因此以获得更好的用户体验。有办法吗？

const Home = () => {
return <div>
 <h1>Home Page</h1>
 <p>aaaaaaaaaa</p>
 <p>aaaaaaaaaa</p>
 <p>aaaaaaaaaa</p>
 <MyComponent />
</div>;
}


const MyComponent = () => {
 const res = await fetch('some url...');
 // ... some code process the res
 const data = processRes(res);
 return <div>data</div> 
}

Answer 1

React正在针对此类用例进行改进以增强体验，目前处于试验阶段。

https://reactjs.org/docs/concurrent-mode-intro.html

话虽如此，只要稍作改动就可以实现。

const MyComponent = React.lazy(() => import('./MyComponent')); // load lazy
return (
<>
  <h1></h1>
  <p></p>  
  <Suspense fallback={<SplashScreen/>}>
    <MyComponent/>
  </Suspense>
</>);

如何延迟加载React组件

1 个答案: