<ol>
  <li>One</li>
  <li>Two</li>
  <li>3</li>
</ol>

接下来，单击页面顶部的 Set values 按钮，这将执行JavaScript向每个<li>添加一个新属性，以记录它所帮助的原始文本。

现在，您应该会看到浏览器的元素检查器中的元素更改为以下内容：

<ol>
  <li originalValue="One">One</li>
  <li originalValue="Two">Two</li>
  <li originalValue="3">3</li>
</ol>

最后，单击更改数据按钮。这将执行C#代码来更改列表<string>中的值，然后Blazor将重新呈现其视图。现在检查元素应显示以下内容：

<ol>
  <li originalValue="One">1</li>
  <li originalValue="Two">2</li>
  <li originalValue="3">3</li>
  <li>4</li>
</ol>

1. 文本为“One”的项目的文本更改为“1”。
2. 文本为“2”的项目已将其文本更改为“2”。
3. 案文为“3”的项目保持不变。
4. 添加文本为“4”的新项目已添加。

我们可以看到现有的元素被重用了，因为元素的OriginalValue属性不是由Blazor生成的，但是它们仍然存在。Blazor新创建的新元素没有originalValue属性。

👍Optimising using @key 使用@Key进行优化

提示：对于运行时在循环中生成的组件，请始终使用@Key。

前面的示例运行良好，因为Blazor能够轻松地将虚拟DOM元素与Brower的DOM中的正确元素相匹配，当元素成功匹配时，使用更少的更改就可以更容易地更新它们。
然而，当元素重新排列时，这就变得更加困难。以用户身份证列表为例。

使用增量RenderTree Proof作为起点，编辑/Pages/Index.razor并输入以下标记。

@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<button @onclick=@ChangeData>Change data</button>
<style>
    .card-img-top {
        width: 150px;
        height: 150px;
    }
</style>
<ol>
    @foreach (Person person in People)
    {
        <li class="card">
            <img class="card-img-top" src="https://randomuser.me/api/portraits/men/@(person.ID).jpg" />
            <div class="card-body">
                <h5 class="card-title">
                    @person.GivenName @person.FamilyName
                </h5>
                <p class="card-text">
                    @person.GivenName @person.FamilyName has the id @person.ID
                </p>
            </div>
        </li>
    }
</ol>
@code {
    List<Person> People = new List<Person>
    {
        new Person(1, "Peter", "Morris"),
        new Person(2, "Bob", "Monkhouse"),
        new Person(3, "Frank", "Sinatra"),
        new Person(4, "David", "Banner")
    };
    void ChangeData()
    {
        var person = People[0];
        People.RemoveAt(0);
        People.Add(person);    
    }
    class Person
    {
        public int ID { get; set; }
        public string GivenName { get; set; }
        public string FamilyName { get; set; }
        public Person(int id, string givenName, string familyName)
        {
            ID = id;
            GivenName = givenName;
            FamilyName = familyName;
        }
    }
}

该页面本质上与我们以前显示简单整数列表时相同，但现在有以下更改。

• 第46行：定义了名为 Person 的新类。注意: 这个新类通常放在它自己的源文件中，但是为了简单起见，在这个例子中是按行排列的。
• 第32行：定义一个名为 People 的私有成员，并添加两个项以在视图中显示。
• 第40行：删除列表开头的人，并将他们添加到列表的结尾。
• 第15行：将人员列表显示为 Bootstrap 提示卡。

现在运行应用程序。单击Set Values按钮并检查列表中的元素，我们将看到如下所示：

<ol>
  <li class="card" originalValue=" Peter Morris Peter Morris has the id 1">
    ...Html for Peter Morris
  </li>
  <li class="card" originalValue=" Bob Monkhouse Bob Monkhouse has the id 2">
    ...Html for Bob Monkhouse
  </li>
  <li class="card" originalValue=" Frank Sinatra Frank Sinatra has the id 3">
    ...Html for Frank Sinatra
  </li>
  <li class="card" originalValue=" David Banner David Banner has the id 4">
    ...Html for David Banner
  </li>
</ol>

但是，当我们单击Change data按钮，然后再次检查元素时，我们会看到，尽管数据中的元素是相同的(只是重新排序)，但HTML中的所有元素都已更新。这从OriginalValue表示以前由该元素持有的人这一事实可以明显看出，这意味着为了显示正确的HTML标记，必须更新许多子元素。

<ol>
  <li class="card" originalValue=" Peter Morris Peter Morris has the id 1">
    ...Html for Bob Monkhouse
  </li>
  <li class="card" originalValue=" Bob Monkhouse Bob Monkhouse has the id 2">
    ...Html for Frank Sinatra
  </li>
  <li class="card" originalValue=" Frank Sinatra Frank Sinatra has the id 3">
    ...Html for David Banner
  </li>
  <li class="card" originalValue=" David Banner David Banner has the id 4">
    ...Html for Peter Morris
  </li>
</ol>

这些更改的增量如下所示：

• Element 1
  1.jpg => 2.jpg
  Peter Morris => Bob Monkhouse
• Element 2
  2.jpg => 3.jpg
  Bob Monkhouse => Frank Sinatra
• Element 3
  3.jpg => 4.jpg
  Frank Sinatra => David Banner
• Element 4
  4.jpg => 1.jpg
  David Banner => Peter Morris

总共有三个HTML元素针对每个人进行了更改。如果Blazor能检测到元素何时重新排列就更好了。这样，当重新排列数据时，从虚拟DOM到浏览器DOM的增量更改也将是一个简单的重新排列。

Identifying elements with @key

这正是@key指令的作用所在。编辑第17行，更改<li class="card">并添加密钥，如下所示：

<li class="card" @key=person>

1. 运行应用程序。
2. 单击设置值按钮。
3. 单击更改数据按钮。
4. 右键单击列表中的第一项并检查该元素。

现在，我们看到的不是包含Person 2内部HTML的Element 1，而是内部HTML完全保持不变，并且<li>元素只是被重新排列。

<ol>
  <li class="card" originalValue=" Bob Monkhouse Bob Monkhouse has the id 2">
    ...Html for Frank Sinatra
  </li>
  <li class="card" originalValue=" Frank Sinatra Frank Sinatra has the id 3">
    ...Html for David Banner
  </li>
  <li class="card" originalValue=" David Banner David Banner has the id 4">
    ...Html for Peter Morris
  </li>
  <li class="card" originalValue=" Peter Morris Peter Morris has the id 1">
    ...Html for Bob Monkhouse
  </li>
</ol>

显然，当您希望重新排列数据或从列表末尾以外的任何位置添加/删除任何项时，在任何时候呈现列表中的项时使用@key指令都是有利的。
@key使用的值可以是任何类型的对象。我们可以使用Person实例本身，或者，如果列表中的实例发生更改，则可以使用类似Person.ID的内容。