处理动态子项时的React键。他们是为了什么？他们如何在幕后使用？

Question

我有这样的代码：

# app/assets/javascripts/components/records.js.coffee 

    @Records = React.createClass 
    ... 
    render: -> 
     React.DOM.div 
     className: 'records' 
     React.DOM.h2 
      className: 'title' 
      'Records' 
     React.DOM.table 
      className: 'table table-bordered' 
      React.DOM.thead null, 
      React.DOM.tr null, 
       React.DOM.th null, 'Date' 
       React.DOM.th null, 'Title' 
       React.DOM.th null, 'Amount' 
      React.DOM.tbody null, 
      for record in @state.records 
       React.createElement Record, key: record.id, record: record 

的关键是什么道具呢？在React的反应数据处理过程中，幕后是如何处理的？

Answer 1

key帮助React跟踪从多个呈现中的数组呈现的组件，因为它可能会改变阵列中的位置或将其添加到数组中或从中移除。例如，如果你第一次渲染

[record3, record2, record1] 

组件和后呈现

[record4, record3, record2, record1] 

阵营会天真地摧毁所有的组件和实例化和呈现在他们的地方新的，因为阵营认为record3成为record4， record2变为record3等等，record1被添加到最后。这导致了四个新的组件，即使孩子有将返回错误的一个shouldComponentUpdate：

record3 -change-> record4 
record2 -change-> record3 
record1 -change-> record2 
      --add---> record1 

不过，如果你唯一标识，通过key属性从每个记录渲染的成分起反应会认识到，record4是添加在开头，让家长更有效地重新描绘：

  --add---> record4 
record3 -same-  record3 
record2 -same-  record2 
record1 -same-  record1 

这一点尤其重要，如果孩子组分是在某种程度上状态。

key属性也用于React的动画系统中，以确定一个组件是否与另一个组件不同（因此应该被转换进或转出）。