react如何写列表

在React中渲染列表的方法

使用map方法遍历数组生成列表元素
React中通常通过JavaScript的map方法将数组数据转换为React元素数组。每个列表项需要包含唯一的key属性以提高渲染性能。

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

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

处理动态数据列表

当列表数据来自API或状态管理时，需要将数据存储在组件状态中。使用useState和useEffect钩子可以处理异步数据获取。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch('/api/items')
      .then(res => res.json())
      .then(data => setItems(data));
  }, []);

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

可折叠列表实现

通过状态管理控制列表项的展开/折叠状态。每个列表项可以维护自己的展开状态，或者整个列表统一控制。

function CollapsibleList() {
  const [expanded, setExpanded] = useState(false);
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      <button onClick={() => setExpanded(!expanded)}>
        {expanded ? 'Collapse' : 'Expand'}
      </button>
      {expanded && (
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

带交互的列表项

为列表项添加点击事件等交互功能时，需要注意事件冒泡和性能优化。避免在渲染函数中创建新函数，使用useCallback优化事件处理。

function InteractiveList() {
  const [selected, setSelected] = useState(null);
  const items = ['Red', 'Green', 'Blue'];

  const handleClick = (item) => {
    setSelected(item);
  };

  return (
    <ul>
      {items.map(item => (
        <li 
          key={item}
          onClick={() => handleClick(item)}
          style={{ color: selected === item ? 'red' : 'black' }}
        >
          {item}
        </li>
      ))}
    </ul>
  );
}

虚拟滚动长列表优化

对于大型列表（数百/数千项），使用虚拟滚动技术（如react-window库）可以显著提高性能，只渲染可见区域的列表项。

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

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

function VirtualList() {
  return (
    <List
      height={300}
      itemCount={1000}
      itemSize={35}
      width={300}
    >
      {Row}
    </List>
  );
}