ReactNative进阶（四十二）：面试必备：2024 ReactNative 经典面试题总结（含答案

最新推荐文章于 2025-03-10 09:30:00 发布

原创最新推荐文章于 2025-03-10 09:30:00 发布 · 536 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #面试 #学习

程序员专栏收录该内容

107 篇文章

订阅专栏

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个认识自己的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总


而 `shallowEqual` 又做了什么呢？会比较 `Object.keys(state | props)` 的长度是否一致，及每一个 `key` 是否两者都有，并且是否是一个引用，也就是只比较了第一层的值，确实很浅，所以深层的嵌套数据是对比不出来的。


详参博文：


* 《[ReactNative进阶（三十）：Component和PureComponent解析](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》


### 三、Bloc 相关技术面


详参博文：


* 《[ReactNative进阶（二十九）：BloC模式](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》


### 四、IoC 框架 InversifyJS


详参博文：


* 《[ReactNative进阶（三十一）： IoC 框架 InversifyJS解读](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》


### 五、异步编程解决方案


详参博文：


* 《[ReactNative进阶（三十六）：ES8中async与await的使用方法详解](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》


### 六、React Native 相对于原生 IOS、Android 有哪些优、劣势？


#### 6.1 优势



> 
> * 性能方面媲美原生App。
> * 绝大部分代码同时适用`IOS/Android`，一套代码两套系统适用。
> * 使用`Javascript`编码，上手容易。
> * 组件式开发，易于管理维护，代码复用率高。
> * 代码更改后会自动刷新，节省等待时间。
> * 支持热更新，更新无需重新安装`App`。
> 
> 
> 


#### 6.2 劣势



> 
> * `RN`组件库不全，第三方组件库也不全，当遇到某些特殊功能，需要花费大量时间、精力完成；性能方面也无法媲美原生，还是会有一些损耗，特别是大数据交换时；
> * 系统适配方面， `IOS`版本略好，`android`发展较慢；
> * 编程方面， `ios`和`android`代码并非通用，有可能需要维护两套代码或者在代码中做一些条件判断或编译；
> * 开发人员还是需要会原生开发，不然自定义组件无法编码；
> * 开发复杂应用必须精通原生开发，开发效率并不比原生开发的熟手快。很多问题（包括兼容性问题解决）任然需要原生开发。
> * 升级`RN`版本或需要大动干戈，尤其向下兼容不好；
> 
> 
> 


### 七、React Native 组件生命周期


详参博文：


* 《[ReactNative进阶（十六）：React-Native 组件生命周期](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》


### 八、setState调用后发生了什么？



> 
> 1. 将传入的参数对象与当前的状态合并，然后触发调和过程。
> 2. 在调和过程中`react`会根据新的状态以相对高效的方式构建`react`元素树。
> 3. `react`会对新旧元素树进行`diff算法`计算出差异，然后根据差异进行最小化渲染。
> 
> 
> 


详参博文：


* 《[ReactNative进阶（四）：ReactNative原理剖析之JS 层渲染之 diff 算法](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》


### 九、对 Immutable 的理解


`Javascript` 中的对象一般是可变的(`Mutable`)。 由于使用了引用赋值，新对象简单引用原始对象后，新旧对象值的修改都将影响到彼此。虽然这样做可以节省内存，但应用变得复杂后，这就造成了非常大的隐患，`Mutable`带来的优点变得得不偿失。为了解决这个问题，一般的做法是使用**深浅拷贝**来避免修改，但这样又造成了CPU和内存的浪费。而`Immutable`可以很好地解决这些问题。


目前流行的`Immutable`库有两个：


* `immutable.js`
* `seamless-immutable`


`Imutable`优点：



> 
> 1. 降低了`Mutable`带来的复杂度；
> 2. 节省内存；
> 3. `Undo/Redo`, `Copy/Paste`, 甚至时间旅行这些功能做起来都是小菜一碟；
> 4. 并发安全；
> 5. 拥抱函数式编程；
> 
> 
> 


`Immutable`缺点：



> 
> 1. 需要学习新的API；
> 2. 增加了资源文件的大小；
> 3. 容易和原生对象混淆；
> 
> 
> 


**什么是Immutable Data?**  
 `Immutable Data`是一旦被创建，就不能被更改的数据。对`Immutable` 对象的任何修改或添加删除操作都会返回一个新的`Immutable` 对象。`Immutable` 实现原理是持久化数据结构（`Persistent Data Structure`）,也就是使用旧数据创建新数据的同时要保证旧数据的可用且不变。同时又为了避免深拷贝把所有节点都复制一遍带来的性能损耗，`Immutable` 使用了`Structure Sharing`(结构共享)，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其他节点则进行共享。


详参博文：


* 《[Immutable 详解及 React 中实践](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》


### 十、InteractionManager


`InteractionManager`可以将一些耗时较长的工作安排到所有互动或动画后执行，这样可以保证JS动画的流畅性。如：`Navigator`转场动画。


延迟计划函数比较：



### 最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![名不虚传！字节技术官甩出的"保姆级"数据结构与算法笔记太香了](https://img-blog.csdnimg.cn/img_convert/a3e940acdcd55765852a8bfe54482664.png)