六十天前端强化训练之第十五天React组件基础案例：创建函数式组件展示用户信息(第15-21天：前端框架（React）)

=====欢迎来到编程星辰海的博客讲解======

我们已经学了14天了，再坚持坚持，马上我们就可以变得更优秀了，加油，我相信大家，接下来的几天，我会给大家更新前端框架（React），看完可以给一个免费的三连吗，谢谢大佬！

代码都可以在godepen上运行的，大家可以复制代码试试

https://codepen.io/accounts/signup/user/free/year?ownerId=null&ownerType=null

目录

一、组件核心概念体系

1.1 组件化开发哲学

1.2 虚拟DOM工作原理

二、函数式组件深度剖析

2.1 基础结构

2.2 Hooks 生态系统

三、组件通信模式详解

3.1 父→子通信（Props）

3.2 子→父通信（回调函数）

3.3 Context 跨层通信

实战案例：带交互的用户信息管理

功能演示

关键知识点总结

状态管理策略

列表渲染最佳实践

表单处理模式

性能优化手段

扩展学习路径

官方文档精读

社区优质资源

推荐工具链

进阶挑战任务

一、为删除操作添加确认对话框

二、实现用户编辑功能

三、添加本地存储持久化

四、集成后端API接口

五、添加分页加载功能

六、实现角色权限控制

功能演示

---

一、组件核心概念体系

1.1 组件化开发哲学

• 单一职责原则：每个组件应专注于单一功能
• 封装性：内部实现细节对外隐藏，通过 Props 接口通信
• 组合模式：通过组件嵌套形成树形结构
• 可重用性：合理抽象提升组件复用率

1.2 虚拟DOM工作原理

JAVASCRIPT

// 简化版虚拟DOM结构示例
const virtualNode = {type: 'div',props: {className: 'container',children: [{ type: 'h1', props: { children: 'Hello World' } },{ type: 'p', props: { children: 'React原理示例' } }]}
};

Diff 算法通过以下策略优化更新：

1. 同级比较策略
2. Key 值优化列表比对
3. 组件类型判断（相同类型复用实例）

---

二、函数式组件深度剖析

2.1 基础结构

JSX

/*** 用户信息展示组件* @param {Object} props - 组件属性* @param {string} props.username - 用户名* @param {number} props.age - 用户年龄* @returns {JSX.Element} 用户信息卡片*/
function UserInfo({ username, age }) {return (<div className="user-card"><h2>{username}</h2><p>年龄: {age} 岁</p></div>);
}

2.2 Hooks 生态系统

JSX

import React, { useState, useEffect, useMemo } from 'react';const UserDashboard = () => {// 状态管理：用户数据const [users, setUsers] = useState([]);// 状态管理：加载状态const [loading, setLoading] = useState(false);// 状态管理：错误信息const [error, setError] = useState(null);// 计算属性：用户总数const userCount = useMemo(() => users.filter(user => user.isActive).length,[users]);// 副作用：数据获取useEffect(() => {const fetchUsers = async () => {setLoading(true);try {const response = await fetch('/api/users');if (!response.ok) throw new Error('数据获取失败');const data = await response.json();setUsers(data);} catch (err) {setError(err.message);} finally {setLoading(false);}};fetchUsers();}, []); // 空依赖数组表示仅执行一次// 条件渲染处理if (loading) return <Spinner />;if (error) return <ErrorDisplay message={error} />;return (<div><h3>总用户数: {userCount}</h3><div className="user-list">{users.map(user => (<UserCard key={user.id} {...user} />))}</div></div>);
};

---

三、组件通信模式详解

3.1 父→子通信（Props）

JSX

// 父组件
const UserManagement = () => {const [userList, setUserList] = useState(initialUsers);const handleUserUpdate = (updatedUser) => {setUserList(prev => prev.map(user => user.id === updatedUser.id ? updatedUser : user));};return (<div><UserTable users={userList} onEdit={handleUserUpdate}/></div>);
};// 子组件
const UserTable = ({ users, onEdit }) => (<table><thead><tr><th>姓名</th><th>操作</th></tr></thead><tbody>{users.map(user => (<tr key={user.id}><td>{user.name}</td><td><button onClick={() => onEdit(user)}>编辑</button></td></tr>))}</tbody></table>
);

3.2 子→父通信（回调函数）

JSX

