关于react列表渲染的疑问，跪求解答！

Question

文档以及很多博客都提到key用于列表元素项的复用，在虚拟dom元素进行对比的时候会用到这个key，以下两种方式有什么区别？

方式1：

const arr = [<li>{numbers[0]}</li>,<li>{numbers[0]}</li>,<li>{numbers[1]}</li>]

return (

    <ul>{arr}</ul>

);

以上会报错：

Warning: Each child in an array or iterator should have a unique 'key' prop.

方式2：

return (

    <ul>

      <li>{numbers[0]}</li>

      <li>{numbers[0]}</li>

      <li>{numbers[1]}</li> 

    </ul>

  );

运行不会报错。

问题：以上两种方式创建出来的虚拟dom不是一样的吗？为什么后者不会报key错呢？

Answer 1

因为第二种方式里li是固定的，第一种方式对react来说li是动态的，通过for循环创建的