react怎么实现列表

使用 map 方法渲染列表

在 React 中，通常使用数组的 map 方法将数据数组转换为 React 元素列表。例如，给定一个数组 items，可以通过以下方式渲染列表项：

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

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

key 属性用于帮助 React 识别列表项的变化，通常应使用唯一标识符（如 id），而非 index，除非列表是静态的。

动态数据与状态管理

如果列表数据需要动态更新，应使用 React 的状态管理（如 useState）：

import { useState } from 'react';

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

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

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

从 API 获取列表数据

通过 useEffect 和异步请求（如 fetch）从后端 API 加载数据：

import { useState, useEffect } from 'react';

function ApiList() {
  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>
  );
}

优化列表性能

对于大型列表，使用 React.memo 或虚拟化库（如 react-window）避免不必要的渲染：

import { memo } from 'react';

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

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

列表筛选与排序

通过 JavaScript 方法（如 filter 和 sort）实现动态列表操作：

function FilteredList({ items }) {
  const [searchTerm, setSearchTerm] = useState('');

  const filteredItems = items.filter(item =>
    item.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}