const SearchBar = ({ onSearch }) => {const [query, setQuery] = useState('');const handleSubmit = (e) => {e.preventDefault();onSearch(query.trim());};return (<form onSubmit={handleSubmit}><inputtype="text"value={query}onChange={(e) => setQuery(e.target.value)}placeholder="输入搜索关键词..."/><button type="submit">搜索</button></form>);
};// 父组件使用
<SearchBar onSearch={(keyword) => filterData(keyword)} />

3.3 Context 跨层通信

JSX

// 创建 Context
const ThemeContext = React.createContext('light');// 提供者组件
const App = () => {const [theme, setTheme] = useState('light');return (<ThemeContext.Provider value={{ theme, setTheme }}><Toolbar /></ThemeContext.Provider>);
};// 消费者组件
const ThemedButton = () => {const { theme, setTheme } = useContext(ThemeContext);return (<button style={{ background: theme === 'dark' ? '#333' : '#fff',color: theme === 'dark' ? '#fff' : '#333'}}onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>切换主题</button>);
};

---

实战案例：带交互的用户信息管理

JSX

import React, { useState, useEffect } from 'react';/*** 用户信息管理系统* 功能：* 1. 展示用户列表* 2. 支持新增用户* 3. 支持删除用户* 4. 实时搜索过滤*/
const UserManager = () => {// 主数据状态const [users, setUsers] = useState([]);// 搜索关键词状态const [searchTerm, setSearchTerm] = useState('');// 新用户表单状态const [newUser, setNewUser] = useState({name: '',email: '',role: 'user'});// 模拟初始化数据useEffect(() => {const initialUsers = [{ id: 1, name: '张三', email: 'zhang@example.com', role: 'admin' },{ id: 2, name: '李四', email: 'li@example.com', role: 'user' }];setUsers(initialUsers);}, []);// 处理表单输入const handleInputChange = (e) => {const { name, value } = e.target;setNewUser(prev => ({...prev,[name]: value}));};// 提交新用户const handleAddUser = (e) => {e.preventDefault();if (!newUser.name || !newUser.email) return;const userToAdd = {...newUser,id: Date.now() // 临时ID生成方式};setUsers(prev => [...prev, userToAdd]);setNewUser({ name: '', email: '', role: 'user' });};// 删除用户const handleDelete = (userId) => {setUsers(prev => prev.filter(user => user.id !== userId));};// 过滤用户列表const filteredUsers = users.filter(user =>user.name.toLowerCase().includes(searchTerm.toLowerCase()));return (<div className="user-manager">{/* 搜索栏 */}<div className="search-section"><inputtype="text"placeholder="搜索用户..."value={searchTerm}onChange={(e) => setSearchTerm(e.target.value)}/></div>{/* 添加用户表单 */}<form onSubmit={handleAddUser} className="add-form"><inputname="name"placeholder="姓名"value={newUser.name}onChange={handleInputChange}required/><inputname="email"type="email"placeholder="邮箱"value={newUser.email}onChange={handleInputChange}required/><selectname="role"value={newUser.role}onChange={handleInputChange}><option value="user">普通用户</option><option value="admin">管理员</option></select><button type="submit">添加用户</button></form>{/* 用户列表 */}<div className="user-list">{filteredUsers.map(user => (<div key={user.id} className="user-card"><div className="user-info"><h3>{user.name}</h3><p>{user.email}</p><span className={`role-tag ${user.role}`}>{user.role === 'admin' ? '管理员' : '用户'}</span></div><button className="delete-btn"onClick={() => handleDelete(user.id)}>删除</button></div>))}</div></div>);
};export default UserManager;

---

功能演示

1. 实时搜索用户
2. 添加新用户表单验证
3. 用户角色标识
4. 删除确认操作
5. 响应式布局

---

关键知识点总结

1. 状态管理策略

   • 使用 useState 管理组件内部状态
   • 状态提升：将共享状态移动到最近的共同祖先组件
   • 状态合并：使用扩展运算符保持状态不变性

2. 列表渲染最佳实践

   • 始终提供稳定的 key 属性
   • 复杂列表使用虚拟滚动优化性能
   • 分离列表项为独立子组件

3. 表单处理模式

   • 受控组件 vs 非受控组件
   • 表单验证实现方案
   • 使用 name 属性批量处理输入

4. 性能优化手段

   • React.memo 记忆组件
   • useCallback 缓存函数引用
   • useMemo 避免重复计算
   • 按需加载组件 (React.lazy)

5. 错误边界处理

   • 使用 try/catch 处理同步错误
   • 异步操作的错误处理
   • 全局错误边界组件

---

