react基础面试

1. React中keys的作用是什么？在开发的过程中，我们需要保证某个元素的key在其同级元素中具有唯一性。因此React Diff算法中React会借助元素的key值来判断高元素是新近创建的还是被移动而来的元素，进而减少一些不必要的元素重新渲染，提高性能。此外，React还需要借助key值来判断元素与本地状态的关联关系，因为key值在开发的过程中非常重要。keys是react用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

   render() {
       return (
           <ul>
               {this.state.todoItem.map((item,key) => {
                   return <li key={key}>{item}</li>
               })}
           </ul>
       )
   }

    

2. key值很重要，所以我们在开发的时候应该选择什么作为key值呢？首先举一个例子，我们有一个数组

   [
       {
           id: 1000,
           name: 'xiaowang',
       },
       {
           id: 1001,
           name: 'xiaoli',
       },
       {
           id: 1002,
           name: 'xiaozhang',
       },{
           id: 1003,
           name: 'xiaosun',
       },{
           id: 1004,
           name: 'xiaoniu',
       }
   ]

   假如我们使用index作为key在我们渲染页面的时候变成

   <ul>
       li key:0 id:1000,name:xiaowang
       li key:1 id:1001,name:xiaoli
       li key:2 id:1002,name:xiaozhang
       li key:3 id:1003,name:xiaosun
       li key:4 id:1004,name:xiaoniu
   </ul>

    

   如果我们要在中间插入一条数组{id:10005,name:xiaoshi}

   ​
   <ul>
       li key:0,id:1000,name:xiaowang
       li key:1,id:1005,name:xiaoshi
       li key:2,id:1001,name:xiaoli
       li key:3,id:1002,name:xiaozhang
       li key:4,id:1003,name:xiaosun
       li key:5,id:1004,name:xiaoniu
   </ul>
   
   ​

   当我们在中间插入新元素的时候，新元素的key值理所应当的就变成了index=1,key值也就变成了1而原本index==1的li元素的index就变成了2，原本的index==2的元素的key值就变成了3.这样就导致虚拟dom的diff算法在做比较的时候发现，key值为1,2,3的元素和原来的key值为1,2,3的元素对比的时候发现二者不一样，diff算法就会重新渲染这三个元素，原本key值为1,2的元素内容并没有发生变化，但是因为key值使用的是index所以还需要重新渲染，这就失去了虚拟dom在性能上的优势，所以我们要使用唯一键值来做标记，例如id.

          如果我们使用id为key在我们渲染到页面的时候变成

<ul>
    li key:1000 id:1000,name:xiaowang
    li key:1001 id:1001,name:xiaoli
    li key:1002 id:1002,name:xiaozhang
    li key:1003 id:1003,name:xiaosun
    li key:1004 id:1004,name:xiaoniu
</ul>

如果我们要在中间插入一条数组{id:1005,name:xiaoshi}

<ul>
    li key:1000 id:1000,name:xiaowang
    li key:1005 id:1005,name:xiaoshi
    li key:1001 id:1001,name:xiaoli
    li key:1002 id:1002,name:xiaozhang
    li key:1003 id:1003,name:xiaosun
    li key:1004 id:1004,name:xiaoniu
</ul>

因为我们是已id为key值，所以当我们向数组中间插入一个新的数据，diff算法发现原本的三个<li>的key值没改变，只是在中间加入了一个新的元素，原本的三个<li>得到了复用这也就利用了虚拟dom在性能上的优势