React中map方法生成的productName1与productName2有何区别（除li标签外）

二者除li标签外的核心区别如下： #

• 返回值类型完全不同
  productName1的map回调返回的是React虚拟DOM对象，本质是React封装的JSX元素实例，你打印该变量会得到包含type: 'li'、props等属性的对象数组。
  productName2的map回调返回的是原数组arr中每一项的name属性原值，类型完全取决于你的Data数据中name字段的定义，绝大多数场景下是字符串/数字这类基础类型的数组。
• 最终渲染效果差异
  你当前把两个变量都放在<h3>标签中渲染的话：productName1会渲染为一组带li默认样式的列表项（自带前置圆点、缩进效果）；productName2会直接把所有name值连续拼接展示，没有任何额外标签和默认样式。
  额外提示：你现在的写法没有给li元素加外层的<ul>/<ol>包裹，属于不符合HTML语义规范的写法，浏览器虽然能正常解析，但不推荐这么使用。
• 二次加工的灵活性不同
  如果后续需要对商品名称做排序、筛选、动态修改展示样式这类操作，productName2存储的原始值更便于做二次处理；而productName1已经封装为固定的JSX元素，二次修改的成本会高很多。

内容的提问来源于stack exchange，提问作者Devon