React 循环组件和 HTML 元素答案

【问题标题】：React looping component and HTML ElementReact 循环组件和 HTML 元素
【发布时间】：2020-10-19 15:58:03
【问题描述】：

在下面的 React 代码中，我的期望是用数组中的项目迭代一个段落 5 次。所以，在Type one中，我直接用<p></p>标签来展示，搞定了…… 在类型二中，我迭代了一个新组件，它内部有一个 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>
  );
}

QuickComp.js

import React from "react";

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

【问题讨论】：

标签： javascript arrays reactjs

【解决方案1】：

首先不要使用 map 。简单的使用 forEach。 forEach() 不会改变调用它的数组。

【讨论】：

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

【解决方案2】：

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

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

【讨论】：