当前位置：首页 > React

react数组如何渲染

2026-02-26 15:51:41React

渲染数组的基本方法

在React中，可以通过map方法遍历数组并渲染每个元素。map方法会返回一个新的数组，包含对原数组每个元素应用回调函数后的结果。

const items = ['Apple', 'Banana', 'Orange'];

function List() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

使用key属性

当渲染数组时，必须为每个元素提供一个唯一的key属性。这有助于React识别哪些元素发生了变化，提高渲染性能。

react数组如何渲染

const todos = [
  { id: 1, text: 'Learn React' },
  { id: 2, text: 'Build a project' }
];

function TodoList() {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

条件渲染数组元素

可以在map方法内部使用条件语句，有条件地渲染某些元素。

const numbers = [1, 2, 3, 4, 5];

function NumberList() {
  return (
    <ul>
      {numbers.map(number => (
        number % 2 === 0 ? <li key={number}>{number} is even</li> : null
      ))}
    </ul>
  );
}

渲染嵌套数组

对于嵌套数组结构，可以使用多层map方法来渲染。

react数组如何渲染

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

function Matrix() {
  return (
    <table>
      <tbody>
        {matrix.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {row.map((cell, cellIndex) => (
              <td key={`${rowIndex}-${cellIndex}`}>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

使用Fragment渲染

当需要渲染多个相邻元素而不想添加额外DOM节点时，可以使用React Fragment。

const tags = ['React', 'JavaScript', 'HTML'];

function TagList() {
  return (
    <>
      {tags.map((tag, index) => (
        <React.Fragment key={index}>
          <span>{tag}</span>
          {index < tags.length - 1 && ', '}
        </React.Fragment>
      ))}
    </>
  );
}

性能优化

对于大型列表，考虑使用虚拟滚动技术或React.memo来优化性能。

const MemoizedListItem = React.memo(function ListItem({ item }) {
  return <li>{item.text}</li>;
});

function BigList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <MemoizedListItem key={item.id} item={item} />
      ))}
    </ul>
  );
}