如何更新Riot标签属性？含单个与批量更新场景

嘿，这个问题问到点子上了！咱们结合Riot.js的设计理念来聊聊这两种方案的优劣和最佳选择：

优先推荐：更新opts.points数据源 + 调用this.update() #

这绝对是更符合Riot.js数据驱动视图核心思想的做法，理由如下：

• 数据与视图保持一致：opts.points是你渲染这些circle元素的唯一数据源，修改它之后再调用this.update()，Riot会自动对比新旧数据的差异，只更新需要变化的DOM元素（内部有diff优化，性能不用担心）。这样你的数据状态和视图展示始终是同步的，不会出现“DOM改了但数据还是旧的”这种后续容易踩坑的情况。
• 代码更易维护：不用手动遍历refs操作DOM，逻辑更清晰。比如你要把所有circle的cx改成30，只需要先更新opts.points里每个对象的cx值，再执行this.update()就行：

  // 先批量更新数据源
  opts.points.forEach(point => {
    point.cx = 30;
  });
  // 触发视图更新
  this.update();
  

• 避免DOM操作的潜在问题：手动操作refs可能会遇到元素不存在、refs命名冲突、或者后续this.update()把你手动修改的DOM状态覆盖掉的情况，而数据驱动的方式从根源上避免了这些问题。

不推荐：循环调用refs的setAttributes #

这种直接操作DOM的方式不是不能用，但只适合临时的、不需要同步数据的单个元素修改，批量更新时绝对不推荐：

• 脱离数据驱动模式：你手动改了DOM的属性，但opts.points里的数据还是旧的，下次任何触发this.update()的操作都会把DOM改回数据对应的状态，等于白改。
• 维护成本高：如果后续points的数量或结构变化，你还要同步修改遍历refs的逻辑，容易出错。
• 性能不如Riot内部优化：Riot的update()方法内部会做diff对比，只更新变化的节点，而循环操作DOM是全量修改，性能反而可能更差。

补充：单个元素更新的最佳实践 #

你现在用this.refs[someName].setAttribute("cx", 30)修改单个元素是可行的，但最好同步更新opts.points里对应的数据，比如：

// 找到对应的数据项
const targetPoint = opts.points.find(point => point.key === someName);
if (targetPoint) {
  targetPoint.cx = 30;
}
// 再修改DOM（或者直接调用this.update()，不过单个元素用refs更高效）
this.refs[someName].setAttribute("cx", 30);

这样数据和视图就保持一致了，不会出现后续更新被覆盖的问题。

内容的提问来源于stack exchange，提问作者Amit Kumar Gupta