Javascript 在React中迭代数据数组时呈现JSX元素的最有效方法

我有一个包含对象的数组。我正在创建此数组的映射，以使用

span

组件渲染名称

let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];

我一直在使用下面两种不同的功能来迭代对象数组，并使用map来渲染JSX元素

功能1：

import React，{Component}来自'React'；
类应用程序扩展组件{
render（）{
let data=[{“id”：“01”，“name”：“Hi”}，{“id”：“02”，“name”：“Hello”}]；
const items=data.map（（键，i）=>{
返回{key.name}；
});
返回(
{items}
);
}
}
导出默认应用程序；

功能2：

import React，{Component}来自'React'；
类应用程序扩展组件{
render（）{
let data=[{“id”：“01”，“name”：“Hi”}，{“id”：“02”，“name”：“Hello”}]；
让行=[]；
data.map（（键，i）=>{
rows.push（{key.name}）；
});
返回(
{rows}
);
}
}
导出默认应用程序；

---

我知道上面两种使用

map

和呈现JSX元素的不同方法。除了这两种方法之外，还有其他的方法吗？如果是，推荐哪种方法？

第一种方法更好

Array.prototype.map

在幕后创建一个数组，并在对每个元素应用修改后返回该数组Functionality-1创建两个数组，而Functionality-2创建三个数组

功能-1读起来更好。这是代码通常编写的方式。对于这样一个简单的元素，我将保存items的常量定义，并将map语句放在JSX中，直接返回

我会这么做

const data = [{id: 1, name: 'a'}, {id: 2, name: 'b'}];

export default class App extends PureComponent {
  render() {
    return (
      <div>
        {data.map(({ id, name }) => <span key={id}>{name}</span>)}
      </div>
    );
  }
}

const data=[{id:1，名称：'a'}，{id:2，名称：'b'}]；
导出默认类应用程序扩展PureComponent{
render（）{
返回(
{data.map（（{id，name}）=>{name}）
);
}
}

---

现在，您的

数据不会在每次渲染时重新实例化，您也不必垃圾收集任何不必要的变量声明。
为了更好地理解，您可以使用它

 const data = [{id: 1, name: 'a'}, {id: 2, name: 'b'}];

export default class App extends React.Component {
  render() {
    return (
      <div>
        {data.map((data, dataIndex ) => <span key={dataIndex}>{data.name}</span>)}
      </div>
    );
  }
}

const data=[{id:1，名称：'a'}，{id:2，名称：'b'}]；
导出默认类App扩展React.Component{
render（）{
返回(
{data.map（（数据，数据索引）=>{data.name}）
);
}
}

在这里您可以理解名称属于with attribute。
我主要遵循以下规则：

创建一个呈现项目的组件

// in some file
export const RenderItems = ({data}) => {
  return data && data.map((d, i) => <span key={d.id}>{d.name}</span>) || null
}

了解为什么在使用索引作为键时遵循此语法


更新：
如果希望避免使用不必要的html标记，可以使用

这将以html格式呈现
d.name
的值，不带任何标记。当我们专门将现有设计转换为react应用程序时，这被认为是最好的。或者，可能还有其他情况。例如，我们将显示一个定义列表：

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dd>
</dl>

可以考虑破坏：
const { items, ...other } = props
// and in your component you can use like:
<div modalData={other.modalData}>

const{items，…other}=props
//在您的组件中，您可以使用：

但是，就个人而言，我更喜欢使用第一个示例代码。这是因为在开发过程中，我不需要每次都回顾其他组件或寻找控制台。在给定的示例中，有一个类似
modalData={}
的键，因此我们可以轻松地维护
modalData={other.modalData}
。但是如果需要像
{modalData}
那样编码，该怎么办？那么，您也可以同意我的偏好。
一般来说，
for
或
while
语句是迭代数组最有效的方法。在非关键位置处理小阵列的方式可被视为微优化

map
的使用在React组件中是惯用的，因为它足够快，可以作为表达式的一部分返回值

虽然这是一个反模式：

let rows = [];
data.map((key, i) => {
  rows.push(<span key={key.id}>{key.name}</span>);
});

第一种方法是正确的。使用map函数遍历数组


导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[{“id”：“01”，“name”：“Hi”}，{“id”：“02”，“name”：“Hello”}]；
};
}
render（）{
返回(
{this.state.data.map（（数据，索引）=>
{data.name}
)}             
);
}
}
我将使用
返回（…）
中的
映射，因为映射返回一个数组。它更清晰易读，这是我个人努力追求的

