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