react 對循環warning提示增加key的研究

在學習react遇到這個問題，頁面可以正常工作，但控制台一直出現這個警告，看着很不爽，然后研究怎么解決。具體代碼可以查看我的github:https://github.com/huanlifen/react-key-warning.git

1. warning01/todo.html

代碼片段：

var TodoList = React.createClass({
        render: function() {
            var createItem = function(itemText) {
                return <li key={itemText}>{itemText}</li>;
            };
            return <ul>{this.props.items.map(createItem)}</ul>;
        }
    });

 

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method

在瀏覽器中打開后，點擊“add #7”按鈕會出現上面的警告，原因是數組循環時缺少unique "key" prop,意思就是要有一個不會重復的關鍵參數key。

2.warning02/todo.html

那么，關鍵參數重復了會怎樣呢？

代碼片段：

var TodoList = React.createClass({
        render: function() {
            var createItem = function(itemText) {
                return <li key={itemText}>{itemText}</li>;
            };
            return <ul>{this.props.items.map(createItem)}</ul>;
        }
    });

 

在瀏覽器中打開后，點擊“add #7”按鈕增加重復的對象，會出現：

Warning: flattenChildren(...): Encountered two children with the same key, .$1. Child keys must be unique; when two children share a key, only the first child will be used.

而且，添加不了重復的對象，不同的對象是可以添加的。

1. warning/todo.html

由此，我們可以從表面上理解：在頁面可以正常工作的前提下，這個key要么設置為會重復的關鍵參數，要么不設置。不設置，控制台會出警告，但不影響頁面正常工作。完美的解決方法：就是消除警告，頁面還可以正常工作。

改寫TodoList ，增加key，reactid從0開始遞增，前綴：li_,由此產生不重復的key值。

代碼片段：

var TodoList = React.createClass({
        render: function() {
            var reactid = 0;
            var createItem = function(itemText) {
                return <li key={'li_' + reactid++}>{itemText}</li>;
            };
            return <ul>{this.props.items.map(createItem)}</ul>;
        }
    });

 

在瀏覽器中打開后，沒有警告，頁面可以正常工作。

但是，這個key在傳遞數據的時候根本就沒有用，設置了不是很多余嗎？

有位網友在http://pandakeeper.net:8000/?p=254 中是這么說的：

 react的key關乎到react的dom-diff算法 react中對於dom的操作是根據生成的data-reactid進行綁定的，添加key可以保證dom結構的完整性，而不會根據react自己對dom標記的key進行重新分配 react每次決定重新渲染的時候，幾乎完全是根據data-reactid來決定的，最重要的是這個機制

dom-diff是指： 所有的 DOM 變動，都先在虛擬 DOM 上發生，然后再將實際發生變動的部分，反映在真實 DOM上。它可以極大提高網頁的性能表現。

不過我還不是不明白：這個key在頁面渲染的時候react組件用到了，但我們這些開發者根本就沒有用，那為什么還要我們去設置呢，直接用默認的不就行了？

有答案的時候我會更新的，敬請期待。。。。