经由过程比较树中的元素是不是在统一位置，一般已充足推断是不是是重用照样再次建立通讯组件了。

然则这只在子元素的位置是静止的而且不须要重排。在我们的上述的例子中，纵然message不存在，我们依然只带input在message以后，而且没有其他的子元素。

关于动态列表，我们不能肯定递次是不是会一致：

function ShoppingList({ list }) {
  return (
    <form>
      {list.map(item => (
        <p>
          You bought {item.name}
          <br />
          Enter how many do you want: <input />
        </p>
      ))}
    </form>
  )
}

假如shopping项目没有被重排，React把一切的p和input元素看作是一个范例，而且不知道怎样挪动他们。（从react的视角看，是商品的项目自身转变了，而不是他们的递次）
React实行的10个商品项目的重排会是下面如许：

for (let i = 0; i < 10; i++) {
  let pNode = formNode.childNodes[i];
  let textNode = pNode.firstChild;
  textNode.textContent = 'You bought ' + items[i].name;
}

So instead of re-ordering them, React would effectively update each of them. This can create performance issues and possible bugs. For example, the content of the first input would stay reflected in first input after the sort — even though conceptually they might refer to different products in your shopping list!

This is why React nags you to specify a special property called key every time you include an array of elements in your output:

所以React会更新每个元素而不是对他们举行重排。这能够会引起机能题目和能够的bugs。比方，当商品列表的递次转变时，原本在第一个输入框的内容依然会存在于如今的第一个输入框中 — 只管事实上在商品列内外它应当代表着其他的商品！
这就是为何React会提醒你为每个数组的遍历元素标记一个独占的key属性：

function ShoppingList({ list }) {
  return (
    <form>
      {list.map(item => (
        <p key={item.productId}>
          You bought {item.name}
          <br />
          Enter how many do you want: <input />
        </p>
      ))}
    </form>
  )
}

key 给予 React 推断子元素是不是真正雷同的才能，纵然在衬着前后它在父元素中的位置不是雷同的。

当 React 在 <form> 中发明 <p key=”42″> ，它就会搜检之前版本中的 <form> 是不是一样含有 <p key=”42″> 。纵然 <form> 中的子元素们转变位置后，这个要领一样有用。在衬着前后当 key 依然雷同时，React 会重用先前的宿主实例，然后从新排序其兄弟元素。

须要注重的是 key 只与特定的父亲 React 元素相关联，比方 <form> 。React 并不会去婚配父元素差别但 key 雷同的子元素。（React 并没有习用的支撑对在不从新建立元素的情况下让宿主实例在差别的父元素之间挪动。）

给 key 给予什么值最好呢？最简朴的答案就是：哪时刻一个元素不会转变纵然它在父元素中的递次被转变？ 比方，在商品列表中，商品自身的 ID 是区分于其他兄弟商品的标识。