与 Vue 不相同，React 使用 JS / JSX 的表达式组合而成，并没有所谓的指令。要用原生 JS 的方法来进行渲染。
    JSX 一般使用 Array.prototype.map 方法来进行列表渲染
    点击查看【codepen】
    列表中的每个子元素都必需一个唯一的 key 属性值

    • key 是 React 查看 元素是否改变 的一个唯一标识
    • key 必须在兄弟节点中唯一，确定的（兄弟节点是一个列表中的兄弟元素）

    不建议使用 index 做为 key 值 （禁止）
    建立在列表顺序改变、元素增删的情况下

    • 列表项增删或顺序改变了，index 的对应项就会改变
    • key 对应的项还是之前列表情况的对应元素的值
    • 导致状态混乱，查找元素性能就会变差

    如果列表静态不可以操作的，可以选择 index 作为 key，但也不推荐，因为很有可能这个列表在以后维护 扩展的时候，有可能变更为可操作的列表

    好的做法：

    1. 尽量避免使用 index
    2. 可以用数据的 ID （有可能 ID 会变动）
    3. 使用动态生成一个静态 ID
      • nanoid

    key 赋值的正确姿势
    点击查看【codepen】
    对于需要多次 map 多层渲染，React 建议把每层提取为一个子组件，以提升性能。