一、移动端适配：让你的页面在各种手机上"躺平"
做移动端开发，最头疼的就是适配！想象一下：你精心设计的页面在自己手机上完美展示，结果到了用户的大屏手机上，所有元素都变得"小里小气"，那得多尴尬？
这时候，rem单位就成了我们的救星！它的原理很简单：相对于页面根字体的大小。
举个例子：如果根字体是 10px，那么 1rem = 10px。一个设置为 10rem 宽的容器，实际宽度就是 100px。当用户使用更大的手机屏幕时，我们只需要动态调整根字体的大小，页面上的所有元素就会自动按比例缩放，简直不要太省心！
看看下面这组对比数据，你就能明白 rem 的魅力：
根字体大小: 10px → 11.04px → 37.5px → 41.1px
容器设置: 37.5rem → 37.5rem → 10rem → 10rem
实际宽度: 375px → 414px → 375px → 414px
无论手机屏幕怎么变，我们的页面都能保持一致的视觉效果，是不是很神奇？
二、技术选型：选对工具事半功倍
工欲善其事，必先利其器。在这个项目中，我们选择了以下技术栈：
1. React-Vant：移动端UI的"瑞士军刀"
React-Vant 是一个基于 React 的移动端 UI 组件库，就像一套精美的积木，让你可以快速搭建出漂亮的页面。不过需要注意的是，它和 React 19 有点"八字不合"，所以我们后来改用了 react-hot-toast 来处理提示信息。
2. Less：CSS的"超级变变变"
CSS 写多了总是感觉有点啰嗦？Less 预处理器帮你解决这个问题！它就像 CSS 的"超级变变变"，让你可以使用变量、嵌套、混合等高级特性，大大提高了 CSS 的可读性和维护性。
3. Rest.css：样式重置的"和平使者"
不同浏览器对 HTML 标签的默认样式有不同的理解，这常常会导致页面在不同浏览器上表现不一致。Rest.css 就像一个"和平使者"，帮我们重置了所有标签的默认样式，让它们在所有浏览器上都站在同一起跑线上。
三、路由传参：三种方式任你选
在 React 项目中，路由传参是家常便饭。这里有三种常用的方式，总有一款适合你：
1. 问号传参：简单直接
navigate('/home?id=1');
// 在目标页面使用 useSearchParams() 获取参数
const [searchParams] = useSearchParams();
const id = searchParams.get('id');
这种方式就像给网址贴了个"标签"，简单直接，但参数会明明白白地显示在 URL 里。
2. 动态路由：优雅含蓄
// 首先在路由配置中定义动态路由
export const routes = [
{ path: '/home/:id', element: <Home /> }
];
// 然后使用 navigate 跳转
navigate('/home/1');
// 在目标页面使用 useParams() 获取参数
const params = useParams();
const id = params.id;
这种方式就像给网址起了个"别名"，看起来更优雅，参数也更含蓄地融入了 URL 中。
3. State传参：神不知鬼不觉
navigate('/home', {
state: {
id: 1
}
});
// 在目标页面使用 useLocation() 获取参数
const location = useLocation();
const id = location.state?.id;
这种方式就像给网址"寄了个匿名包裹"，参数不会显示在 URL 中，适合传递一些敏感信息。
四、项目实战：从登录到鉴权的全流程
1. 集中式路由配置：管理路由的"中央控制台"
我们采用了集中式路由配置，将所有路由都放在一个文件中管理，就像一个"中央控制台"，方便统一管理和维护。同时，我们还使用了 React.lazy 实现了路由的懒加载，这样用户只有在访问某个页面时，才会加载对应的组件，大大提高了首页的加载速度。
2. 登录页面：用户的"第一道门"
开发登录页面时，我们使用了 CSS Modules 来实现样式隔离，避免不同组件之间的样式冲突。登录请求则使用了 axios 库，它比原生的 XMLHttpRequest 和 fetch 更加强大和易用。
3. 登录鉴权：应用的"安全卫士"
登录成功后，后端会返回一个令牌（token），我们需要将这个令牌保存在浏览器中，并在后续的所有请求中都携带它，供后端校验用户身份。
但是，token 会过期，这会导致用户在使用过程中突然被要求重新登录，体验非常差。怎么办呢？我们实现了一个无感刷新 token的功能：
- 后端在登录接口返回一个"长 token"和一个"短 token"
- 短 token 用来做权限校验，过期时间较短
- 长 token 用来在短 token 过期后，偷偷地获取新的短 token 和长 token
- 这样用户就不会感知到 token 的过期和刷新，体验就像丝般顺滑
4. 下拉刷新：提升体验的"小细节"
为了提升用户体验，我们还手动封装了下拉刷新组件。这个组件会监听用户的 touch 事件，根据手指在 Y 轴移动的距离来控制容器向下平移，从而展示出头部的"下拉刷新"字样。当用户放开手指后，组件会触发父组件的重新请求函数，完成数据的刷新。
五、总结
开发一个移动端 React 项目，从适配到鉴权，从路由到组件，每一步都需要我们精心设计。但只要掌握了正确的方法和工具，就能事半功倍，开发出既美观又实用的应用。
希望本文能对你的移动端开发有所帮助。如果你有什么更好的方法或者遇到了什么问题，欢迎在评论区留言讨论！
