React Native 0.80实战：从项目初始化到新架构性能优化

早几天把开发环境整体升到了 React Native 0.80 的稳定版顺手把手头一个用来做框架验证的任务协作 Demo 翻新了一遍。这个项目不复杂但五脏俱全登录鉴权、任务列表、筛选搜索、新建编辑、个人设置从网络层到状态管理再到导航和列表优化都有覆盖。我把完整的工程结构和关键实现整理成文给正在学 React Native 或者想从 0.7x 跨到 0.80 的同学当一份学习参考。这篇文章会以一个完整可运行的实战项目为主线从项目设计、技术选型、核心页面实现、新特性运用到常见问题排查按真实开发顺序展开。每个关键点我都会讲清楚为什么这么做、实际踩过什么坑、怎么调整而不是光贴代码。想直接上手跑起来的跟着第二章的初始化步骤走一遍就行想深入了解某个模块的可以直接跳到对应章节看实现细节。这个项目定位是学习参考所以你不需要有完整的后端服务我会把数据请求层做了一层 mock 适配本地模拟接口也能把整个流程跑通。我用的环境是 macOS Android StudioReact Native 0.80 稳定版下面所有路径和命令都基于这个组合如果你用的是 Windows 或者只跑 iOS差异点我会单独标出来。1. 项目总体设计与技术选型思路1.1 为什么把 0.80 当作学习基准很多初学者上来就跟着网上的旧教程走用的还是 0.6x 甚至 0.5x 的语法等自己新建项目才发现模板已经变了API 也废弃了一大堆学得特别痛苦。React Native 从 0.7x 开始新架构逐步收敛到 0.80 这个版本新架构已经在默认配置里占据主导位置。这意味着你用 0.80 写出来的代码更贴近当前社区的主流写法将来维护老项目或者参与新项目认知成本都会低很多。另外 0.80 对 TypeScript 的支持更完整很多类型定义不再需要手动补齐第三方库的兼容性也稳定了不少。这个版本作为学习基准最大的好处是你现在写的东西半年后还能用而不是教程还没看完就要学写废弃 API。1.2 Demo 的功能边界与业务场景我给这个项目定的业务场景是团队内部的任务协作工具功能上做了适度裁剪保证学习价值的同时不把工程搞得太大手机号/密码登录带 token 存储与自动带参请求任务列表分页加载、状态筛选、下拉刷新任务详情展示任务信息、更新状态新建/编辑任务表单校验、提交反馈个人设置头像选择、主题切换、退出登录这个功能组合覆盖了移动端开发的大部分核心场景网络通信、列表渲染、导航流转、表单处理、全局状态、本地存储、主题适配。你把这套 Demo 吃透了换皮做其他业务思路是一样的。1.3 技术选型清单我做了一个表格把这次用到的核心依赖和选择理由列出来方便你对照着搭环境。模块选型为什么选它跨端框架React Native 0.80新架构默认、TS 支持完善、长期维护开发语言TypeScript大型项目可维护性的基本盘导航React Navigation v7社区事实标准文档全、问题好搜状态管理Zustand比 Redux 轻量、上手快、模板代码少网络请求Axios拦截器机制成熟适合做统一封装本地存储AsyncStorage轻量 KV 存储配合 token/主题使用UI 组件自研基础组件 部分原生组件学习阶段不引入重型 UI 库理解更透Mock 数据本地 JSON 延时模拟无后端也能跑通全流程这套组合不是唯一的答案但绝对是一条性价比很高的学习路径。Redux 依然主流但 Zustand 的体验对新手友好很多等你把状态流转的逻辑搞清楚了再回头理解 Redux 那一套也更容易。2. 环境准备与工程初始化2.1 初始化项目的实际操作我习惯用官方模板新建项目命令如下npx react-native-community/clilatest init TodoDemo --version 0.80.0这里注意不要用react-native init这种老命令社区 CLI 已经把模板能力合并过来了。初始化完成后先跑一次默认项目确认环境没问题再继续动代码。跑 iOS 模拟器cd TodoDemo npm run ios跑 Android先打开 Android Studio 启动一个模拟器然后npm run android第一次运行会自动执行 gradle 构建耗时几分钟很正常不要在这时候中断。2.2 目录结构与模块划分工程初始化完之后默认结构比较散。我一般会按功能域重新组织src目录规则是一个页面一个文件夹公共能力单独抽层src/ ├── api/ # 网络请求层统一封装 ├── components/ # 跨页面复用的基础组件 ├── store/ # 全局状态管理 ├── navigation/ # 导航栈配置 ├── screens/ # 页面级组件 ├── theme/ # 主题与样式常量 ├── types/ # 全局类型定义 └── utils/ # 工具函数这样划分的核心理由是你能清楚地知道一个功能改动会影响哪些文件。比如说接口字段变了你只需要动api和typesUI 风格调整重点看components和theme。学习阶段养成分层习惯后面写大项目才不会乱。2.3 TypeScript 路径别名配置老项目里经常看到一串../../../../utils/format这种相对路径看着就头疼。我在项目里配了路径别名用/指向src目录干净利落。先改tsconfig.json{ extends: react-native/typescript-config, compilerOptions: { baseUrl: ., paths: { /*: [src/*] } } }然后在项目根目录建一个babel.config.js加上 babel-plugin-module-resolvermodule.exports { presets: [module:react-native/babel-preset], plugins: [ [ module-resolver, { root: [./], alias: { : ./src } } ] ] };改完配置重启 Metro别忘记清缓存npm start -- --reset-cache这个配置学一次能解决以后所有项目的路径混乱问题。2.4 统一网络请求封装网络层是每个项目的地基。我在src/api/client.ts里封装了一个 axios 实例统一处理 token 注入、错误提示和超时import axios from axios; import AsyncStorage from react-native-async-storage/async-storage; const client axios.create({ baseURL: http://localhost:3000, timeout: 10000, }); client.interceptors.request.use(async (config: any) { const token await AsyncStorage.getItem(token); if (token) { config.headers.Authorization Bearer ${token}; } return config; }); client.interceptors.response.use( response response.data, error { if (error.response?.status 401) { // 实际项目在这里跳登录页 console.warn(登录过期); } return Promise.reject(error); } ); export default client;用拦截器的好处是业务代码里不需要关心 token 和错误兜底只管写请求逻辑就行。比如获取任务列表export const fetchTasks (params: FetchTasksParams) client.get(/tasks, { params });fetchTasks返回的已经是处理过的数据页面组件里直接setState或者写入 store代码可读性提升一大截。3. 核心页面实现与状态管理实战3.1 用 Zustand 管理全局状态项目里的登录会话、任务列表的筛选条件、主题模式这些跨页面共享的数据我用 Zustand 管理。Zustand 的写法比 Redux 简洁太多看一段实际代码就明白了// src/store/useAuthStore.ts import { create } from zustand; interface AuthState { token: string | null; user: UserInfo | null; setSession: (token: string, user: UserInfo) void; clearSession: () void; } export const useAuthStore createAuthState((set) ({ token: null, user: null, setSession: (token, user) set({ token, user }), clearSession: () set({ token: null, user: null }), }));页面里用的时候const token useAuthStore(state state.token); const setSession useAuthStore(state state.setSession);这里有两个实践心得。第一zustand 的 selector 要写细粒度useAuthStore(state state.token)这样能避免不必要的重渲染不要图省事把整个 store 拿下来。第二异步逻辑我放在 api 层store 里只存状态和同步的状态变更方法这样代码跑起来好定位问题。3.2 导航结构设计导航是移动应用的骨架我用的 React Navigation v7结构上做了登录栈 主栈的分层const RootStack createNativeStackNavigator(); function RootNavigator() { const token useAuthStore(state state.token); return ( NavigationContainer RootStack.Navigator screenOptions{{ headerShown: false }} {token ? ( RootStack.Screen nameAppTabs component{AppTabs} / ) : ( RootStack.Screen nameLogin component{LoginScreen} / )} /RootStack.Navigator /NavigationContainer ); }用 token 作为条件渲染的标识登录成功自动切换到主界面登出自动回登录页不需要手动 navigate逻辑非常直观。登录后的主界面用底部 Tab 导航包含任务、统计、个人中心三个页签。其中任务模块又嵌套一个 Stack 导航用于处理列表页 - 详情页 - 编辑页的压栈跳转。有同学可能会问为什么不把页面都放一个 Stack 里我的经验是模块内部用 Stack模块之间用 Tab这样每个导航层的职责单一。任务模块内部调整页面跳转不会影响其他 Tab后续加新建任务的全局入口也方便。3.3 任务列表的完整实现任务列表是这个项目里最值得细看的页面它集合了数据请求、加载状态、分页、下拉刷新、空态展示这些常见逻辑。我用 FlatList 渲染主要代码结构如下const [tasks, setTasks] useStateTaskItem[]([]); const [page, setPage] useState(1); const [hasMore, setHasMore] useState(true); const [refreshing, setRefreshing] useState(false); const [loading, setLoading] useState(false); const loadTasks async (nextPage: number, replace false) { if (loading) return; setLoading(true); try { const data await fetchTasks({ page: nextPage, pageSize: 20, status }); const newList replace ? data.list : [...tasks, ...data.list]; setTasks(newList); setHasMore(data.hasMore); setPage(nextPage); } finally { setLoading(false); setRefreshing(false); } };FlatList 的关键性能属性一个都不能少FlatList data{tasks} renderItem{renderItem} keyExtractor{item String(item.id)} getItemLayout{(_, index) ({ length: 96, offset: 96 * index, index, })} onEndReached{() hasMore loadTasks(page 1)} onEndReachedThreshold{0.3} refreshing{refreshing} onRefresh{() loadTasks(1, true)} ListEmptyComponent{EmptyView /} /getItemLayout是新手最容易忽略的优化点。它告诉 FlatList 每一项的高度是固定的这样列表可以跳过动态测量滚动时会明显更跟手。我这个任务卡片高度是固定的 96所以可以直接写死。如果你的列表项高度不固定那这个属性没法用但可以用onLayout缓存动态高度那是另一个优化的故事了。筛选功能我是用状态驱动查询参数的方式做的筛选切换时重新从第一页加载const [status, setStatus] useStateall | done | undone(all); const changeFilter (s: typeof status) { setStatus(s); loadTasks(1, true); };3.4 新建与编辑任务页的表单处理表单这块我没有引入 Formik 之类的库直接用手写受控组件配合一个简单的校验函数。原因是这个表单只有四五个字段上重型表单库反而增加理解成本学习阶段把底层逻辑吃透更重要。核心代码const [form, setForm] useState({ title: , desc: , priority: medium, dueDate: , }); const [errors, setErrors] useStateFormErrors({}); const validate () { const nextErrors: FormErrors {}; if (!form.title.trim()) { nextErrors.title 标题不能为空; } else if (form.title.trim().length 2) { nextErrors.title 标题至少2个字; } if (form.dueDate new Date(form.dueDate).getTime() Date.now()) { nextErrors.dueDate 截止时间不能早于当前时间; } setErrors(nextErrors); return Object.keys(nextErrors).length 0; }; const handleSubmit async () { if (!validate()) return; if (isEdit) { await updateTask(taskId, form); } else { await createTask(form); } navigation.goBack(); };提交成功后我通过订阅useFocusEffect在列表页重新拉数据useFocusEffect( useCallback(() { loadTasks(1, true); }, []) );这里说一下为什么用useFocusEffect而不是useEffect。useEffect是组件挂在时触发而useFocusEffect是每次页面获得焦点时触发。从编辑页返回到列表页列表组件并没有重新挂载所以useEffect不会重新执行useFocusEffect能做到。这是 React Navigation 里特别常用的生命周期用法。4. 0.80 项目里的新特性实践与性能优化4.1 新架构默认开启后我观察到的变化升级到 0.80 之后项目默认走的就是新架构运行时。从我实际开发和调试的体验来看最直观的变化是启动速度和交互流畅度。同样的业务代码在旧架构上冷启动需要白屏挺长时间新架构下面启动到可交互的间隔明显缩短页面切换也很少出现掉帧。这个感知在真机上比模拟器明显。做学习项目的话建议有条件尽量用真机调试模拟器更多是用来看布局和验证逻辑的。新架构下如果你引入的第三方原生组件没有做新架构适配可能会出现编译能过运行崩的情况所以依赖库尽量选社区活跃的。4.2 暗色模式与主题系统实现0.80 项目的模板已经支持系统暗色模式了但业务组件并不会自动跟着适配需要自己把主题体系搭起来。我在theme/index.ts里定义了一套基于 CSS 变量的主题对象export const lightTheme { colors: { background: #FFFFFF, card: #F5F6F8, textPrimary: #1A1A1A, textSecondary: #8A8A8A, accent: #3478F6, border: #E5E5E5, }, }; export const darkTheme: Theme { colors: { background: #121212, card: #1E1E1E, textPrimary: #F0F0F0, textSecondary: #A0A0A0, accent: #4C9EEB, border: #333333, }, };用useColorScheme动态切换const scheme useColorScheme(); const theme scheme dark ? darkTheme : lightTheme;然后在页面里用useTheme取颜色值而不是直接写死#FFFFFF。这套逻辑搭好之后组件颜色全部走主题变量切换暗色模式时全应用统一变化不用一个页面一个页面去改。4.3 列表渲染与图片加载的性能细节任务列表里卡片包含缩略图、标题、描述、优先级标签。图片这块我把maxToRenderPerBatch和windowSize调过一轮这里写一下我整理后的稳定配置FlatList initialNumToRender{10} maxToRenderPerBatch{10} windowSize{7} removeClippedSubviews ... /这几个参数的作用分别是initialNumToRender首屏渲染的条目数不要贪多10 条足够多了首屏会卡maxToRenderPerBatch滚动时每批渲染的条数减小这个值能让滚动更平滑但也不能太小否则频繁渲染更耗性能windowSize可视区域外预渲染的缓冲区大小单位是可视区域高度的倍数调太低会导致快速滑动时白屏图片优化我主要做了两点缩略图用固定尺寸裁剪避免大图加载列表图片加上resizeMethodresize减少内存占用。如果图片来自网络还需要考虑用缓存库但本地 mock 阶段先不过度设计。4.4 状态管理结合 immutable 更新的注意事项在任务列表里频繁操作状态更新我给 store 里的列表更新写了一个统一的updateTaskInList方法。反复操作之后我意识到一个关键点Zustand 的set虽然是浅合并但嵌套对象里的变更必须手动保证不可变性不然会碰到界面不刷新、数据却变了的诡异问题。const updateTaskInList (taskId: number, patch: PartialTaskItem) set((state) ({ tasks: state.tasks.map((item) item.id taskId ? { ...item, ...patch } : item ), }));这里用map返回新数组、用展开运算符更新目标对象每次更新都是全新的引用zustand 才能检测到变化触发重新渲染。如果你直接state.tasks[0].status done再set(state ({ tasks: state.tasks }))引用没变组件不会重渲染这种 bug 排查起来特别费时间。5. 常见问题与排查心得5.1 Unable to resolve module 的几类原因开发阶段遇到最多的报错就是Unable to resolve module。我总结了三类常见原因第一路径别名配置了但 Metro 不知道。每次改babel.config.js都要重启 Metro并--reset-cache否则新的模块解析规则不生效。第二引用了还没安装的包。第三文件大小写写错了。macOS 文件系统默认不区分大小写iOS 模拟器也是但 Android 构建有时对大小写敏感。我自己就栽过一次import UserCard from /components/userCard文件名是UserCard.tsxiOS 跑得好好的Android 直接 module not found。排查路径的第一件事永远是看完整报错信息里面会提示具体的文件位置照着把目录结构翻一遍大部分问题肉眼就能看出来。5.2 新架构下 Android Release 构建失败用 0.80 打 Android release 包我碰到过一次构建失败报错指向Invariant Violation。排查过程是这样的先看android/gradle.properties里的newArchEnabled配置确认新架构相关参数没问题然后关闭代码混淆再打一次包定位到是hermes字节码和某些第三方库的兼容问题。最终解决办法是升级了那个第三方库到支持新架构的版本并且重新清理构建cd android ./gradlew clean cd .. npm run android -- --mode release经验是遇到新架构的 release 问题先区分是自己业务代码的问题还是第三方库的问题。把业务代码屏蔽掉逐步加回来是最快的定位方式。5.3 Metro 缓存导致的改了代码没效果有时候改了页面样式刷新半天还是老样子。这多半是 Metro 缓存搞得鬼。常规操作刷新几次没用的话按这个顺序处理# 停掉 Metro 后 npx react-native start --reset-cache如果还不行清掉原生构建缓存cd android ./gradlew clean cd ios rm -rf Pods pod install然后重新运行。这种清缓存三板斧能解决 90% 的疑难杂症。平时开发尽量保持 Metro 正常生命周期不要频繁 kill避免缓存频繁重建。5.4 Android 模拟器请求本地 Mock 服务连不上我的 mock 服务跑在宿主机的 3000 端口Android 模拟器里访问localhost:3000是连不上的。因为模拟器里的localhost指向的是模拟器自己。解决办法是用 Android 模拟器的专属地址10.0.2.2const BASE_URL Platform.select({ ios: http://localhost:3000, android: http://10.0.2.2:3000, });另外 Android 9 之后默认禁止明文 HTTP 请求需要在android/app/src/main/AndroidManifest.xml里配置usesCleartextTraffictrue或者用 network security config 只对开发域名放开明文权限。这两个点不处理调试期就会一直卡在请求直接失败上。写在最后把整个项目从旧架构切到 0.80 重写一遍我最深的体会是React Native 现在确实到了新架构红利期启动性能、交互流畅度的提升不是玄学真机一跑就能感受到。但这个红利是给那些把基础工程做扎实的人的目录组织、状态管理边界、网络层封装、列表优化参数这些基本功没到位换什么版本都会写出磕磕绊绊的代码。这个任务协作 Demo 我还在继续扩展后续计划把服务端组件和 CodePush 相关能力加进去。你拿到这份参考建议先照着初始化把工程跑通然后改一个自己的页面比如把任务列表换成你的藏书清单、随手记账改着改着就会顺手了。遇到问题欢迎在评论区把报错贴出来我看到会回复。