扩展学习路径

1. 官方文档精读

   • 状态管理进阶
   • Hooks 深度指南
   • 上下文 API 最佳实践

2. 社区优质资源

   • React 模式大全
   • Hooks 常见问题解答
   • React 性能优化手册

3. 推荐工具链

   • 状态管理：Redux Toolkit / Recoil
   • 路由管理：React Router v6
   • 样式方案：Styled-components / CSS Modules
   • 测试框架：Jest + React Testing Library

---

进阶挑战任务

1. 为删除操作添加确认对话框
2. 实现用户编辑功能
3. 添加本地存储持久化
4. 集成后端 API 接口
5. 添加分页加载功能
6. 实现角色权限控制

一、为删除操作添加确认对话框

JSX

const DeleteConfirmDialog = ({ onConfirm, onCancel }) => (<div className="confirm-dialog"><p>确定要删除该用户吗？</p><div className="dialog-actions"><button onClick={onConfirm}>确认删除</button><button onClick={onCancel}>取消</button></div></div>
);// 使用示例
const handleDelete = (userId) => {const confirm = window.confirm('确定要删除该用户吗？');if (confirm) {setUsers(prev => prev.filter(user => user.id !== userId));}
};

---

二、实现用户编辑功能

JSX

const UserEditor = ({ user, onSave, onCancel }) => {const [editData, setEditData] = useState(user);const handleSubmit = (e) => {e.preventDefault();onSave(editData);};return (<div className="edit-form"><form onSubmit={handleSubmit}><inputvalue={editData.name}onChange={(e) => setEditData({...editData, name: e.target.value})}/><inputvalue={editData.email}onChange={(e) => setEditData({...editData, email: e.target.value})}/><div className="form-actions"><button type="submit">保存</button><button type="button" onClick={onCancel}>取消</button></div></form></div>);
};// 在用户卡片中添加：
{isEditing ? (<UserEditor user={user}onSave={(updated) => handleUpdateUser(updated)}onCancel={() => setEditingId(null)}/>
) : (<button onClick={() => setEditingId(user.id)}>编辑</button>
)}

---

三、添加本地存储持久化

JSX

// 自定义Hook
const useLocalStorage = (key, initialValue) => {const [value, setValue] = useState(() => {const stored = localStorage.getItem(key);return stored ? JSON.parse(stored) : initialValue;});useEffect(() => {localStorage.setItem(key, JSON.stringify(value));}, [key, value]);return [value, setValue];
};// 使用示例
const [users, setUsers] = useLocalStorage('users', []);

---

四、集成后端API接口

JSX

const api = {fetchUsers: async (page = 1) => {const response = await fetch(`/api/users?page=${page}`);return response.json();},createUser: async (user) => {const response = await fetch('/api/users', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(user)});return response.json();}
};// 在组件中使用
useEffect(() => {const loadData = async () => {setLoading(true);try {const data = await api.fetchUsers();setUsers(data);} catch (err) {setError(err.message);} finally {setLoading(false);}};loadData();
}, []);

---

五、添加分页加载功能

JSX

const Pagination = ({ current, total, onChange }) => (<div className="pagination">{Array.from({length: total}, (_, i) => (<buttonkey={i+1}className={current === i+1 ? 'active' : ''}onClick={() => onChange(i+1)}>{i+1}</button>))}</div>
);// 使用示例
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);useEffect(() => {const loadPage = async () => {const { data, total } = await api.fetchUsers(currentPage);setUsers(data);setTotalPages(total);};loadPage();
}, [currentPage]);

---

六、实现角色权限控制

JSX

// 创建权限上下文
const AuthContext = React.createContext();const AuthProvider = ({ children }) => {const [currentUser, setCurrentUser] = useState({role: 'admin' // 从登录获取实际值});const hasPermission = (requiredRole) => {return currentUser.role === requiredRole;};return (<AuthContext.Provider value={{ hasPermission }}>{children}</AuthContext.Provider>);
};// 在组件中使用
const { hasPermission } = useContext(AuthContext);{hasPermission('admin') && (<button onClick={handleEdit}>编辑</button>
)}

---

功能演示

每个功能模块都可以独立实现并逐步集成，建议按以下顺序进行开发：

1. 添加本地存储持久化
2. 实现API集成
3. 添加分页功能
4. 实现编辑功能
5. 添加权限控制
6. 最后实现确认对话框

通过本案例可以完整掌握 React 核心组件的开发流程，建议结合实际项目需求扩展功能模块。