lazy内置方法 Suspense内置组件
-
lazy是React提供的懒（动态）加载组件的方法，
React.lazy() -
能减少打包体积、延迟加载首屏不需要渲染的组件
-
依赖内置组件Suspense：给lazy加上loading指示器组件的一个容器组件
-
Suspense目前只和lazy配合实现组件等待加载指示器的功能
-
React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。所以要用类返回render而不是函数
-
index.jsx
import Loading from './loading'
const MyMain = React.lazy(() => import('./main.jsx'))
function App() {return (<div>{/* 注意 fallback这里是组件 */}<React.Suspense fallback={<Loading />}><MyMain /></React.Suspense></div>)
}ReactDOM.render(<App />,document.getElementById('app')
)
- main.jsx
// export function Main() {
// return (
// <div>
// 显示内容
// </div>
// )
// }
// React.lazy 接受一个函数，这个函数需要动态调用 import()。
// 它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。
export default class Main extends React.Component {render() {return (<div>显示内容</div>)}
}
- Loading.jsx
export default function Loading() {return (<div><h1>Loading...</h1><h1>Loading...</h1><h1>Loading...</h1></div>)
}
路由懒加载
yarn add react-router react-router-dom- 本地调试时，path和文件名同名，会变成访问文件
- index.jsx
import Loading from './loading'
import React, { lazy, Suspense } from 'react'
import { BrowserRouter } from 'react-router-dom'
import { Switch, Route } from 'react-router'
const MyMain = lazy(() => import('./main.jsx'))
function App() {return (<div>{/* 注意 fallback这里是组件 */}<Suspense fallback={<Loading />}><div><MyMain /><Switch><Route path="/mypage1" component={lazy(() => import('./page1.jsx'))} /><Route path="/mypage2" component={lazy(() => import('./page2.jsx'))} /></Switch></div></Suspense></div>)
}// 路由懒加载
ReactDOM.render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>,document.getElementById('app')
);
