React总结7:Each child in an array or iterator should have a unique "key" prop.的处理方法

PS:当你在写react的时候报了类似于这样子的错：Each child in an array or iterator should have a unique “key” prop.

解决办法只要在循环的每个子项添加一个key就行了，代码如下：

var names = ['Alice', 'Emily','Kate'];ReactDOM.render(    <div>        {          names.map(function (name, key) {            return <div key={key}>Hello, {name}!</div>          })        }    </div>,    document.getElementById('example'));

原因如下:

 react的key关乎到react的dom-diff算法 react中对于dom的操作是根据生成的data-reactid进行绑定的，添加key可以保证dom结构的完整性，而不会根据react自己对dom标记的key进行重新分配 react每次决定重新渲染的时候，几乎完全是根据data-reactid来决定的，最重要的是这个机制

dom-diff是指： 所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上。它可以极大提高网页的性能表现。

7.20补：
key是专门为React服务的，但是它不会传递给你的组件，也就是说，在组件中，你无法通过props.key来获取它的值，但是它又绑定到了组件中，作为组件的属性而存在，然而，你无法通过this.key,或者是通过参数获取它，它是React特殊处理的。

如果你想获得key的值只能另外设置一个值，然后通过props属性对象获取key的值，如下：

const content = posts.map((post) =>  <Post    key={post.id}    id={post.id}    title={post.title} />);

另外标识一个id属性来传递key的值。

key值的唯一性

兄弟元素之间的key值必须是唯一的，当然不是全局唯一，只是对当前作用域的相关兄弟元素。

function Blog(props) {  const sidebar = (    <ul>      {props.posts.map((post) =>        <li key={post.id}>          {post.title}        </li>      )}    </ul>  );  const content = props.posts.map((post) =>    <div key={post.id}>      <h3>{post.title}</h3>      <p>{post.content}</p>    </div>  );  return (    <div>      {sidebar}      <hr />      {content}    </div>  );}