Detailed explanation of Suspense in React

About SuspenSe, first look at the sample code

  const othercomponent = React.lazy (() => import ('./ OtherComponent'); Function mycomponent () {return (
<Suspense fallback={
Loading ...
}>
OtherComponent By lazy loading, it may be delayed when rendering the page, but after SUSPENSE, you can optimize interaction.


Use the SuspenSe tab outside

and declare that OtherComponent is done before the OtherComponent loads, you can optimize the interaction of the entire page

Fallback property accepts any in the component The React element you want to show during the loading process. You can place the SuspenSe component anywhere on the lazy load component. You can even wrap multiple lazy load components with a Suspense component.


Const OtherComponent = React.lazy (() => Import (‘./ OtherComponent’); const iNothercomponent = React.Lazy (() => Import (‘./ aNotherComponent’)); function mycomponent () {return (
loading …
}>  
<Suspense fallback={
[1
The above is all the content of this article, I hope that everyone's learning is helpful, I hope that everyone will support TUMI clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment