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組件用到了，但我們這些開發人員根本就沒有用，那為什麼還要我們去設定呢，直接用預設的不就行了？

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

react 對迴圈warning提示增加key的研究