我们在用react的时候，希望组件异步加载，提高性能，那么应该怎么实现呢？

往下看。。。

解释一波：

react异步加载的方法很多，这里只说一种，因为这一种直接使用react的特性就可以了，不需要另外配置webpack，就是用一个小技巧去import组件，所以方便，实现简单。
写一个组件A，这个组件内部会加载另外的组件B，用B的内容完全覆盖到A上面，
路由需要打开A的时候，内容加载的B才会调起，达到异步效果，而B就是我们真正想打开的组件，

文章最后给返回组件A的代码。

asyncComponent是一个函数，调用它会返回组件A，A内部加载我们想要的组件B，asyncComponent算是一个工厂函数，可以返回组件A，构造组件A需要传进去一个函数，这个函数直接返回我们想要的组件B。

asyncComponent会用拿到的组件B来渲染组件A，所以虽然打开的是组件A，但组件A本身是空的，把组件B完全融合进去之后，其实A就变成跟B一样了，

这算是一种mixin技术。

下面给出asyncComponent组件的代码：

// 支持按需载入的包装组件
export function asyncComponent (importComponent) {class AsyncComponent extends React.Component {constructor (props) {super(props);this.state = {component: null};}componentDidMount () {importComponent().then(cmp => {this.setState({ component: cmp.default });});}render () {const C = this.state.component;return C ? <C {...this.props} /> : null;}}return AsyncComponent;
}

那么我们该如何使用呢？请继续往下面看，我们需要通过函数来异步引用这个组件，通过asyncComponent来返回组件

eg：

//eg:
const routes = [{title: 'demo',path: '/',component: asyncComponent(() => import('./pages/Demo')),children:[]}]
export { routes }

好了，看到这里的话，我们就可以愉快的进行异步加载react的组件了

原创不易，自由转载，保留出处！

react之组件异步加载相关推荐

element ui table组件异步加载数据盒子位移
使用element ui 中的 table组件时 ,异步加载数据,然后渲染上去时会出现td与th对不齐,但是重新重新进一次就有又好了,但是对于用户体验肯定是不行的. 这个时候只需要使用element ...
vue 路由懒加载，组件异步加载
用于缓解首屏加载缓慢 1. vue异步组件 vue-router配置路由 , 使用vue的异步组件实现按需加载 { path: '/home',name: 'Home', component: res ...
react 组件异步加载
话不多说直接上代码 import React, {Component} from "react"; import {Modal} from "antd";co ...
react实现异步插件_React-loadable实现组件进行异步加载
React 项目打包时,如果不进行异步组件的处理,那么所有页面所需要的 js 都在同一文件中(bundle.js),整个js文件很大,从而导致首屏加载时间过长.所有,可以对组件进行异步加载处理,可以使 ...
div 重新加载_使用React的HOC来完成模块的异步加载
原文地址medium.com 在单页面应用的时代,你可以使用React来完成几乎所有的Web应用甚至大型的Web引用.你甚至可以使用React开发一个Facebook. 当前正如你所知,Webpac ...
React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
FLutter入门：异步加载组件FutureBuilder
FutureBuilder 在实际开发中,进入一个页面后执行网络请求加载数据并显示是非常普遍的,这时候我们一般会显示loading直到加载完成显示正常页面.在flutter中我们可以在initStat ...
模块化妙用！用vue3实现一个鼠标追踪器和异步加载组件
用vue3实现一个鼠标追踪器和异步加载组件一.
bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js（基于treetable.js）...
概述后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件. 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加 ...
div加载异步加载html,初始化页面，异步加载组件的问题
需求是这样的:希望第一次加载页面时候把红色箭头部分的组件require.ensure加载. 红色部分的代码(未改动之前): render:function(){ return( //这里就是需要异步 ...

react之组件异步加载

解释一波：

原创不易，自由转载，保留出处！

react之组件异步加载相关推荐

最新文章

热门文章