当前位置：首页 > React

react如何实现列表

2026-03-30 18:59:57React

使用 `map` 方法渲染列表

在 React 中，可以通过 map 方法遍历数组并生成列表项。假设有一个数组 items，可以将其渲染为 <li> 元素列表：

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

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

添加唯一 `key` 属性

React 要求列表中的每个子元素必须有一个唯一的 key 属性，通常是数据的唯一标识（如 id）。避免使用数组索引作为 key，除非列表是静态的：

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>
  );
}

动态加载列表数据

如果数据来自 API 或异步操作，可以使用 useState 和 useEffect 动态加载：

import { useState, useEffect } from 'react';

function DynamicList() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/items')
      .then(response => response.json())
      .then(data => setItems(data));
  }, []);

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

列表过滤与排序

可以通过 JavaScript 方法（如 filter 或 sort）处理列表数据后再渲染：

const filteredItems = items.filter(item => item.price > 10);
const sortedItems = [...items].sort((a, b) => a.price - b.price);

// 渲染过滤后的列表
<ul>
  {filteredItems.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

可交互列表

为列表项添加点击事件或其他交互逻辑：

function InteractiveList() {
  const handleClick = (itemId) => {
    console.log(`Item ${itemId} clicked`);
  };

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

使用组件拆分列表项

将列表项拆分为独立的组件以提高可维护性：

function ListItem({ item, onItemClick }) {
  return (
    <li onClick={() => onItemClick(item.id)}>
      {item.name}
    </li>
  );
}

function ListComponent() {
  return (
    <ul>
      {items.map((item) => (
        <ListItem 
          key={item.id}
          item={item}
          onItemClick={(id) => console.log(id)}
        />
      ))}
    </ul>
  );
}

虚拟列表优化

对于长列表（如数千项），使用虚拟滚动库（如 react-window）提升性能：

react如何实现列表

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>{items[index].name}</div>
);

function VirtualList() {
  return (
    <List
      height={500}
      itemCount={items.length}
      itemSize={50}
      width={300}
    >
      {Row}
    </List>
  );
}