react 如何与db交互
在React中与数据库交互的方法
React本身是一个前端库，不直接与数据库交互。需要通过后端服务或API作为中间层来实现数据存取。以下是常见方法：
使用RESTful API 创建或使用现有的REST API服务，React通过fetch或axios发送HTTP请求：
axios.get('/api/data')
.then(response => console.log(response.data))
.catch(error => console.error(error));GraphQL方案 通过Apollo Client或Relay等库连接GraphQL服务：
const { loading, error, data } = useQuery(GET_DATA_QUERY);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return <div>{data.fieldName}</div>;直接连接数据库（仅限全栈项目） 在Next.js等全栈框架中通过API路由直接访问：
// pages/api/data.js
import { connectToDatabase } from '../../lib/mongodb';
export default async function handler(req, res) {
const { db } = await connectToDatabase();
const data = await db.collection('items').find({}).toArray();
res.status(200).json(data);
}实时数据库方案 对于Firebase等实时数据库：
import { getDatabase, ref, onValue } from "firebase/database";
const db = getDatabase();
const starCountRef = ref(db, 'posts/' + postId);
onValue(starCountRef, (snapshot) => {
const data = snapshot.val();
updateUI(data);
});状态管理集成 将数据库数据存入Redux或Context：
const dispatch = useDispatch();
useEffect(() => {
fetchData().then(data => dispatch({ type: 'SET_DATA', payload: data }));
}, [dispatch]);安全注意事项
- 永远不要在前端代码中暴露数据库凭据
- 实施适当的API身份验证（JWT/OAuth）
- 对用户输入进行严格验证
- 考虑使用ORM工具防止SQL注入
性能优化建议
- 实现数据缓存策略
- 使用分页或无限滚动处理大数据集
- 考虑使用SWR或React Query进行数据管理
- 对频繁变更的数据使用WebSocket连接
