如何用react做增删
使用React实现增删功能
在React中实现增删功能通常涉及状态管理和列表渲染。以下是一个完整的实现方案：
初始化状态
需要定义一个状态来存储列表数据，可以使用useState钩子：
const [items, setItems] = useState([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]);添加功能实现
创建添加函数，接收新项目数据并更新状态：
const addItem = (newItem) => {
setItems([...items, {
id: items.length + 1,
name: newItem
}]);
};删除功能实现
根据ID过滤掉要删除的项目：
const deleteItem = (id) => {
setItems(items.filter(item => item.id !== id));
};完整组件示例
import React, { useState } from 'react';
function ItemList() {
const [items, setItems] = useState([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]);
const [inputValue, setInputValue] = useState('');
const addItem = () => {
if (inputValue.trim()) {
setItems([...items, {
id: Date.now(),
name: inputValue
}]);
setInputValue('');
}
};
const deleteItem = (id) => {
setItems(items.filter(item => item.id !== id));
};
return (
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={addItem}>Add</button>
<ul>
{items.map(item => (
<li key={item.id}>
{item.name}
<button onClick={() => deleteItem(item.id)}>Delete</button>
</li>
))}
</ul>
</div>
);
}使用唯一标识符
建议使用Date.now()或UUID生成ID，避免使用数组长度作为ID，可能导致删除后新增项目ID冲突。
性能优化
对于大型列表，可以考虑使用React.memo优化子组件渲染，或使用虚拟滚动技术。
状态管理方案
对于复杂应用，可以考虑使用Context API或Redux等状态管理库来管理全局状态。
