react循环实现及key的作用

首先，我们需要引入react的库

<script type="text/javascript" src="../day03/js/react.development.js"></script>
<script type="text/javascript" src="../day03/js/react-dom.development.js"></script>
<script type="text/javascript" src="../day03/js/babel.min.js"></script>

接着我们定义一组数据，可以是数组或者是对象

class Person extends React.Component{
    state={
        PersonArr:[
            {
                id:1,
                name:'大哥',
                age:19
            },
            {
                id:2,
                name:'二弟',
                age:23
            },
        ]
    }
}

接下来，我们进行数据的循环，有两种写法，一个是写在return之前，另一种方法是写在根标签中

 render(){
        let dom=this.state.PersonArr.map((item,index)=>{
            return <li key={item.id}>{item.name}</li>
        })
        return(
            <div>
                <h4>三傻进城</h4>
                <ul>
                   {dom} 
                </ul>    
            </div>
        )
    }

如上所示，我们的数据循环就完成了，但是在li标签中，我们使用了key，如果不写key，那么他会给我们进行报错，不会影响页面的渲染，错误如下

key的介绍： 

key的作用：唯一标识，可以提升性能，避免虚拟dom渲染偷懒产生bug
场景：在使用index作为key是，逆向添加数据，产生key变化，造成页面渲染异常
推荐：使用id作为唯一标识
提升性能：减少不必要的重复渲染

duff算法：

    1.虚拟dom对象前后对比，当key值不同时，直接进行真实dom渲染
    2.虚拟dom对象前后对比，当key值相同时，内容不同时，替换内容渲染真实dom
    3.key值相同，会进行虚拟dom树层层对比，相同的复用，不同的重新渲染真实dom