13. react - 组件懒加载

1. react 支持 import('./utils.js') 返回一个 Promise 对象。  所以可以写成 import('./utils.js').then((util) => {util.add()})

2. React.lazy 组件懒加载：

　　1. React.lazy()  接受一个函数作为参数，这个函数动态调用 import , 该函数的返回值必须是一个 Promise，该 Promise 必须 resolve 一个 【default export】的组件。

　　2. lazy 加载的组件必须在 Suspense 中使用。否则会报错。

　　3. Suspense 组件接受一个 fallback 属性。fallback 属性接受任何在组件加载过程中你想展示的 React 元素，比如loading。该属性必须传递，否则会报错。如果不想加载

　　　内容可以传递 null

　　4. Suspense 组件中可以包裹多个懒加载组件。

　　

//myComponent.js中
class myComponent extends React.Component {}
export default myComponent


// index.js 中
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./myComponent'))

ReactDOM.render(
  <Suspense fallback={<div>Loading...</div>}>
    <MyComponent />
  </Suspense>,
  document.getElementById('root')
)

 

3. 基于路由的懒加载

　　未完待续