如何獲得React key屬性的清晰概念？

我最近一直在使用ReactJS，但是當涉及到「key」屬性時，我真的不知道它是如何工作的。如何獲得React key屬性的清晰概念？

說，在父組件我不喜歡渲染：

render: function() { 

    // dataList = [{id: 1}, {id: 2}, {id: 3}]; => initial state 
    // dataList = [{id: 2}, {id: 3}, {id: 4}]; => second dataList state 

    var someComponentList = []; 

    this.state.dataList.forEach(function(data) { 
    someComponentList.push(
     <SomeComponent key={data.id} id={data.id}/> 
    ) 
    }) 

    return (
    <div> 
     {someComponentList} 
    </div> 
    ) 
}

在SomeComponent：

var SomeComponent = React.createClass({ 
    render : function({ 
     // Render work here 
    }), 
    componentWillReceiveProps: function(nextProps) { 
     console.log(this.props.id == nextProps.id); 
    } 
})

所以在componentWillReceiveProps我預計3 false控制檯的結果（這是我做，如果我沒有給key屬性爲<SomeComponent>）setState()後，但實際上我只有1假，因爲ReactJs似乎知道{id: 2} & {id: 3}是我dentical即使他們給出了不同的順序dataList狀態

我發現Reactjs官方一些簡單的文檔：

如果REACT調和鍵控孩子，這將確保與關鍵任何兒童將被重新排序（而不是摔倒）或被摧毀（而不是重複使用）。

有人可以解釋它是如何工作的？

來源

2015-04-28 skylying

它看起來像你的'componentWillReceiveProps'在父組件上，而不是'SomeComponent' – Thilo

https://facebook.github.io/react/docs/reconciliation.html#keys

如果指定鍵，陣營現在能夠使用哈希表中查找插入，刪除，替換並移動在爲O（n）。

這只是一個簡單的哈希表（兄弟姐妹）查找，並且使React嘗試重用具有相同密鑰的組件。

粗略的解釋，
無鍵：
[1] [2] [3]
[2] [3] [4]
列表明智DIFF，[updateAttributes X3]
連鍵：
[1] [2] [3]無
無[2] [3] [4]
列表[2] [3] [4]，[2]與[2] [3]沒有變化，[4]在原始列表中沒有鍵和沒有更多節點，因此插入[1]將被銷燬

來源

2015-04-28 03:08:59 user120242

很好的共享，謝謝 – skylying

如何獲得React key屬性的清晰概念？

回答

相關問題