javascript - React 异步加载需求组件
PHP中文网
PHP中文网 2017-04-11 11:35:53
[JavaScript讨论组]

看图

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

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

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

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

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(2)
ringa_lee

谢邀~

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

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

怪我咯

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

  1. 项目过大

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

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

解决方案:

  1. 定义组件开发规范

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号