react 列表渲染

https://reactjs.org/docs/lists-and-keys.html#keys

以下代码运行会报错：Warning: Each child in an array or iterator should have a unique 'key' prop.

const arr = [<li>{numbers[0]}</li>,<li>{numbers[0]}</li>,<li>{numbers[1]}</li>]
return (
    <ul>{arr}</ul>
);

改成这样子，就不会报错了：

  return (
    <ul>
      <li>{numbers[0]}</li>
      <li>{numbers[0]}</li>
      <li>{numbers[1]}</li> 
    </ul>
  );

以上的区别是什么？

　　当 渲染一个数组 的时候，必须要为数组中的单元设置一个key属性，这是react的要求。用于让react去跟踪数组元素的增加和删除、移动等，这是key唯一的作用。当元素从数组中读取出来时，react没办法直接跟踪，需要通过key。

对key的要求

要添加在数组item元素的根元素上，而且对于当前数组来说是唯一和稳定的，可以采用如下方式来生成id：

var shortid = require('shortid');
function createNewTodo(text) {
  return {
    completed: false,
    id: shortid.generate(),
    text
  }
}

key可以使用索引，但不推荐，因为这可能会使列表展示错误的数据，以下来演示一下：

class List extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            arr:[9,8,7]
        }
        this.changeArr = this.changeArr.bind(this);
    }
    changeArr(){
        this.setState((preState)=>{
            preState.arr.unshift(10);
            return {
                arr:preState.arr
            }
        })
    }
    render(){
        return (
            <div>
                <button onClick={this.changeArr}>change</button>
                <ul>
                    {this.state.arr.map((item,index) =>
                        <li key={item}>
                            {item}  <input />
                        </li>
                    )}
                </ul>
            </div>
        )
    }
}

在线运行：https://codepen.io/gaearon/pen/jrXYRR?editors=0011，以上input的作用是记录dom的状态，可以简单判断dom有没有被重新创建

测试发现规律如下：

不指定key，控制台出现warning，默认以index为key，显式指定key=index，则不报warning，但运行的效果和不指定一样，因为默认都是index为key【这和vue一致，都是默认“就地复用”，以上相同的测试对于vue结果一致】。

当render的时候，对比前后两个虚拟dom，发现key一样则复用这个dom，即刷新后，被复用dom的状态依然和render前一样【以上的input输入的值会保留】

如果key中出现相同的值（假设为5），则第一个key为5的dom会复用之前的dom，而后一个key为5的则创建新的dom

key的作用是跟踪数组中dom的变化，

我提出的问题：

　　https://stackoverflow.com/questions/48032286/the-detail-in-react-list-render

　　https://segmentfault.com/q/1010000012649420

补充vue的测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
</head>
<body>
    <div id="root">
        <button @click="this.change">change</button>
        <div v-for="(item ,index) in arr" :key="item"> {{item}}
            <input type="text">
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            arr:[1,2,3],
        },
        methods:{
            change:function(){
                vm.arr.unshift(1)
            }
        }
    });
</script>
</html>

ps：vue1中出现相同元素，如[1,2,1]，会报错，vue2以后不会了，指定的key只能是原始类型，而不能是对象类型