RN面试这件事说它简单也简单说它坑也真坑。我面过不少移动端岗位也帮团队筛过上百份简历发现一个很普遍的现象很多人简历上写着精通React Native结果一问NavigationContainer的嵌套逻辑就卡壳再问原生模块怎么通信就彻底沉默。问题不在于他们没做过项目而在于大多数RN项目是跑起来就行真正被追问底层机制和性能瓶颈时知识体系是散的。这篇内容就是把我这些年积累的RN面试复习框架完整拆开从原生交互、性能优化、工程化三个维度把高频考点和容易翻车的地方一次讲透。适合准备跳槽的RN开发者、想从Web转移动端的同学以及需要搭建RN团队面试题库的技术负责人参考。1. RN面试到底在考什么从岗位需求倒推知识体系1.1 面试官真正关心的三层能力很多人复习RN面试的方式是刷八股文背React Native的渲染流程这种大而全的题目。但实际面试中面试官的提问逻辑通常遵循一个漏斗结构先确认你做过什么再验证你理解到什么程度最后看你遇到没见过的问题时怎么拆解。第一层是项目经验验证。面试官会问你最近一个RN项目里最复杂的页面是什么用了哪些第三方库为什么选它。这一层看似简单但很多人答得含糊因为项目是跟着教程做的选型理由根本没想过。第二层是机制理解深度。比如你用了FlatList面试官会追问keyExtractor不写会怎样getItemLayout什么时候必须用onEndReached为什么会重复触发这些问题不是背API文档能答好的需要你真正踩过坑。第三层是问题拆解能力。面试官可能抛出一个你没做过的场景比如RN页面里要嵌入一个原生地图手势冲突怎么处理看你能不能从通信机制、事件传递、线程模型几个角度去分析。复习的时候不要只背答案要训练自己被追问三层的能力。每个知识点都问自己是什么、为什么、出问题了怎么办。1.2 从热搜词看当前RN面试的高频方向结合近期的面试反馈和社区讨论RN岗位的考察重点集中在几个方向原生交互Native Module、Native Component、JSI、性能优化启动时间、列表滚动、内存、工程化Monorepo、CI/CD、热更新方案、导航React Navigation的深层配置、TypeScript在RN中的实践。有个趋势值得注意越来越多的岗位要求RN开发者同时具备原生开发能力iOS的Swift/OC或Android的Kotlin/Java因为纯JS层的优化空间有限很多性能问题最终要落到原生侧解决。如果你只会写JSX竞争力会明显弱一截。另外AI辅助测试和代码Review工具在工程化环节的讨论度在上升面试中可能会问到你们团队怎么做自动化测试或如何保证代码质量这类问题没有标准答案但能看出你有没有工程化思维。1.3 不同级别岗位的考察差异初级岗位1-3年重点看组件生命周期、状态管理、基本导航配置、常见UI适配。面试题偏实操比如实现一个下拉刷新列表。中级岗位3-5年重点看性能优化实操、原生模块开发、导航架构设计、TypeScript类型设计。面试题偏场景比如首页加载慢你怎么排查。高级岗位5年以上重点看架构设计、跨团队协作、工程化体系搭建、技术选型决策。面试题偏开放比如如果让你从零搭建一个RN项目的基础设施你会怎么做。对照自己的目标级别把复习精力分配好。初级不用死磕JSI高级不能只会写页面。2. 原生交互RN面试里最容易拉开差距的环节2.1 Native Module的通信链路与线程模型RN和原生的通信本质上是一条跨语言桥接的链路。JS侧调用一个方法序列化参数通过Bridge或新架构下的JSI传到原生侧原生执行完再把结果回传。理解这条链路是回答所有原生交互问题的前提。面试中常问的一个问题是RN的Bridge是异步的那如果我要同步获取一个原生值怎么办在老架构下可以用NativeModules的同步方法通过Promise或回调但真正的同步调用需要借助JSI。新架构Fabric TurboModules下JSI让JS可以直接持有原生对象的引用调用变成同步的性能提升明显。线程模型也是高频考点。RN的JS代码跑在JS线程UI更新在UI线程主线程原生模块默认跑在各自的线程。如果你在原生模块里做了耗时操作不切线程就会阻塞。我见过一个真实案例有人在原生模块里同步读取了一个大文件结果整个列表滚动卡成幻灯片。正确做法是把耗时操作放到后台线程通过回调或Promise返回结果。// iOS原生模块示例在后台线程执行耗时操作 implementation FileReaderModule RCT_EXPORT_METHOD(readFile:(NSString *)path resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{ NSError *error nil; NSString *content [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:error]; if (error) { reject(read_error, 文件读取失败, error); } else { resolve(content); } }); } end这段代码的关键点是dispatch_async它把文件读取放到了全局并发队列不阻塞主线程。面试时如果你能主动提到线程切换面试官会认为你有实战经验。2.2 Native Component的封装与事件传递Native Component比Native Module更复杂因为它涉及UI的创建、布局和事件。面试中常见的题目是如何把一个原生UI组件封装成RN组件核心步骤是原生侧创建一个ViewManagerAndroid或RCTViewManageriOS声明组件的属性和事件JS侧通过requireNativeComponent或codegenNativeComponent引用。属性通过ReactPropAndroid或RCT_EXPORT_VIEW_PROPERTYiOS暴露事件通过RCTEventEmitter或dispatchEvent发送。事件传递是容易出错的地方。原生组件触发事件时需要构造一个事件对象包含target和事件数据通过UIManager.dispatchViewManagerCommand或直接调用onChange回调。如果事件频率很高比如手势要考虑节流否则JS线程会被打爆。封装Native Component时属性和事件的命名要保持一致iOS和Android两侧的实现要对齐。我踩过的坑是Android侧属性名用了驼峰iOS侧用了下划线结果JS侧传值一边生效一边不生效排查了半天。2.3 JSI与TurboModules新架构下的面试加分项如果你面的是中高级岗位JSI几乎是必问的。JSIJavaScript Interface是RN新架构的核心它让JS引擎Hermes/JSC可以直接调用C代码不再依赖Bridge的序列化。面试中可能这样问新架构下Native Module的调用和旧架构有什么区别你可以从几个角度回答旧架构通过Bridge异步通信有序列化开销新架构通过JSI同步调用性能更好TurboModules支持懒加载启动时不用初始化所有模块Fabric负责UI渲染支持并发渲染和更好的优先级控制。如果面试官追问JSI是怎么实现的你可以简单说JSI是一层C抽象它把JS引擎的API如createFunction、getProperty暴露给原生代码原生代码通过Runtime对象操作JS值。不需要背得太深但要知道它解决了什么问题。2.4 原生交互的常见面试题与答题框架整理几个高频题和答题思路面试题答题框架RN如何调用原生方法说明NativeModules用法补充Bridge/JSI通信原理提到线程切换原生如何主动通知RN用EventEmitter说明事件订阅和取消订阅的时机原生UI组件如何封装ViewManager 属性/事件声明 JS侧引用提到布局和测量手势冲突怎么解决分析冲突来源RN手势 vs 原生手势用requireNativeComponent或react-native-gesture-handler的simultaneousHandlers新架构有什么优势JSI同步调用、TurboModules懒加载、Fabric并发渲染、启动优化答题时不要只给结论要展示你的分析过程。比如被问到手势冲突先说冲突通常发生在RN的ScrollView和原生地图的拖拽之间再说我试过两种方案一种是用gesture-handler的互斥配置另一种是在原生侧拦截触摸事件最后说实测下来前者改动小但灵活性差后者更彻底但要改原生代码。3. 性能优化从启动到滚动的全链路排查思路3.1 启动时间优化拆解每个阶段的耗时RN应用的启动时间通常包括几个阶段原生容器初始化、JS Bundle加载、JS引擎初始化、首屏渲染。面试中被问到启动慢怎么优化你要能拆开每个阶段说。原生容器初始化阶段可以延迟加载非必要的原生模块减少Application或AppDelegate里的初始化工作。JS Bundle加载阶段可以用Hermes引擎字节码预编译加载更快或者做Bundle拆分首屏只加载必要的代码。JS引擎初始化阶段Hermes的启动速度比JSC快不少这是选型时就要考虑的。首屏渲染阶段减少首屏组件的数量和层级用InteractionManager延迟非关键任务。我做过一个实测同一个RN应用从JSC切到Hermes冷启动时间从2.3秒降到1.6秒左右。Bundle体积也从8MB降到5MBHermes字节码压缩率更高。这个数据在面试中说出来比单纯说Hermes更快有说服力得多。// 用InteractionManager延迟非关键任务 import { InteractionManager } from react-native; componentDidMount() { InteractionManager.runAfterInteractions(() { // 首屏渲染完成后再执行比如埋点上报、预加载数据 this.preloadData(); }); }3.2 列表性能FlatList的坑与优化手段列表是RN性能问题的重灾区。面试中几乎必问FlatList的优化因为它是日常开发中最常用的组件也最容易出问题。核心优化手段有几个keyExtractor必须写且要稳定不要用indexgetItemLayout在item高度固定时必须提供能让列表跳过测量直接定位removeClippedSubviews在长列表中可以开启但要注意它可能导致内容闪烁maxToRenderPerBatch和windowSize控制渲染窗口大小需要根据item复杂度调整。onEndReached重复触发是个经典坑。原因是列表在滚动过程中多次满足触发条件。解决办法是用一个标志位控制或者用onMomentumScrollBegin配合。// 防止onEndReached重复触发 onEndReached () { if (this.isLoading || this.hasReachedEnd) return; this.isLoading true; this.loadMore().finally(() { this.isLoading false; }); };还有一个容易被忽略的点renderItem里不要写内联函数每次渲染都会创建新函数导致item重新渲染。用useCallback或提取到组件外部。3.3 内存与渲染优化避免不必要的重渲染RN的重渲染问题比Web更敏感因为移动端资源有限。面试中可能问你的RN应用有没有遇到过卡顿怎么定位的定位工具方面可以用React DevTools的Profiler看组件渲染次数用Flipper的Performance插件看JS线程和UI线程的帧率用Xcode Instruments或Android Profiler看内存和CPU。优化手段上React.memo、useMemo、useCallback是基础。但要注意React.memo只做浅比较如果props里有对象或函数需要配合自定义比较函数。另外Context的更新会导致所有消费者重渲染如果Context值频繁变化要考虑拆分Context或用状态管理库的选择器。我遇到过一个案例一个列表页每次滚动都卡排查发现是父组件的状态更新导致整个列表重渲染。把状态下沉到item内部或者用useRef存不参与渲染的值问题就解决了。面试时讲这种具体案例比背优化清单更有说服力。3.4 性能优化的面试答题模板被问到性能问题时按这个框架答先定位用什么工具、看什么指标再分析瓶颈在JS线程还是UI线程是渲染问题还是计算问题最后优化具体手段实测效果。比如列表滚动卡顿这个问题你可以说先用Flipper看帧率发现JS线程帧率低分析是renderItem里做了复杂计算优化方案是把计算移到useMemo或提前算好实测帧率从40提升到58。4. 工程化与导航面试中体现架构思维的切入点4.1 React Navigation的架构设计与常见配置NavigationContainer是React Navigation的根容器它管理导航状态、深链接、主题等。面试中常问NavigationContainer嵌套使用会怎样答案是通常不需要嵌套一个应用只有一个NavigationContainer。如果嵌套了内层的导航状态和外层独立深链接和返回逻辑会混乱。导航结构设计是体现架构能力的地方。常见的模式是根导航器用Stack包含登录页和主应用主应用用BottomTab每个Tab里再嵌套Stack。这种嵌套结构要处理好返回逻辑比如从深层页面返回时应该回到Tab的首页而不是上一个Tab。// 典型的导航结构 const RootStack createNativeStackNavigator(); const MainTab createBottomTabNavigator(); function MainTabs() { return ( MainTab.Navigator MainTab.Screen nameHome component{HomeStack} / MainTab.Screen nameProfile component{ProfileStack} / /MainTab.Navigator ); } export default function App() { return ( NavigationContainer RootStack.Navigator RootStack.Screen nameLogin component{LoginScreen} / RootStack.Screen nameMain component{MainTabs} / /RootStack.Navigator /NavigationContainer ); }面试中可能追问怎么做导航鉴权思路是在NavigationContainer的onStateChange里检查登录状态或者用条件渲染切换导航器。更优雅的方式是用linking配置配合状态管理。4.2 工程化体系Monorepo、CI/CD与代码质量工程化是高级岗位的重点。面试中可能问你们团队的RN项目怎么管理依赖和构建Monorepo是常见方案用Yarn Workspaces或Nx管理多个包如app、组件库、工具库。好处是代码复用方便版本一致坏处是构建配置复杂需要处理依赖提升和缓存。CI/CD方面RN项目的构建包括JS Bundle打包、原生编译、签名、分发。可以用Fastlane做自动化用GitHub Actions或Jenkins做流水线。关键点是缓存依赖和增量构建否则每次全量构建太慢。代码质量方面ESLint Prettier TypeScript是标配。测试用Jest做单元测试Detox或Appium做E2E测试。面试中如果问到怎么保证代码质量可以提到CI里跑lint和测试PR必须通过检查才能合并。4.3 TypeScript在RN项目中的实践要点TypeScript在RN中的使用越来越普遍面试中可能问你怎么给导航参数定义类型React Navigation提供了类型工具可以定义RootStackParamList然后用NativeStackScreenProps获取screen的props类型。这样route.params就有类型提示避免拼写错误。// 导航类型定义 type RootStackParamList { Home: undefined; Detail: { id: string; title: string }; }; type DetailScreenProps NativeStackScreenPropsRootStackParamList, Detail; function DetailScreen({ route, navigation }: DetailScreenProps) { const { id, title } route.params; // 有类型提示 return Text{title}/Text; }原生模块的类型定义也重要。可以用declare module给NativeModules加类型或者用TurboModuleRegistry的泛型。面试中如果问到TS在RN里有什么坑可以说第三方库的类型可能不完整需要自己补声明文件导航类型和状态管理库的类型结合时要小心循环引用。4.4 面试中如何展示工程化思维工程化问题没有标准答案面试官看的是你的思考维度。被问到如果让你搭建RN项目的基础设施你可以从几个层面答代码规范lint、格式化、提交钩子、构建流程Bundle拆分、缓存、多环境配置、质量保障测试策略、CI检查、灰度发布、监控体系错误上报、性能监控、用户反馈。每个层面举一个你实际做过的例子比如我们用了Husky做pre-commit检查提交前跑lint和类型检查避免低级错误进仓库。这种具体细节比泛泛而谈更有说服力。5. 面试复盘那些我踩过的坑和总结出的应对策略5.1 被追问底层原理时的应对方法面试中最怕的是被追问到自己不懂的层面。我的经验是不要硬编但也不要直接说不知道。可以这样回应这块我了解得不够深入我的理解是……说出你知道的部分如果需要更底层的细节我回去会补一下。比如被问到JSI的具体实现你可以说我知道JSI是一层C抽象让JS直接调用原生代码具体的内存管理和线程安全机制我没有深入研究过但我用过TurboModules知道它解决了Bridge的序列化开销问题。这样既展示了你的知识边界也体现了学习态度。5.2 项目经验怎么讲才有说服力讲项目经验时用STAR法则情境、任务、行动、结果但不要机械套用。重点是突出你的决策和取舍。比如首页加载慢我排查发现是接口串行请求导致的改成并行后首屏时间从3秒降到1.5秒。但并行请求多了会给服务端压力所以我又加了请求合并和缓存策略。面试官想听的是你怎么发现问题、怎么权衡方案、怎么验证效果。如果你能说出我试过A方案但因为有XX问题最后选了B方案这比只说我用了B方案强得多。5.3 面试前的复习清单与时间分配建议按这个优先级复习导航和状态管理必考占30%精力React Navigation的配置、参数传递、鉴权Redux/Zustand/MobX的选型和用法。性能优化高频占25%精力启动优化、列表优化、重渲染优化每个方向准备一个实际案例。原生交互中高级必考占25%精力Native Module、Native Component、JSI的基本原理和使用场景。工程化高级岗位重点占15%精力Monorepo、CI/CD、TypeScript、测试策略。基础八股占5%精力生命周期、Hooks规则、Bridge原理快速过一遍即可。复习时不要只看要动手写。比如自己封装一个简单的Native Module跑通一次导航鉴权比看十篇文章都管用。5.4 面试后的复盘方法每次面试完趁记忆还新鲜把被问到的问题和你的回答记下来。重点标注哪些答得好、哪些卡壳了、哪些完全不会。然后针对性地补。我自己的习惯是建一个面试题库文档按知识点分类每次面试后更新。面了五六家之后你会发现高频题就那些反复出现的说明是行业共识必须掌握。偶尔出现的偏题了解思路即可不用死磕。最后分享一个小心得面试中遇到不会的问题可以试着把问题拆解说出你的分析思路。比如被问到RN怎么实现热更新即使你没做过也可以说热更新本质是替换JS Bundle我理解需要解决几个问题Bundle的版本管理、下载和校验、生效时机、回滚机制。具体实现我了解过CodePush和自建方案但没实际落地过。这种回答展示的是你的思维框架面试官通常会认可。