当前位置：首页 > news >正文

从后端到react框架

news 2025/9/27 5:28:31

一、React 到底是什么？

在后端眼里，React 不像“框架”，更像一个负责 UI 的函数：

state → React → DOM

给定一份数据（state），React 帮你算出新的 DOM，并只更新变化的部分——跟数据库索引差不离，只是操作的是页面。

二、最小可运行环境：Hello React

后端习惯“ main 方法一把梭”，前端现在也流行“零配置”。官方推出的 Vite 脚手架，3 分钟搞定。

# 1. 装 Node（>=18）
node -v
# 2. 建项目
npm create vite@latest hello-react --template react
cd hello-react
npm install
npm run dev

浏览器打开 http://localhost:5173，看到旋转的 React Logo，说明“容器”启动成功，相当于后端 Tomcat 跑起来了。

三、第一个组件：把 JSP 标签换成 JSX

后端写 JSP 时常写：

<div>Hello, ${user}</div>

在 React 里，把 HTML 和 JS 混写在一起叫 JSX，本质是一个语法糖，编译后等于 JavaScript 函数调用。

// src/pages/Welcome.jsx
export default function Welcome({ user }) {return <h1>Hello, {user}</h1>;
}

使用：

// src/App.jsx
import Welcome from './pages/Welcome';function App() {const user = 'SpringBoy';   // 假装从后端接口拿的数据return <Welcome user={user} />;
}
export default App;

保存后页面立即热更新，比改 JSP 重启 Tomcat 爽太多。

四、状态管理：从 `useState` 开始

后端用 Map 存瞬时状态，React 用 Hook——useState。

import { useState } from 'react';export default function Counter() {const [count, setCount] = useState(0);   // 初始值 0return (<div><p>你点了 {count} 次</p><button onClick={() => setCount(count + 1)}>+1</button></div>);
}

注意：

count 是只读变量，想改必须调 setCount，直接 count++ 无效；
每次 setCount 都会触发“重新渲染”，相当于刷新局部页面。

五、副作用与接口调用：把 Ajax 装进 `useEffect`

后端接口写好要测试，前端得调。React 用 useEffect 发请求，相当于 @PostConstruct。

import { useEffect, useState } from 'react';
import axios from 'axios';export default function UserList() {const [users, setUsers] = useState([]);useEffect(() => {axios.get('/api/users')      // 替换成你的后端地址.then(res => setUsers(res.data)).catch(err => console.error(err));}, []);                        // 空数组表示只执行一次return (<ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>);
}

这里踩坑：

忘了写 key，控制台会报警告，跟数据库缺索引一样难受；
不要把 async/await 直接放在 useEffect 回调上，需要包一层自执行函数。

六、路由：告别 XML，配置即组件

后端用 SpringMVC 的 @RequestMapping，React 用 react-router-dom@6，声明式路由：

npm i react-router-dom

// src/router/index.jsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Welcome from '../pages/Welcome';
import UserList from '../pages/UserList';const router = createBrowserRouter([{ path: '/', element: <Welcome user="ReactNewbie" /> },{ path: '/users', element: <UserList /> },
]);export default function AppRouter() {return <RouterProvider router={router} />;
}

然后在 main.jsx 里把根组件换成 <AppRouter />，即可实现“/users”跳转，无刷新。

七、与后端联调：Proxy 解决跨域

前端端口 5173，后端 8080，端口不同会触发 CORS。Vite 配置代理，5 秒钟解决：

// vite.config.js
export default defineConfig({server: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}
})