react如何和node交互
React 与 Node.js 交互的方法
React 作为前端框架，通常需要与 Node.js 后端进行数据交互。以下是几种常见的实现方式：
使用 RESTful API
通过 HTTP 请求（如 fetch 或 axios）与 Node.js 后端通信。Node.js 提供 RESTful 接口，React 前端发送请求获取或提交数据。
React 示例（使用 axios）：
import axios from 'axios';
axios.get('http://localhost:3000/api/data')
.then(response => console.log(response.data))
.catch(error => console.error(error));Node.js 示例（Express 框架）：
const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
res.json({ message: 'Data from Node.js' });
});
app.listen(3000, () => console.log('Server running on port 3000'));使用 WebSocket 实时通信
适用于需要实时更新的场景（如聊天应用）。通过 socket.io 库实现双向通信。
React 示例：
import { io } from 'socket.io-client';
const socket = io('http://localhost:3000');
socket.on('message', data => console.log(data));Node.js 示例：
const server = require('http').createServer();
const io = require('socket.io')(server);
io.on('connection', socket => {
socket.emit('message', 'Hello from Node.js');
});
server.listen(3000);使用 GraphQL
通过 Apollo Client（前端）和 Apollo Server（后端）实现灵活的数据查询。
React 示例（Apollo Client）：
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:3000/graphql',
cache: new InMemoryCache(),
});
client.query({
query: gql`query { getData { message } }`
}).then(result => console.log(result.data));Node.js 示例（Apollo Server）：
const { ApolloServer, gql } = require('apollo-server');
const typeDefs = gql`
type Query { getData: Data }
type Data { message: String }
`;
const server = new ApolloServer({
typeDefs,
resolvers: {
Query: { getData: () => ({ message: 'GraphQL response' }) }
}
});
server.listen(3000);使用 Server-Side Rendering (SSR)
通过 Next.js 等框架将 React 与 Node.js 深度集成，实现服务端渲染。
Next.js 示例（API 路由）：
// pages/api/data.js
export default (req, res) => {
res.status(200).json({ message: 'SSR API response' });
};注意事项
- 跨域问题：开发时需配置 CORS（Node.js 端使用
cors中间件）。 - 环境变量：区分开发和生产环境的 API 地址（如
process.env.REACT_APP_API_URL）。 - 安全性：Node.js 端需验证请求（如 JWT 鉴权），避免暴露敏感逻辑。
