處理動態子項時的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的動畫系統中，以確定一個組件是否與另一個組件不同（因此應該被轉換進或轉出）。