Study on adding key to circular warning tip by react

In learning react encounter this problem, the page can work, but the console has been the warning, looked very uncomfortable, and then study how to solve. The specific code can see my Github:https://github.com/huanlifen/react-key-warning.git

1. Warning01/todo.html

Code snippet:

var ToDoList = React.createclass ({        function() {            varfunction() Itemtext) {                return <li key={itemtext}>{itemtext}</li>;            };             return <ul>{this. Props.items.map (CreateItem)}</ul>;         }    });

Warning:each child in an array or iterator should has a unique "key" prop. Check the Render method

When opened in the browser, click on the "Add #7" button will appear above the warning, because the array loop is missing the unique "key" prop, meaning that there is a key parameter will not be repeated keys.

2.warning02/todo.html

So what happens when the key parameters are repeated?

Code snippet:

var ToDoList = React.createclass ({        function() {            varfunction() Itemtext) {                return <li key={itemtext}>{itemtext}</li>;            };             return <ul>{this. Props.items.map (CreateItem)}</ul>;         }    });

After opening in the browser, click on the "Add #7" button to add duplicate objects, which will appear:

Warning:flattenchildren (...): encountered-children with the same key .$1 . Child keys must is unique; When both children share a key, only the first child would be used.

Also, you can't add duplicate objects, and different objects can be added.

1. Warning/todo.html

From this, we can understand on the surface: if the page can work properly, this key is either set to repeat the key parameters, or not set. Not set, the console warns you, but does not affect the page's functioning. The perfect solution: to eliminate the warning, the page will work properly.

Rewrite todolist, increase Key,reactid from 0 onwards, prefix: li_, resulting in a non-duplicated key value.

Code snippet:

var ToDoList = React.createclass ({        function() {            var reactid = 0;             var function (itemtext) {                return <li key={' li_ ' + reactid++}>{itemtext}</li>;            };             return <ul>{this. Props.items.map (CreateItem)}</ul>;         }    });

After opening in the browser, there is no warning that the page will work correctly.

However, this key in the delivery of data is not used at all, set not many more?

A netizen in the http://pandakeeper.net:8000/?p=254 said so:

React key relates to the react Dom-diff algorithm react the operation of the DOM is based on the generated data-reactid to bind, add key can guarantee the integrity of the DOM structure, Instead of reallocating the DOM-tagged key according to react's own react each time a decision is made to re-render, it is almost entirely based on the Data-reactid, and most importantly, the mechanism

Dom-diff means that all DOM changes occur first on the virtual DOM, and then the actual changes are reflected on the real DOM. It can greatly improve the performance of Web pages.

But I still do not understand: This key in the page rendering when the react component used, but we developers are no use, then why do we have to set it, directly with the default is not the line?

I will update it when I have the answer, please look forward to ....

Study on adding key to circular warning tip by react