React面试：谈谈虚拟DOM，Diff算法与Key机制

1.虚拟dom

原生的JS DOM操作非常消耗性能，而React把真实原生JS DOM转换成了JavaScript对象。这就是虚拟Dom（Virtual Dom）

每次数据更新后，重新计算虚拟Dom，并和上一次生成的虚拟dom进行对比，对发生变化的部分作批量更新。在此其中，React提供了componentShouldUpdate生命周期来让开发者手动控制减少数据变化后不必要的虚拟dom对比，提升性能和渲染效率。

原生html元素代码：

<div class="title">
      <span>Hello ConardLi</span>
      <ul>
        <li>苹果</li>
        <li>橘子</li>
      </ul>
</div>

在React可能存储为这样的JS代码：

const VitrualDom = {
   
  type: 'div',
  props: {
    class: 'title' },
  children: [
    {
   
      type: 'span',
      children: 'Hello ConardLi'
    },
    {
   
      type: 'ul',
      children: [
        {
    type: 'li', children