不应在React组件中直接管理数据库连接，因React属UI层，数据库逻辑应由服务层或自定义Hook（如useTodoDB）封装，前端仅支持IndexedDB等浏览器存储或通过API代理访问后端数据库。
在React组件中直接管理数据库连接不是推荐做法，因为React是UI层框架，不负责数据持久化逻辑；数据库连接应由服务层或自定义Hook统一处理，组件只负责触发操作和响应状态。
为什么不应在组件生命周期内直接开/关数据库连接
浏览器环境无法建立传统服务端数据库长连接（如MySQL、PostgreSQL），前端能访问的“数据库”通常是：
- IndexedDB：浏览器内置异步键值存储，适合离线场景
- WebSQL（已废弃，不建议新项目使用）
- 本地模拟库（如Dexie.js、IDB封装库）
- 通过API代理到后端数据库（最常见、最安全方式）
无论哪种，连接初始化、事务执行、错误清理都应解耦于UI渲染逻辑，避免在useEffect中反复打开/关闭连接导致资源泄漏或竞态问题。
用自定义Hook封装IndexedDB连接与操作
将数据库逻辑收敛到useDatabase等自定义Hook中，组件只调用get、add等语义方法：
立即学习“前端免费学习笔记（深入）”；
function useTodoDB() {
const [db, setDb] = useState(null);
useEffect(() => {
let isMounted = true;
const openDB = async () => {
try {
const connection = await openDB('todo-app', 1, {
upgrade(db) {
if (!db.objectStoreNames.contains('todos')) {
db.createObjectStore('todos', { keyPath: 'id' });
}
}
});
if (isMounted) setDb(connection);
} catch (err) {
console.error('Failed to open DB:', err);
}
};
openDB();
return () => {
if (isMounted && db) db.close(); // 清理仅在卸载时触发
};
}, []);
const addTodo = useCallback(async (todo) => {
if (!db) return;
await db.add('todos', todo);
}, [db]);
const getTodos = useCallback(async () => {
if (!db) return [];
return await db.getAll('todos');
}, [db]);
return { addTodo, getTodos };
}
组件内直接消费：
function TodoList() {
const { getTodos, addTodo } = useTodoDB();
const [todos, setTodos] = useState([]);
useEffect(() => {
getTodos().then(setTodos);
}, [getTodos]);
// …渲染逻辑
}
服务端数据库：始终走API，不在前端管连接
真实数据库（如PostgreSQL、MongoDB）必须由后端API暴露接口，前端React组件只做HTTP请求：
- 连接管理、认证、事务、权限全部由后端控制
- 前端用
fetch或axios调用/api/todos等端点 - 可配合
useQuery（React Query）自动处理加载、缓存、重试 - 敏感操作（写、删）必须校验Token、防CSRF、做输入过滤
关键注意事项
不要在每次渲染或事件中重复打开IndexedDB —— 它是重操作，应复用实例；不要在useEffect依赖数组里放db实例（它不会变，且不可序列化）；务必在组件卸载时关闭连接（尤其多标签页场景下防止句柄堆积）；所有数据库操作需加try/catch，并提供用户友好的失败反馈。
