react实现通讯录
实现React通讯录的基本步骤
使用React实现通讯录功能需要管理联系人数据、提供添加/编辑/删除功能，并支持搜索或分组展示。以下是核心实现方法：
数据状态管理
创建联系人状态和操作函数，使用useState或useReducer管理数据：
const [contacts, setContacts] = useState([
{ id: 1, name: '张三', phone: '13800138000', group: '同事' },
{ id: 2, name: '李四', phone: '13900139000', group: '朋友' }
]);添加联系人功能
实现表单提交处理函数：
const handleAddContact = (newContact) => {
setContacts([...contacts, { ...newContact, id: Date.now() }]);
};搜索过滤功能
通过输入框动态过滤联系人：
const [searchTerm, setSearchTerm] = useState('');
const filteredContacts = contacts.filter(contact =>
contact.name.toLowerCase().includes(searchTerm.toLowerCase())
);按字母分组展示
实现联系人按首字母分组：
const groupByLetter = contacts.reduce((groups, contact) => {
const letter = contact.name.charAt(0).toUpperCase();
groups[letter] = groups[letter] || [];
groups[letter].push(contact);
return groups;
}, {});完整组件示例
function ContactList() {
const [contacts, setContacts] = useState(initialContacts);
const [searchTerm, setSearchTerm] = useState('');
const filteredContacts = contacts.filter(contact =>
contact.name.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<div>
<input
type="text"
placeholder="搜索联系人"
onChange={(e) => setSearchTerm(e.target.value)}
/>
{Object.entries(groupByLetter(filteredContacts)).map(([letter, group]) => (
<div key={letter}>
<h3>{letter}</h3>
{group.map(contact => (
<div key={contact.id}>
{contact.name} - {contact.phone}
</div>
))}
</div>
))}
</div>
);
}进阶优化方案
使用Context或Redux管理全局状态 实现本地存储持久化（localStorage） 添加编辑和删除功能按钮 使用第三方库如react-virtualized优化长列表性能 引入UI库（如Material-UI）美化界面
样式与交互增强
添加CSS过渡动画提升用户体验 实现联系人详情模态框 支持拖拽排序功能 添加电话号码格式验证
通过以上方法可以构建功能完整的React通讯录应用，根据实际需求选择适当的功能组合和复杂度控制。
