React 异步加载需求组件

Question

看图

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

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

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

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

Answer 1

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

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

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

Answer 2

谢邀~

const InputLists = [[], [], ...];//或定义为对象{list1: [], list2[], ...}
app: 
 <div>
    <左侧组件 />
    <中间组件 />
    <右侧组件 list={this.state.InputList} />
 </div>

左侧组件事件触发改变app中的InputList(one of InputLists), 同时传入右侧组件, map这个InputList生成不定项的右侧组件.

Answer 3

如果将左侧的组件放在主项目内开发的话，会造成几个问题：

1. 项目过大

2. 单个组件的维护和修改需要将整个项目更新发版

3. 组件开发者都在本项目内完成，增加冲突可能性

解决方案：

1. 定义组件开发规范

2. 组件单独开发维护，然后在本项目内异步引入