zoukankan      html  css  js  c++  java
  • react异步加载组件

    1. 创建 asyncComponent 异步加载工具

    import React from 'react'
    
    function asyncComponent(loadComponent){
        class AsyncComponent extends React.Component{
            static defaultProps = {
                loading: <p>Loading</p>,
                error: <p>Error</p>
            }
            constructor(props){
                super(props)
                this.loaad = this.load.bind(this)
                this.state = {
                    module: null
                }
            }
    
            componentWillMount(){
                this.load(this.props)
            }
            load(props){
                this.setState({
                    module: props.loading
                })
                loadComponent()
                    .then( m=> {
                        let Module = m.default ? m.default: m
                        this.setState({
                            module: <Module {...props}/>
                        })
                    }).catch((error)=>{
                        this.setState({
                            module: props.error
                        })
                        console.log(error)
                    })
            }
            render(){
                return this.state.module
            }
        }
        
        return AsyncComponent
    }
    
    export default asyncComponent

    2. 异步加载react组件

    let Widget = asyncComponent(()=>import(`widgets/${type.charAt(0).toUpperCase()}${type.slice(1)}Chart`))
    <Widget />

    F12 查看资源network发现在异步组件mounted时浏览器会发送对应组件模块的资源请求

  • 相关阅读:
    垃圾收集器
    垃圾收集算法
    动态绑定
    数据库连接池原理
    分布式事务:两段式提交(最终一致性)
    C# 推箱子游戏&对战游戏
    C# 结构体和类的区别
    C# 类&结构体&枚举
    C# 哈希表&列队&栈
    C# 数组&集合&泛型集合
  • 原文地址:https://www.cnblogs.com/mymelody/p/10636965.html
Copyright © 2011-2022 走看看