调用 add 添加数据 -> 清空渲染器 -> 设置新的渲染器数据 -> 重新渲染
非 add 调用不清空渲染器
传统方式
class Module {
renderer = null; // 渲染器实例
// 手动添加数据并渲染
add(data) {
this.renderer.clear(); // 清空渲染器（如果是手动添加数据则需要先清空渲染器）
this.renderer.setData(data); // 更新渲染器数据
this.renderer.render(); // 重新渲染新数据
}
}
状态方式
class ModuleState {
needClear = false; // 标记需要清空渲染器
@observable data = null; // 新的渲染数据
// 手动添加数据
add(data) {
this.needClear = true;
this.data = data;
}
}
// ModuleView 是异步的，ModuleState 中也拿不到 ModuleView
class ModuleView {
state = null; // ModuleState
renderer = null; // 渲染器实例
constructor() {
// 当 ModuleState.data 发生变化时，自动渲染数据
autorun(() => this.render(this.state.data))
}
render(data) {
// 如果是手动添加数据则需要清空渲染器
if (this.state.needClear) {
this.renderer.clear();
this.state.needClear = false;
}
this.renderer.setData(data); // 更新渲染数据
this.renderer.render(); // 重新渲染新的数据
}
}
问题
在状态方式中，需要额外的一个标记来表示是否需要清空渲染器。
[ol]
这个标记是全局可用的，是否合理？
[/ol]
