React Native 面试题及详细答案（实战口语版）

ReactNative面试题及详细答案（实战口语版）一、ReactNative基础核心题1、简单说下ReactNative的工作原理RN核心是JS驱动原生渲染，整体分为三层：JS层、原生桥接层、原生渲染层。我们写的JS/TS代码会在JS引擎中运行，不会直接操作原生控件。所有的组件渲染、手势点击、页面跳转等操作，都会通过原生桥（Bridge）把指令批量传递给原生端，由iOS/Android原生系统完成真实的界面渲染和事件响应。反过来，原生的点击、滚动、定位等原生事件，也会通过桥传递回JS层，执行我们写的业务逻辑。而且RN是异步通信机制，JS层和原生层互不阻塞，这也是它性能优于纯Web嵌套方案的核心原因。2、RN和原生开发、ReactWeb的核心区别RNvs原生开发原生是各自平台单独开发，iOS用OC/Swift、Android用Java/Kotlin，两套代码完全独立，开发、维护成本高，但性能天花板最高。RN是一套代码多端运行，迭代快、跨平台一致性高，复杂动画、海量列表场景性能会略逊于纯原生。RNvsReactWebReactWeb最终渲染的是浏览器DOM节点，依赖浏览器环境；RN没有DOM、没有浏览器，所有View、Text、Image都是对原生控件的封装。同时RN适配了移动端手势、状态栏、原生硬件能力，语法和React一致，但API、布局、事件体系完全适配移动端。3、RN中没有DOM怎么实现布局？Flex布局和Web有什么区别？RN完全依靠Flex布局实现页面排版，没有DOM树，也没有传统的文档流。和WebFlex最大的区别有两点：第一，RN所有组件默认flexDirection:column，Web默认是row；第二，RN数值全部不需要单位，直接写数字就是设备像素，不支持px、rem、em这些单位。另外RN简化了部分Flex属性，适配移动端布局场景。二、组件与生命周期相关4、RN函数组件和类组件的区别，项目中怎么选型？核心区别：类组件通过生命周期函数处理业务，有独立的this实例，状态管理基于this.state，代码冗余、逻辑分散；函数组件是纯函数，搭配Hooks管理状态和副作用，代码简洁、逻辑聚合，复用性更强。项目选型：现在新项目全部用函数组件+Hooks，只有维护老项目时会接触类组件。只有极个别复杂场景，比如需要精准控制极复杂的生命周期、高阶组件嵌套的老逻辑，才会保留类组件，日常开发完全优先函数组件。5、说说RN组件的生命周期（类组件完整版）整体分为三个阶段：挂载、更新、卸载挂载阶段：constructor初始化状态和绑定方法→render渲染视图→componentDidMount组件渲染完成，适合请求接口、初始化定时器、监听原生事件。更新阶段：state/props变化触发更新→render重渲染→componentDidUpdate更新完成，适合处理数据更新后的二次逻辑。卸载阶段：componentWillUnmount组件销毁前执行，必须在这里清除定时器、取消接口请求、移除事件监听，防止内存泄漏。三、Hooks高频面试题6、常用的RNHooks有哪些，各自作用？useState：管理组件局部状态，状态更新会触发组件重渲染，是最基础的状态钩子。useEffect：处理副作用，比如接口请求、定时器、事件监听、DOM操作，替代类组件所有生命周期，依赖数组可以精准控制执行时机。useRef：获取组件/原生节点实例，或者存储不变、更新不触发重渲染的变量，比如定时器ID、滚动实例。useMemo：缓存计算结果，避免每次渲染重复执行复杂计算，优化渲染性能。useCallback：缓存函数引用，防止每次渲染生成新函数，配合子组件memo可以避免子组件无效重渲染。useContext：获取全局上下文数据，适合跨层级简单传值，替代逐层props传递。7、useEffect依赖数组的写法和坑点1、空依赖[]：只在组件挂载执行一次，对应componentDidMount，适合首次页面接口请求。2、不传依赖：每次组件渲染、更新都会执行，容易造成死循环，基本不推荐使用。3、指定依赖[a,b]：只有a或b发生变化时才执行。常见坑点：依赖项写不全、遗漏函数/状态，导致逻辑不执行或滞后更新；没有在useEffect中清理副作用，页面卸载后依然执行，造成内存泄漏、接口报错。8、useMemo和useCallback的区别，什么时候用？useMemo缓存的是变量/计算结果，用来优化复杂计算逻辑，避免重复计算；useCallback缓存的是函数，用来稳定函数引用。日常开发中，复杂列表渲染、大量数据筛选计算用useMemo；给子组件传递回调函数时，用useCallback搭配memo做性能优化，减少无效重渲染。四、RN核心组件与移动端适配9、View、Text、Image三大基础组件注意事项1、View：容器组件，只能嵌套子组件，不能直接放文本，这是和Webdiv最大的区别，文本必须包裹在Text里。2、Text：文本唯一组件，支持嵌套、样式继承，所有页面文字展示必须用它，不支持点击透明穿透。3、Image：图片组件，网络图片必须手动设置宽高，本地图片可以自动适配；支持缓存、预加载，比原生图片标签适配性更强，适合移动端图片业务。10、RN移动端适配方案怎么做？如何兼容多机型？项目中主流用像素自适应缩放方案，自己封装适配工具函数，以设计稿375/390为基准，根据设备屏幕宽度动态计算尺寸。不用固定死宽高，所有字体、间距、尺寸全部通过适配函数转换，同时配合Dimensions获取屏幕宽高、屏幕方向，针对平板、折叠屏做特殊兼容。另外字体不随系统字体大小缩放，单独锁定字体适配，保证页面一致性。11、ScrollView和FlatList的区别，各自适用场景ScrollView：一次性渲染所有列表项，不管屏幕是否可见，全部加载渲染。适合少量数据、短列表、静态页面，使用简单。缺点是数据量大时会卡顿、内存占用高。FlatList：高性能长列表组件，支持懒加载、虚拟列表，只渲染屏幕可视区域的节点，离开屏幕的节点会回收销毁。适合海量数据列表、商品列表、消息列表等长列表场景，是项目主力列表组件。补充：FlatList必须设置data和renderItem，keyExtractor绑定唯一key，优化渲染效率。五、路由与状态管理12、RN路由常用库react-navigation核心用法项目中全部用react-navigation，核心分为三种导航器：栈导航、底部标签导航、抽屉导航。栈导航用于页面跳转、返回、传参；底部标签导航用于首页、我的、分类这种常驻页面；抽屉导航多用于侧边栏菜单。日常通过navigate跳转页面，goBack返回上一页，可以在路由参数中传递页面数据，也可以配置路由拦截、页面动画、状态栏适配，完全满足移动端路由需求。13、RN常用状态管理方案怎么选型？1、小型项目、简单页面：用useState+useContext足够，无需引入第三方库，轻量化无成本。2、中型项目、多页面共享状态：用Redux/Toolkit，状态统一管理、可追踪、适合团队协作，数据流向清晰。3、快速开发、异步状态多的项目：用MobX，代码简洁、响应式更新，适合快速迭代业务。现在主流选型是Context+ReduxToolkit，兼顾简洁性和规范性。六、性能优化高频题14、RN页面卡顿、性能差的常见原因和优化方案常见原因：1、不必要的组件频繁重渲染；2、长列表没有用虚拟列表，一次性渲染过多节点；3、大量定时器、监听事件未销毁造成内存泄漏；4、超大图片未压缩、样式层级过多；5、Bridge通信频繁，大量异步任务阻塞。优化方案：1、组件层面：用memo、useCallback、useMemo减少无效重渲染；2、列表层面：全部使用FlatList，开启懒加载、分页加载，设置getItemLayout优化渲染；3、资源优化：图片压缩、缓存图片，避免超大尺寸图片；4、逻辑优化：组件卸载必清副作用，减少不必要的state更新，合并重复状态；5、通信优化：减少高频桥通信，批量处理事件。15、RN内存泄漏的常见场景和解决办法常见场景：定时器setInterval、setTimeout未清除；原生事件监听、键盘监听、网络请求挂载后未取消；弹窗、动画执行中页面卸载。解决办法：所有副作用都要做清理，useEffect返回销毁函数，组件卸载时清除定时器、移除监听、取消pending状态的接口请求，从根源避免内存泄漏。七、原生交互与工程化16、RN如何和原生端通信？核心通过桥接通信，分为两种场景：1、JS调用原生：通过NativeModules调用原生封装的方法，比如调用相机、定位、推送、蓝牙等硬件能力。2、原生调用JS：原生端发送事件，RN通过DeviceEventEmitter监听接收数据，实现双向通信。复杂场景可以自定义原生模块、原生组件，封装统一方法供RN调用，解决RN能力不足的问题。17、RN打包、热更新、版本升级怎么处理？日常开发用Metro打包，区分开发环境和生产环境打包。热更新主流用第三方成熟方案，无需重新上架应用商店，直接更新JS业务包，快速迭代修复bug、更新页面功能。涉及原生代码修改、权限新增、SDK升级时，必须走应用商店整包升级，无法热更新。八、实战场景面试题（口语化作答）18、页面接口请求报错、白屏怎么排查？首先看控制台报错，区分是JS代码报错、接口报错还是原生渲染报错。如果是白屏，优先检查路由配置、组件渲染报错、数组遍历报错、样式崩溃。接口报错就排查请求地址、请求头、跨域、token过期、参数错误，逐层定位问题，同时加全局错误捕获，避免单点报错导致整页白屏。19、长列表滑动卡顿怎么专项优化？首先替换成FlatList虚拟列表，禁止用ScrollView渲染长数据；然后开启分页加载，避免一次性加