React中UploadList状态管理优化及RxJS拆分独立流方案问询

集中式状态方案的通用性与优化必要性 #

你提到的数组结构集中式状态是行业通用的基础方案，主流UI库的上传组件默认都是这个实现思路。
至于你担心的性能问题，不算过度优化：100项的列表如果没有做子组件的更新拦截，每秒数次的进度更新会触发全列表重渲染，在低性能设备上很容易出现掉帧、操作卡顿的问题，优化的收益非常明确。

RxJS 拆分状态的标准实现方案 #

RxJS 生态里刚好有成熟的拆分思路可以实现按需更新，核心逻辑是把低频更新的列表元信息和高频更新的单个任务进度完全拆分：

• 全局仅维护一个低频更新的文件元信息列表流，只存储文件名、文件体积、上传状态（排队/上传中/成功/失败）这类不会高频变化的属性，只有新增文件、删除文件、上传状态切换的时候才会触发这个流的更新，用来渲染UploadList的基础结构。
• 给每个文件生成唯一ID，全局维护一个Map结构存储每个上传任务对应的独立进度流，key为文件ID，value为对应进度的Subject。
• 并发控制逻辑在全局层处理，每次最多取2个排队中的任务启动，启动时初始化对应文件的进度流，上传过程中仅往该独立流推送进度数据，上传完成后更新全局元信息列表的状态，销毁对应的进度流即可。
• 单个Upload子组件用React.memo包裹，内部只订阅自身对应的进度流更新视图，完全不会触发父级UploadList的重渲染，最终只会有当前正在上传的2个组件会频繁更新，其余98个项不会产生任何重渲染开销。

内容的提问来源于stack exchange，提问作者lishaak