做 React Native 开发这些年面试和被面试都经历过不少发现大家嘴上说“八股文”烦可真到要讲清楚架构原理、启动白屏、列表优化这些高频考点时很少有人能说透。这篇 React Native 八股文全面指南不是让你背答案而是把这些年的知识地图、实战踩坑和面试回答思路一起串起来。适合准备前端跨端岗位面试的人也适合团队里刚接手 RN 项目、想系统补一遍底层知识的同学。很多刚入行的朋友觉得“RN 八股文”就是背题其实面试官问的都是有线索的。你答得越底层越能体现“遇到问题能自己排查”的能力。比如启动白屏为什么会出现Old Architecture 和 New Architecture 差别在哪FlatList 凭什么比 ScrollView 能扛长列表这些问题背后都是同一套知识体系。下面我从原理、高频基础、性能优化、原生交互、工程化这五条主线展开把能直接拿去用的回答思路一并写出来。1. React Native 八股文到底在考什么1.1 八股文背后的底层能力“八股文”三个字听上去像死记硬背但 React Native 的面试题很少是纯背诵类。面试官真正想通过几道经典问题判断三件事第一你对跨端架构的理解停留在 API 调用层还是深入到 JS 引擎、渲染管线、原生通信这一层第二遇到启动白屏、长列表卡顿、内存上涨这类真实项目问题有没有明确的排查路径第三你踩过的坑是“网上搜了个解决方案”还是“真正知道为什么”。比如同样问“为什么 RN 列表要用 FlatList”背答案的人会说“FlatList 有懒加载”。真正懂的人会从 VirtualizedList 的窗口化机制讲起说明它如何按可见区域渲染、如何回收 Item、为什么 keys 和 getItemLayout 会影响性能。这两者的差距在面试官眼里是“用过”和“会排查”的差距。1.2 不同经验档位的考察侧重从招聘方的视角初级、中级、高级岗位考察的八股范围差很多。初级岗位重点看基础是否扎实比如 state/props 区别、组件生命周期、Flexbox 布局、事件处理中级岗位开始要求理解性能优化和原生交互比如 FlatList 的 render 优化、如何封装 Native Module、如何分析启动耗时高级岗位一般会追问架构演进、JSI/新架构、跨端方案选型甚至让你现场分析一段卡顿代码。所以准备八股时别想着一个模板吃到底。下面这张表是我总结的档位侧重可以作为自测清单经验档位高频考察点隐藏能力初级组件生命周期、props/state、样式布局、导航基础 API 熟练度中级FlatList 优化、组件通信、原生模块封装、性能分析问题排查能力高级新架构/JSI、渲染管线、架构选型、跨端治理系统设计与优化能力2. 原理类必问八股桥接、渲染与架构演进2.1 老架构的桥接机制React Native 从诞生到 0.68 之前的版本最核心的机制是 Bridge桥。面试官问“RN 是怎么让 JS 调用原生能力的”本质就是在问 Bridge 的数据流。JS 引擎跑在单独的 JavaScript 线程原生 UI 跑在 UI 主线程这两边不能直接操作对方。Bridge 做了一件事把通信内容序列化成 JSON 消息通过异步消息队列批量转发。这个机制有三个关键点。第一JS 调用原生 API 时调用参数会先转成 JSON 字符串通过 Bridge 传到原生侧再解析成原生对象返回值也要走一遍同样的序列化。第二消息会做批量处理一个 tick 里的多次调用会被合并成一批发送。第三Bridge 是异步的JS 侧拿不到同步的返回值所以 callback 或者 Promise 成了标配。这个设计的好处是 JS 线程和原生线程互不阻塞但代价就是每次穿越桥都有序列化和反序列化的开销。面试里有个经典追问“为什么 Bridge 性能受限”你可以从三个角度答一是大数据量传输时 JSON 序列化耗时明显比如传一张 base64 图片二是类型映射需要成本JS 对象和原生类型不是一一对应三是桥的吞吐量有限高频频繁调用会导致队列堆积、UI 卡顿。如果项目里出现过“JS 频繁调用原生导致掉帧”的问题基本都能归到这个原因。2.2 新架构到底新在哪JSI、Fabric、TurboModules、Codegen新架构是近年 React Native 面试的“必考压轴题”核心是一组彼此配合的技术JSI、Fabric、TurboModules、Codegen。JSIJavaScript Interface是替代 Bridge 的 C 层接口它让 JS 对象可以直接持有 C 对象或原生对象的引用两边共享同一个对象不需要每次调用都做 JSON 序列化。你可以把 Bridge 理解为快递运输每次发货都要拆箱、装箱JSI 更像是两方共用一个仓库你直接把东西放到架子上对方拿来就用。这带来的优势是调用开销显著下降而且为同步调用提供了可能。Fabric 是新渲染器它替代了原来的 ShadowTree 管理方式让渲染过程有优先级调度能力。简单说Fabric 可以打断低优先级渲染优先响应手势和动画这对页面交互的流畅度提升非常关键。TurboModules 是把原生模块懒加载只有真正用到某个模块时才初始化优化启动速度。Codegen 则根据 JS 和原生之间的接口定义自动生成类型安全的桥接代码减少手工维护出错。面试时别只背名词要能展开说一个具体案例。比如“启动速度如何受益于 TurboModules”你可以说老架构会在启动时初始化大量原生模块哪怕业务根本没用到新架构 Turbomodule 是懒加载JS 调到某个模块时才初始化对应实例启动阶段省掉了一堆无用工作。2.3 从 Bridge 到 JSI 的升级逻辑“为什么会有新架构”这个问题如果只答“性能更好”会显得没有深度。更完整的逻辑链条是老架构的桥接方式虽然让跨端成为可能但序列化开销和异步通信限制了很多场景比如手势库、数据库、Canvas 这类需要高频原生调用的能力做不好。新架构通过 JSI 暴露原生宿主对象让 JS 和原生之间可以共享对象、互相调用性能天花板一下子被抬高了。React Native 的兼容策略也值得一提。新架构保留了旧的组件生命周期和大多数 API让存量业务可以渐进式迁移。但注意新架构下像 TurboModule 的注册方式、自定义原生模块的写法都变了面试官经常追问“老项目升到新架构要注意什么”。回答重点先确认所有依赖是否兼容新架构再逐步开启 Fabric 和 TurboModules别一把梭。3. 面试高频基础八股组件、状态、样式与列表3.1 组件生命周期与 Hooks 要点React Native 的组件基础面试题和 React Web 高度重叠但更偏移动端实际场景。类组件生命周期常被追问的点是constructor、componentDidMount、componentDidUpdate、componentWillUnmount 分别在什么时机触发。函数式组件则要答清楚 useEffect 的依赖数组、useLayoutEffect 和 useEffect 区别以及为什么 Hook 不能写在条件判断里。我自己面试时经常建议候选人用一个“心智模型”把 useEffect 看成“渲染提交后执行副作用”的地方别把它理解成 componentDidMount 的替代品。依赖数组里的每个值都会触发前后两次 effect 对比这在 React Native 里尤其要小心。比如你在 effect 里监听 AppState忘记清理监听就可能导致内存泄漏。还有一个高频题“useCallback 和 useMemo 有什么区别”简洁答案是useCallback 返回一个记忆化的函数useMemo 返回一个记忆化的值。加分答案是useCallback 通常用于防止子组件不必要的 re-renderkey 属性配合 memo 才有效useMemo 则用于缓存计算成本高的值但在移动端上别滥用过度缓存反而增加内存压力。3.2 状态管理该选谁状态管理是前端八股里永远绕不开的话题。RN 场景下最常见的是 Redux、Context、Zustand 三选一。面试官会问“setState 是同步还是异步”这里一定要答到点子上在 React 18 之前的 RN 事件处理函数中setState 是异步批处理的在原生计时器或原生回调里因为不走 React 的事件系统行为会有差异。React 18 开始自动批处理几乎所有来源的 setState 都会批处理这算一个加分的知识更新。Redux Toolkit 依然是大型项目的主流选项因为它的 devtools、中间件、状态追溯能力成熟。Context 适合低频全局数据比如登录状态、主题配置但如果数据更新频繁所有消费组件都会重新渲染性能容易出问题。Zustand 近年很受欢迎代码量少、selector 精准更新适合中小型项目。面试时最忌讳“这个没有标准答案”你要给出选型依据团队熟悉度、状态更新频率、调试需求、包体积。还有一类题会问“为什么不要把所有状态都放全局 store”。答案是全局 store 会破坏组件的封装性导致每次数据变化的影响面难以控制。移动端内存和渲染资源都有限应该把状态尽量下沉到组件树内部。3.3 样式系统与布局细节React Native 的样式并不等于 CSS。它的样式对象使用驼峰命名比如 backgroundColor 而不是 background-color所有尺寸不带单位系统会按 DPR 自动映射布局默认是 flexDirection: column和 Web 的 row 方向不一样。很多新手项目做出来上下不居中、左右溢出都出在 flexDirection 上。面试时高频题“如何做屏幕适配”。回答思路优先用 flex 布局和百分比再结合 PixelRatio、useWindowDimensions 处理不同屏幕。千万不要只知道一个 Dimensions.get(window)因为屏幕旋转和 iPad 多窗口环境下它不会自动更新最好用 useWindowDimensions 这个 Hook。样式性能方面有一个比较少人提的点内联样式对象每次渲染都会创建新对象虽然 React Native 内部有缓存机制但大量动态样式仍可能引起额外开销。稳定样式可以提取成 StyleSheet.create这样能复用对象减少分配成本。还有圆角、阴影等属性要留意 Android 上 elevation 的使用以及 iOS 上 shadow* 属性的配合。3.4 FlatList 高性能原理与八股题FlatList 是 React Native 面试的“钉子户”几乎必问。它底层依赖 VirtualizedList核心机制是“窗口化”只渲染当前可视区域附近的一部分 Item离屏的 Item 会被回收或复用。这也是 FlatList 能支撑上千条数据、而 ScrollView 一多就卡的原因。常见的追问点有五个。第一keyExtractor 的作用给每个 Item 提供稳定唯一 key帮助 React diff 优化不要用数组 index否则数据增删会导致渲染错乱。第二getItemLayout如果每个 Item 高度固定传入 getItemLayout 可以跳过动态测量大幅提升滚动性能。第三initialNumToRender首屏渲染多少个 Item建议结合一屏能展示的数量设置太大白屏慢太小滚到下面才加载。第四Item 组件需要用 memo 包裹否则父组件更新时每个 Item 都会重渲染。第五不要往 renderItem 里写箭头函数做事件绑定吗其实可以但事件回调最好用 useCallback 包裹能降低重复渲染。还有一个容易答错的题“FlatList 里加载更多怎么做”标准做法是 onEndReached但要注意 onEndReached 会触发多次需要自己用状态位防抖。这个细节比“知道有 onEndReached”更能体现实战经验。4. 启动白屏与性能优化从原理到实操4.1 启动白屏是怎么产生的“React Native 启动白屏”是近期搜索热词也是项目上线后用户反馈最集中的问题之一。要搞懂白屏先看启动链路原生启动后要初始化 JS 引擎、加载 JS Bundle、执行 JS 逻辑然后再渲染第一帧 UI。白屏的根源在于从 App 图标出现到第一帧 React Native 页面绘制完成之间JavaScript 和原生层还没就绪用户看到的就是空白。具体拆解下来有三个耗时环节。一是 Bundle 的加载App 启动时需要从本地或远端读取 JS Bundle如果 Bundle 体积大加载解析就慢。二是 JS 执行App 入口也就是 index.js 里的注册逻辑以及所有模块初始化代码会一次性执行这里如果依赖了很多原生模块或者用了大量第三方库启动就会变慢。三是首屏渲染渲染器要完成布局计算并提交给原生层如果首屏组件太深、图片太多也会拖慢第一帧。面试时如果能把这个链路讲清楚再对应到优化手段会比只说“用启动屏挡住白屏”好得多。启动屏只是补丁真正要做的是缩短三个环节的时间。4.2 排查与优化手段实战中我会按“先量化、再定位、后优化”的顺序处理。第一步用 React Native 自带的性能监控和 Flipper 观察 JS 加载耗时、原生线程负载。Flipper 是个调试神器能看网络请求、布局层级、JS 内存还能自动分析启动阶段各模块耗时。第二步用 React DevTools Profiler 录制首屏渲染看哪些组件 render 次数高、哪些函数耗时突出。优化手段分三个层面Bundle 体积优化开启 Metro 的 inline requires让模块到真正使用时才初始化Android 上开启 RAM Bundleunbundle让 Metro 按模块列表加载iOS 上用 App Split 或者按需加载。如果 Bundle 还是很大可以考虑把部分业务拆成独立分包等到路由命中时再加载。启动逻辑优化把不影响首屏的初始化操作挪到 requestIdleCallback 或 InteractionManager.runAfterInteractions 里减少入口文件中同步的全局配置检查第三方 SDK 初始化能懒加载就懒加载。渲染优化首屏组件拆成更小的单元避免一个巨型组件树图片用合适的尺寸避免首屏加载大量原图网络数据则先用缓存或骨架屏占位。4.3 一个五步走优化方案示例这里给出一套我多次用于线上 RN 项目的五步优化方案算是“抄作业”级别的模板开启 inline requires。在 metro.config.js 里设置 transformer.inlineRequires 为 true这会改变模块初始化时机。旧版本需谨慎因为个别模块依赖模块顶层初始化行为但现在绝大多数库都兼容。Android 开启 RAM Bundle。在 build.gradle 中启用 enableSeparateBuildPerCPUArchitecture并通过 bundleInRelease 生成 unbundle 文件。它让 Metro 生成模块列表运行时只加载用到的模块不仅启动更快内存占用也低。启动屏替换为原生视图。启动屏不是让白屏消失而是让用户觉得白屏没有发生。建议把启动屏背景色和应用主色调一致或者干脆做成单色 Logo避免突兀的白闪。首屏接口并发请求。打开页面时并行请求首屏数据JS 渲染和网络加载同步进行。注意要处理好 loading 状态避免数据返回后再次白屏。使用 InteractionManager 延迟非必要任务。第三方统计、日志上传、WebSocket 连接等不影响首屏展示的初始化全部放到交互空闲后再执行。这套方案做完启动耗时通常能缩短 20%-40%。优化后记得做真机验证Android 中低端机的收益往往比 iOS 更明显。5. 原生通信、调试、发布与工程化5.1 自定义原生模块与组件封装思路React Native 项目难免会碰到底层能力比如蓝牙、扫码、推送、音视频这些场景都需要自己写原生模块。八股文里最常问的是“你封装过原生模块吗说一下流程”。老架构写法是创建 RCTBridgeModule 协议的类用 RCT_EXPORT_MODULE() 注册模块用 RCT_EXPORT_METHOD() 暴露方法给 JS需要回调就传 callback需要 Promise 就用 RCTPromiseResolveBlock/RejectBlock。Android 侧类似继承 ReactContextBaseJavaModule用 ReactMethod 标注方法。新架构则是基于 JSI 的 TurboModule通过 Codegen 生成接口代码。实际踩坑点有三个。第一原生模块的方法默认跑在 Native 线程如果里面直接操作 UI会碰线程问题所以涉及 UI 更新要切到主线程。第二像蓝牙、定位这些会在后台持续回调的模块要注意在 onHostDestroy 时清理资源否则容易泄漏。第三频繁的双向通信尽量批量处理尽量别一条条回调 JS。我记得有个项目就是因为蓝牙每 20ms 回调一次导致 JS 侧 CPU 飙高后来改成 100ms 批量上报就好了。5.2 调试与热更新实战RN 调试有一套完整的工具链。Metro 是开发服务器Dev Menu 里可以开启远程 JS 调试旧架构是 Chrome Debugger新架构可以直接用 Hermes Debugger。建议面试时主动说清楚 Flooper 或 React DevTools 的用法因为这代表你有实际排查问题的能力。热更新是移动端比较敏感的话题但八股文一定会问。RN 生态里最常用的是 CodePush 和 Metro 的 Hot Reload。注意区分开发时的 Fast Refresh 是开发体验优化线上热更新才叫 OTA。CodePush 早期是微软的产品现在已经整合进 App Center国内团队也常自建 OTA 平台。核心原理是让 App 启动时检查远端 Bundle 版本有更新就下载新 Bundle下次启动生效。答这个题要补充风险点OTA 只能更新 JS 层不能更新原生代码如果原生依赖变了必须走应用商店发版。5.3 工程化与测试大型 RN 项目不能只看单页开发工程化能力也是面试的加分项。一个稳定的 RN 项目结构至少包含/src 源码目录、/ios 和 /android 原生目录、/scripts 脚本工具、/tests测试目录。代码规范用 ESLint Prettier提交前跑 Husky 钩子做 lint-stagedCI 里跑单元测试和静态检查。测试方面Jest 是标配配合 React Native Testing Library 做组件渲染和交互测试。但别把测试写得过于琐碎优先覆盖核心业务逻辑、表单校验、异常分支。原生升级是另一个容易踩坑的工程问题跨大版本升级时建议借助升级 helper 工具对比源码差异逐个模块迁移别一上来直接改 package.json 重新 npm install。6. 高频八股速查与避坑经验6.1 高频问题答案速查表把常见的八股问题汇总成一张速查表直接背关键点面试前看一遍能救急。问题关键回答点加分表达key 的作用帮助 React 识别列表项优化 diff用唯一 id 而不是 index避免复用错误setState 是同步还是异步在 React 事件里异步在计时器里可能同步React 18 自动批处理所有场景解释批处理机制和性能意义为什么 FlatList 比 ScrollView 优秀窗口化渲染只渲染可视区附近 Item还能提到 getItemLayout、回收机制如何解决启动白屏从 Bundle 加载、JS 执行、首屏渲染三阶段优化别说“加启动屏”要说具体优化手段原生模块通信方式老架构 Bridge JSON 序列化新架构 JSI 对象共享提到 TurboModule 懒加载状态管理怎么选Redux 适合大型项目Zustand 适合轻量场景Context 适合低频全局态给出选型对比而不是背概念图片缓存怎么做默认 Image 不缓存推荐 FastImage 或自研 LRU 缓存提内存告警和磁盘缓存RN 和 Flutter 怎么选RN 生态大、JS 技术栈、原生桥接成熟Flutter 渲染一致性强、性能高结合业务场景和团队能力不要拉踩6.2 面试与实战中的避坑经验最后分享一下我这些年实际踩过、也看过别人踩的坑。第一个坑是“只会 npm install”。很多候选人说做过 RN 项目但问起启动流程、打包产物、原生工程结构一概不知。哪怕平时都是在脚手架基础上开发也要自己去理解一遍 react-native init 生成的工程里各目录的作用至少知道 main.jsbundle 在哪里、Metro 是怎么工作的。第二个坑是把 Web 前端经验生搬硬套。RN 虽然是 React 语法但样式布局、事件系统、导航机制都是移动端范式比如 touch 事件、屏幕旋转、沉浸式状态栏这些 Web 里不常见。答题时如果能主动结合移动端特性会显得经验更扎实。第三个坑是不关注版本。React Native 版本差异非常大0.59 和 0.71 之间的 API 和架构完全不同。面试时最好明确自己“主版本用的是什么”提到新架构时说明自己在哪个版本上验证过。这比笼统说“我了解新架构”更有可信度。第四个坑是理论讲得漂亮但没排查思路。拿启动白屏来说光学名词没用面试官想听的是你拿到一个白屏问题第一件事会做什么是看日志还是看网络请求这就需要平时多做案例分析。我建议准备一两个自己项目里真实遇到的性能问题把定位过程、优化措施、前后性能数据完整写下来面试效果会好很多。每次面试前临时翻资料记答案效果远不如平时把一个知识点串成体系。我自己的习惯是把所有踩过的坑、做过的优化都记在一个“排查笔记”里面试前看一眼比背大段 API 文档有用得多。这套 React Native 八股文指南其实就是把笔记里的主线理了出来希望你在准备时也能找到自己的知识锚点带着真实项目去验证每一个理论。