DevExtreme dxo-item-dragging的onAdd事件this异常及UI卡顿问题

问题原因分析 #

• 直接在模板绑定onAdd时，事件回调的this指向并非组件实例，所以访问this.tasks会返回undefined。
• 模板中使用[onAdd]="onAdd.bind(this)"虽然能修正上下文，但Angular每次变更检测都会生成新的函数引用，触发组件频繁重渲染，最终导致UI卡顿甚至冻结。

解决方案1：使用箭头函数定义回调 #

箭头函数会自动捕获当前组件的上下文，无需额外绑定，且函数引用固定，不会引发不必要的重渲染。

修改TS代码：

// 用箭头函数定义onAdd方法
onAdd = (e) => {
  e.toData.splice(e.toIndex, 0, e.itemData);
  const a = this.tasks; // 现在可以正常访问组件属性
}

HTML代码保持不变：

<dxo-item-dragging group="'server'" [data]="tasks"
            [allowReordering]="true" [onDragStart]="onDragStart" [onAdd]="onAdd" [onRemove]="onRemove">
</dxo-item-dragging>

解决方案2：在构造函数中绑定上下文 #

在组件构造器中一次性绑定this，确保函数引用始终固定，避免模板中重复创建函数实例。

修改TS代码：

constructor() {
  // 构造器中绑定this，仅执行一次
  this.onAdd = this.onAdd.bind(this);
}

onAdd(e) {
  e.toData.splice(e.toIndex, 0, e.itemData);
  const a = this.tasks;
}

HTML代码同样保持不变。

关键说明 #

模板内的bind(this)会导致函数引用每次渲染都变化，Angular会认为绑定值更新，进而触发组件及子组件的重渲染循环，这就是UI卡顿的根源。上面两种方案都能固定函数引用，既解决上下文问题，又避免性能损耗。

内容的提问来源于stack exchange，提问作者Ahmet Aydın