前端面试题——RN篇

文章目录

前言1.RN和React有什么区别2.RN核心组件3.scrollView和FlatList区别scrollViewList item 4.RN应用导航5.虚拟dom作用是什么目的是什么工作原理 6.RN相对于原生的ios和Android有哪些优/劣势优势劣势 7.RN生命周期8.li列表中有3条数据，删除第二条会发生什么9.RN性能优化10.下拉刷新11.上拉加载

---

前言

下面一起看看关于RN的高频面试题，有需要的小伙伴可以收藏，需要的时候看看

---

1.RN和React有什么区别

React 是一个用于构建网页应用用户界面的库，而 React Native 是一个用于构建原生移动应用程序的框架。React Native 使用原生组件和 API 来渲染应用，而 React 使用 HTML 和 CSS。

2.RN核心组件

View、Text、Image、ScrollView、FlatList

3.scrollView和FlatList区别

scrollView

适合用于展示较小的数据集或者固定内容，不适合大数据量的列表在内容较多时性能较差，因为它会一次性渲染所有子组件，这可能导致内存占用高和滚动卡顿适合用于展示包含多种子组件的固定内容页面，如表单、静态信息等

List item

专为渲染长列表数据而设计，适合用于展示动态数据高效，因为它只渲染当前屏幕上可见的项，并且会随着用户滚动动态加载更多项适合用于展示大量数据列表，如消息列表、联系人列表等

4.RN应用导航

React Native 提供了几个导航库，其中最受欢迎的是 React NavigationReact Navigation 允许开发者使用各种导航器（如 StackNavigator、DrawerNavigator 和 TabNavigator）来处理应用中的导航

5.虚拟dom

作用

提升UI渲染的性能和开发效率

是什么

虚拟DOM是对实际DOM的抽象表示。它是一种轻量级的、用JavaScript对象表示的树结构，反映了UI的状态。
每次UI发生变化时，React首先更新虚拟DOM，然后将虚拟DOM与实际DOM进行对比，只更新需要改变的部分。

目的是什么

操作真实的DOM是昂贵的，因为每次更新DOM都会引发浏览器的重绘（repaint）和回流（reflow）操作，影响性能。
虚拟DOM通过减少对真实DOM的直接操作，显著提升了性能。

工作原理

初次渲染：React组件首次渲染时，会创建虚拟DOM树，并将其转换为真实DOM树，插入到页面中状态变化：当组件的状态或属性发生变化时，React会创建一个新的虚拟DOM树，代表最新的UI状态差异比较（Diffing）：React使用一种高效的算法比较新旧两个虚拟DOM树，找出变化的部分。这一过程称为“调和”（Reconciliation）。React的Diff算法假设同级元素之间可以进行对比，但跨级比较的成本太高，因此它主要比较同一级别的节点。补丁：根据差异比较的结果，React生成一组最小的操作，用来更新真实DOM。这些操作被称为“补丁”。React将这些补丁应用到真实DOM中，只更新那些实际需要变化的部分，而不是整个DOM树。

6.RN相对于原生的ios和Android有哪些优/劣势

优势

跨平台开发：一次编写，随处运行开发效率：自身支持热加载JS生态支持：丰富的库和工具，前端开发经验性能：接近原生的性能，通过桥接（Bridge）技术，可以调用原生组件活跃的社区：社区活跃及背靠Facebook

劣势

性能：原生性能差距：在高性能的需求应用中，如复杂的动画，大量数据处理，图形密集应用（如游戏）等，性能不如原生；启动时间长，因为需要加载JS引擎和解析JS代码原生模块依赖：默写功能可能需要编写原生模块来实现，如访问特定的硬件功能（如蓝牙、nfc），需要开发者具备原生的开发能力开发环境：在某些情况下，配置和管理IOS和Android的开发环境较繁琐

7.RN生命周期

挂载：constructor()、componentDidMount()更新：componentDidUpdate()、shouldComponentUpdate()卸载：componentWillUnmount()

8.li列表中有3条数据，删除第二条会发生什么

一、更新状态
组件的UI是由状态驱动的，当状态发生变化时，rn会重新渲染组件，反应最新的状态

创建新的状态触发重新渲染

二、渲染流程
当状态更新时，RN会执行一下步骤

比较新旧状态：比较新状态和旧状态，确定哪些部分发生了变化。这种比较基于虚拟 DOM生成更新后的虚拟DOM：根据新的状态，React 生成一个更新后的虚拟 DOM 表示新的 UI 结构更新真实DOM：React 将虚拟 DOM 与真实 DOM 进行对比（Reconciliation），并找出需要更新的部分。只有发生变化的部分（在这个例子中是第二个 li 元素）会被更新到真实 DOM。

三、视图更新

旧元素移除：在新的状态下，不再包含第二个列表项，因此 React Native 会从视图层移除对应的组件。其它元素重排：剩余的元素会重新排列。例如，第三个列表项会移动到第二个位置。

9.RN性能优化

使用 FlatList 组件 ：高效渲染大列表。优化图片 ：压缩图片并使用适当的图片格式。减少重新渲染 ：使用 shouldComponentUpdate 或 React.memo 来防止不必要的重新渲染。优化状态管理 ：最小化状态更新和重新渲染的次数。

10.下拉刷新

rn中通过 RefreshControl组件可以实现

步骤：

捕获下拉手势：监听用户的下拉手势，通常是通过监听 touchstart、touchmove和 touchend事件来实现。显示刷新指示器：当检测到下拉手势时，显示一个刷新指示器（通常是一个旋转的图标）。触发数据刷新：当手势超过一定阈值时，触发数据刷新逻辑，从服务器或本地获取最新数据。更新列表和隐藏指示器：数据刷新完成后，更新列表数据，并隐藏刷新指示器。

11.上拉加载

使用 FlatList 组件的 onEndReached 属性，这个属性允许你在用户滚动到列表底部时触发一个函数，从而进行数据加载

可以通过 ScrollView 组件的 onScroll 属性来实现。onScroll 事件提供了滚动视图的当前位置信息，你可以通过它来获取滚动的高度或位置。