React异步组件

React 异步组件

1. import 【导入组件】
2. React.lazy 【实现了异步】
3. React.Suspense 【往往配合异步提示loading】

import React from 'react'
const Basics01 = React.lazy(() => import('./Basics01'))
class Basics10 extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return <div>
            <p>引入一个动态组件</p>
            <hr />
            <React.Suspense fallback={<div>Loading...</div>}>
                <Basics01/>
            </React.Suspense>
        </div>
    }
}
// 1. 强制刷新，可看到 loading （看不到就限制一下 chrome 网速）
// 2. 看 network 的 js 加载
export default Basics10