zoukankan      html  css  js  c++  java
  • [React] Preload React Components with the useEffect Hook

    Let's say we are using 'React.lazy()' to lazy load some Router:

    const Home = React.lazy(() => import('./screens/home'))
    const User = React.lazy(() => import('./screens/user'))
    
    function ErrorFallback({error}) {
      return (
        <IsolatedContainer>
          <p>There was an error</p>
          <pre style={{maxWidth: 700}}>{JSON.stringify(error, null, 2)}</pre>
        </IsolatedContainer>
      )
    }
    
    function App() {
      return (
        <ThemeProvider>
          <GitHubContext.Provider>
            <ErrorBoundary FallbackComponent={ErrorFallback}>
              <Suspense
                fallback={
                  <LoadingMessagePage>Loading Application</LoadingMessagePage>
                }
              >
                <Router>
                  <Home path="/" />
                  <User path="/:username" />
                </Router>
              </Suspense>
            </ErrorBoundary>
          </GitHubContext.Provider>
        </ThemeProvider>
      )
    }
    
    const ui = <App />
    const container = document.getElementById('root')
    
    ReactDOM.render(ui, container)

    One problem for lazy loading router is that for slow connect user, it takes take to switch page. What we can do to solve the problem is by preload the lazy loaded router.

    Let's say once user arrived on 'Home' Page, we assume he will continue to 'User' page. So we will preload 'User' page inside Home page.

    function Home() {
      useEffect(() => {
        // preload the next page
        import('../user')
      }, [])
      return (
        <IsolatedContainer>
          <form
            onSubmit={handleSubmit}
            css={{
              display: 'flex',
              justifyContent: 'center',
              maxWidth: 240,
              margin: 'auto',
            }}
          >
            <Input
              type="text"
              name="username"
              placeholder="Enter a GitHub username"
              autoFocus
              css={{
                borderRight: 'none',
                borderTopRightRadius: '0',
                borderBottomRightRadius: '0',
                minWidth: 190,
              }}
            />
            <PrimaryButton
              css={{
                borderTopLeftRadius: 0,
                borderBottomLeftRadius: 0,
              }}
              type="submit"
            >
              Go
            </PrimaryButton>
          </form>
        </IsolatedContainer>
      )
    }
  • 相关阅读:
    CF293E Close Vertice
    [SCOI2016]幸运数字
    [NOI2003]逃学的小孩
    0302读后感
    1231递归下降语法分析
    1210-有穷自动机
    11.12 评论汇总
    1029语言文法
    0921 词法分析
    0909开启编译原理之路
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12806118.html
Copyright © 2011-2022 走看看