为了补充答案，如果数组
数据
可能会发生变化，我会创建一个新的无状态转储组件：

const Spanner = props => { return <span key={ props.data.id }>{ props.data.name }</span> };

class App extends Component {
  render() {
    let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];
      return (
        <div>
          { 
            data.map( (item, ind) => {
              return (<Spanner key={item.id} data={item.name} />);
            })
          }
        </div>
      );
    }
  }
}

这样，您就不会重复自己的操作，即使现在新的
数据
数组具有新的键
用户类型
，您的应用程序组件仍然具有预期的行为。
这也是我应该做的。
可以重用函数
toSpan

class App extends React.Component {
  render() {
    const data = [{id: `01`, name: `Hi`}, {id: `02`, name: `Hello`}]
    const toSpan = ({id, name}) => <span key={id}>{name}</span>
    return (
      <div>{data.map(toSpan)}</div>
    )
  }
}

类应用程序扩展了React.Component{
render（）{
const data=[{id:`01`，name:`Hi`}，{id:`02`，name:`Hello`}]
常量toSpan=（{id，name}）=>{name}
返回(
{data.map（toSpan）}
)
}
}
“functional2”在调用从未使用过的
.map
时创建数组。切换到
data.forEach
，这样就不会创建不必要的数组。但这仅在分配给引用权限时有效？like const array=data.map（如果我错了，请纠正我否，数组是创建的，无论您是否将其分配给变量。在上面的代码中，数组是创建的，然后立即符合垃圾收集的条件，因为没有引用指向它。如果切换到，则不会创建额外的数组。确定了解。谢谢。您还可以帮助我使用其他呈现方式吗当我们在迭代中呈现jsx元素时，除了我提到的和下面提到的其他元素之外
export const RenderItems = ({data}) => {
  return data && 
    data.map(
      (d, i) => <React.Fragment key={d.id}>{d.name}</React.Fragment>
    ) || null
}
// and when rendering, you just return the component
return <RenderItems data={data} />

<>{d.name}</>

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dd>
</dl>

<>
  <dt>{d.term}</dt>
  <dd>{d.definition}</dd>
</>

const {
  items,
  id,
  imdbID,
  title,
  poster,
  getMovieInfo,
  addToFavorites,
  isOpen,
  toggleModal,
  closeModal,
  modalData,
} = props

const { items, ...other } = props
// and in your component you can use like:
<div modalData={other.modalData}>

let rows = [];
data.map((key, i) => {
  rows.push(<span key={key.id}>{key.name}</span>);
});

const data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];

const App = props => <div>
  {data.map(({ id, name }) => <span key={id}>{name}</span>)}
</div>;

const Spanner = props => { return <span key={ props.data.id }>{ props.data.name }</span> };

class App extends Component {
  render() {
    let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];
      return (
        <div>
          { 
            data.map( (item, ind) => {
              return (<Spanner key={item.id} data={item.name} />);
            })
          }
        </div>
      );
    }
  }
}

const UserWidget = (props) => {
  return (
    <div>
      <h4>{ props.type }</h4>
      <Spanner key={ props.key } data={ props.name }/>
    </div>
  );
}
// now both the UserWidget and the Spanner Components can be used wherever required
// say a dashboard Component wants to use the UserWidget
class Dashboard extends Component {
  render() {
    let data = [{"id": "01", "name": "Hi", "userType": "Admin"}, {"id": "02", "name": "Hello", "userType": "Client"}];
      return (
        <div>
          { 
            data.map( (item, ind) => {
              return (<UserWidget type={ item.userType } key={item.id} data={item.name} />);
            })
          }
        </div>
      );
    }
  }
}

class App extends React.Component {
  render() {
    const data = [{id: `01`, name: `Hi`}, {id: `02`, name: `Hello`}]
    const toSpan = ({id, name}) => <span key={id}>{name}</span>
    return (
      <div>{data.map(toSpan)}</div>
    )
  }
}