vs code 代码提示不全_React中的组件引入方式-lazy(代码分割)

在react中经常使用就是组件的嵌套以此来解决比较麻烦的UI显示问题，旨在管理、复用

那么组件引入的方式就值得去思考怎样去解决在大项目中繁杂的组件引入、组件加载问题，今天React官方有一个例子，更好的引入方式，进行代码分割，更好的加载方式：

如果你等不及就点击下面的链接：

Code-Splitting – React​reactjs.org

React代码分割​zh-hans.reactjs.org

其实这个代码分割的核心意思就是：项目越来越大，体积增加，故而采取一种代码分割的手段进行动态引入组件

以下是代码展示：

import React, { Fragment, lazy } from 'react'
const Son = lazy(() => import('./Son')) // 就是使用lazy这种方式来加载

const Dialog = () => {
  return (<Fragment>
    <FancyBorder
      title='welcome'
      message='欢迎来到react组合 vs 继承'
    />
    <Son/>
  </Fragment>)
}

const FancyBorder = (props) => {
  return (<Fragment>
    <div>
      <h1>{props.title ? props.title : '提示框'}</h1>
      <p>{props.message}</p>
    </div>
  </Fragment>)
}

export default Dialog

如果您是基于路由的代码分割，那以下代码作为参考：

import React, { Suspense, lazy } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom'

import Test from './components/Test'
import Combination from './components/Combination'
import Layout from './components/Layout'
import LayoutDemo from './components/LayoutDemo'

const Dialog = lazy(() => import('./components/Dialog')) // lazy引入方式

const Routers = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>  {/*Suspense 也要添加，*/}
        <Switch>
          <Route path='/' component={Dialog}/>
          <Route path='/layoutdemo' component={LayoutDemo}/>
          <Route path='/layout' component={Layout}/>
          <Route path='/com' component={Combination}/>
          <Route path='/test' component={Test}/>
        </Switch>
      </Suspense>
    </Router>
  )
}

export default Routers

以上即是组件的引入方式，如果大家有兴趣，请大家移步官网查看详细文档，博客再详细也是文档的借鉴给人以思路，