Javascript React循环组件和HTML元素

在下面的React代码中，我的期望是使用数组中的项对段落进行5次迭代。 因此，在类型一中，我直接使用

标记来显示并获取它。。。 在类型2中，我迭代了一个新组件，该组件内部有一个

p

标记。。。这两种方法的区别是什么。。因为在这两种类型中，DOM元素都是最小化的。。它是否会影响任何绩效策略，或者它会使绩效策略有所不同。。。提前谢谢

App.js

import React from "react";
import QuickComp from "./QuickComp";

export default function App() {
  return (
    <React.Fragment>
      // Type One
      {["1", "2", "3", "4", "5"].map(item => {
        return <p>{item}</p>;
      })}
      <br />
      //Type Two
      {["a", "b", "c", "d", "e"].map(item => {
        return <QuickComp name={item} />;
      })}
    </React.Fragment>
  );
}

import React from "react";

export default function QuickComp(props) {
  return <p>{props.name}</p>;
}

从“React”导入React；
从“/QuickComp”导入QuickComp；
导出默认函数App（）{
返回(
//第一类
{[“1”、“2”、“3”、“4”、“5”]地图（项目=>{
返回{item}
；
})}


//第二类
{[“a”、“b”、“c”、“d”、“e”].地图（项目=>{
返回；
})}
);
}

QuickComp.js

import React from "react";
import QuickComp from "./QuickComp";

export default function App() {
  return (
    <React.Fragment>
      // Type One
      {["1", "2", "3", "4", "5"].map(item => {
        return <p>{item}</p>;
      })}
      <br />
      //Type Two
      {["a", "b", "c", "d", "e"].map(item => {
        return <QuickComp name={item} />;
      })}
    </React.Fragment>
  );
}

import React from "react";

export default function QuickComp(props) {
  return <p>{props.name}</p>;
}

从“React”导入React；
导出默认功能QuickComp（道具）{
返回{props.name}
；
}

首先不要使用地图。简单使用forEach。

---

forEach（）不会改变调用它的数组。

当我们选择单独的组件时，它可以在我们的react项目中重用，因此我们可以在单个组件中进行更改，而不是更改所有出现的组件。谈到您的问题，您可以看到项目中直接渲染元素和多次使用p元素之间的区别

---

考虑一下在我们的项目中，您应该在多个组件中使用p元素，但所有元素看起来都一样，值也不同。在这种情况下，您可以像在第二种方法（QuickComp）中那样为p创建单独的组件，以便我们可以重用它。

err，在这种情况下，改变数组实际上是目标。