当前位置：首页 > React

react如何实现列表

2026-02-11 16:00:22React

使用 `map` 方法渲染列表

在 React 中，可以通过 map 方法将数组数据渲染为列表。假设有一个数组 items，可以通过以下方式渲染：

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

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

添加唯一 `key` 属性

React 要求列表中的每个元素必须有唯一的 key 属性，通常使用数据的唯一标识（如 id）或数组索引（不推荐动态列表使用索引）：

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Orange' }
];

function ListComponent() {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

动态列表与状态管理

对于动态列表，可以使用 useState 管理列表状态，并实现添加、删除等操作：

import { useState } from 'react';

function DynamicList() {
  const [items, setItems] = useState(['Apple', 'Banana', 'Orange']);
  const [newItem, setNewItem] = useState('');

  const addItem = () => {
    setItems([...items, newItem]);
    setNewItem('');
  };

  const removeItem = (index) => {
    const updatedItems = items.filter((_, i) => i !== index);
    setItems(updatedItems);
  };

  return (
    <div>
      <input
        value={newItem}
        onChange={(e) => setNewItem(e.target.value)}
      />
      <button onClick={addItem}>Add</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeItem(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

性能优化

对于大型列表，可以使用 React.memo 或虚拟化库（如 react-window）优化性能：

import { memo } from 'react';

const MemoizedItem = memo(function Item({ item }) {
  return <li>{item}</li>;
});

function OptimizedList() {
  const items = ['Apple', 'Banana', 'Orange'];
  return (
    <ul>
      {items.map((item, index) => (
        <MemoizedItem key={index} item={item} />
      ))}
    </ul>
  );
}

使用 Fragment 简化结构

如果不需要包裹元素，可以使用 Fragment 避免额外的 DOM 节点：

react如何实现列表

function FragmentList() {
  const items = ['Apple', 'Banana', 'Orange'];
  return (
    <>
      {items.map((item, index) => (
        <span key={index}>{item}</span>
      ))}
    </>
  );
}