页面与ViewModel（下）

在上一篇博客中，笔者分享了一些从页面整体的角度对页面与ViewModel的思考。在本文中笔者希望从相对细节的角度分享一些对页面与ViewModel的思考。

比如，当我们在更新View Model中的绑定数据时，应该怎样更新呢？简单的自然可以用新的数据实例直接替代旧的，但是这样容易造成UI界面闪烁。尤其是绑定数据是一个列表的情况下，如果整个列表被替换，可以非常明显的看到列表"一闪"。这样的用户体验无疑是不理想的。那么我们在更新View Model中绑定的数据实例时，可以采用差异更新的方法。以一个数据列表为例，在更新时对比新旧列表，先遍历新表，对每一个元素查看在旧表中有无对应元素。如果没有，说明是新增的数据，可以将该新表中的元素同时加入到一个临时表和旧表中，如果旧表有排序则还需要注意插入的位置。如果有，说明是旧元素更新，则用新元素的值更新旧元素后，将旧元素加入到临时表中。然后遍历旧表，对旧表中每一个元素在临时表中查看有无对应元素。如果有，则不用做任何处理。如果没有，则说明该元素已经被删除，应该在旧表中将这个元素移除。这样对UI界面的更新看起来会比较平滑。

这里写一下笔者在旺信UWP中所写的差异化更新算法，权当抛砖引玉。

      var bList = new List<bool>();//辅助列表      for (int j = 0; j < MainList.Count; j++)//辅助列表初始与旧表同长      {        bList.Add(false);      }      for (int i = 0; i < groups.Count; i++)//遍历新表      {        bool inserted = false;        bool contains = false;        for (int j = 0; j < MainList.Count; j++)//新表中的元素与旧表对比        {          if (groups[i].key != MainList[j].key)//如果不是同一元素          {            if ((groups[i].key == "群主")//尝试插入              || (                MainList[j].key != "群主" && MainList[j].key != "管理员"                && (groups[i].key == "管理员" || groups[i].key.CompareTo(MainList[j].key) < 0)                )              )            {              MainList.Insert(j, groups[i]);              bList.Insert(j, true);              inserted = true;              Debug.WriteLine("inserted:" + j + "," + groups[i].key);              break;            }          }          else//如果是同一元素，用新表元素内容更新旧表          {            contains = true;            MainList[j].update(groups[i]);            bList[j] = true;            break;          }        }        if ((!contains) && (!inserted))//不包括在旧表内，也没有插入，则追加在旧表尾部        {          MainList.Add(groups[i]);          bList.Add(true);        }      }      for (int i = bList.Count; i > 0; i--)//对比辅助列表，移除旧表中不应再存在的元素      {        if (!bList[i-1])        {          try          {            MainList.RemoveAt(i - 1);          }          catch (Exception)          {            Debug.WriteLine("RemoveAt error:" + i);          }        }      }

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：页面与ViewModel（下）

关键词：ie