javascript - React 异步加载需求组件

问题描述

问 题

看图

需求：左侧的每个坨坨都对应了右侧的那个弹出框，就是最右侧的那些input，根据不同的坨坨那个里边的组件也是不一样的，现在左侧坨坨非常多，大概有几十种，也就意味着，右侧弹出框内部的组件要有几十种可能性。

问题：难道要把这几十种组件全部罗列出来然后再根据状态去更新对应的右侧组件吗？这样除了每次都要构建一个对应的组件特别麻烦外，还增加了文件大小，可以不可以把它右侧的结构做成异步，在我每次需要这个坨坨对应的右侧组件时，我再把它的结构加载进来呢？

我现在的想法 可不可以再每次触发更新state的时候发送给后台，后台根据这个state值给我返回html结构，然后我再push上去呢？可是这样做有失react标准，操作了真实dom元素

之前有用过webpack的异步加载依赖，没有用过路由异步加载，所以很多方式不是很了解，大家可以说一下你们觉得好的处理方式。谢谢啦!

解决方案

右侧的代码肯定是要打包到多个Chunk里面的，适合于这样一种方式：

    <LazilyLoad modules={{
      LoadedLate: () => importLazy(System.import('../lazy/loaded_late.js'))
    }}>
      {
        ({LoadedLate}) => {
          return <LoadedLate />
        }
      }
    </LazilyLoad>

再封装一下，这样需要的时候才会加载进来，对于编程也比较友好，详见 https://zhuanlan.zhihu.com/p/...。如果你是开源项目的话我可以帮你提交下 PR

这篇关于javascript - React 异步加载需求组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！