需求概述
在旧项目中,有一个策略页面包含四种策略,分别为:Auto、Spot、Long 和 Short。页面中涉及多种配置(Config),包括公共配置(Common Config)、期货配置(Futures Config)以及仅适用于现货的配置(Spot Only Config)。
旧项目实现方式
旧项目采用 MVC 架构,页面数据全部存储在 Controller 中。四种策略共用同一个 config。在页面中使用 panel 时,整个 Controller 会被直接传入 props。由于 panel 是一个独立的组件,需要进行数据分离,这种实现方式导致策略页面运行非常卡顿。具体问题包括:每个 panel 都复制了一份完整的数据;当数据发生修改时,所有 panel 都会重新渲染(rerender),用户体验极差。
旧项目里面有一个策略页面, 里面假设有四种策略, 分别为: Auto
, Spot
, Long
, Short
. 下面有一些 Config, 他们有的是公共 Config, 有的是 Futures Config,还有的是 Spot Only Config.
新项目实现方式

- 配置分离:为四种策略分别设置独立的 config。对于公共配置(Common Config),在更新时会同步更新其他三个 config。(为何不单独设置一个 common config?一方面,四种策略的配置已完全分离,公共配置数量较少时,这种方式是可接受的;另一方面,产品需求变动频繁,单独的公共配置不利于后续扩展。)
- Panel 交互优化:panel 组件通过 onChange 回调管理当前页面的数据变动,而 visible 状态则由 Global Store 统一管理,因为这部分与页面无关。