2023 ReactNative 经典面试题总结(含答案)

举报
SHQ5785 发表于 2023/07/13 08:41:03 2023/07/13
【摘要】 一、前言在前期博文《Vue进阶(幺零二):面试必备:2022 Vue经典面试题整理(含答案)》、《Vue进阶(四十七):面试必备:2021 Vue经典面试题总结(含答案)》介绍了Vue技术框架相关的面试内容,本篇博文主要讲解另一前端技术栈ReactNative相关的技术面内容。 二、React PureComponent 原理介绍当组件更新时,如果组件的 props 和 state 都没发...

一、前言

在前期博文《Vue进阶(幺零二):面试必备:2022 Vue经典面试题整理(含答案)》、《Vue进阶(四十七):面试必备:2021 Vue经典面试题总结(含答案)》介绍了Vue技术框架相关的面试内容,本篇博文主要讲解另一前端技术栈ReactNative相关的技术面内容。

二、React PureComponent 原理介绍

当组件更新时,如果组件的 propsstate 都没发生改变, render 方法就不会触发,省去 Virtual DOM 的生成和比对过程,达到提升性能的目的。具体就是 React 自动帮我们做了一层浅比较:

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps)
  || !shallowEqual(inst.state, nextState);
}

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

详参博文:

三、Bloc 相关技术面

详参博文:

四、IoC 框架 InversifyJS

详参博文:

五、异步编程解决方案

详参博文:

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

6.1 优势

  • 性能方面媲美原生App。

  • 绝大部分代码同时适用IOS/Android,一套代码两套系统适用。

  • 使用Javascript编码,上手容易。

  • 组件式开发,易于管理维护,代码复用率高。

  • 代码更改后会自动刷新,节省等待时间。

  • 支持热更新,更新无需重新安装App

6.2 劣势

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

七、React Native 组件生命周期

详参博文:

八、setState调用后发生了什么?

  1. 将传入的参数对象与当前的状态合并,然后触发调和过程。

  2. 在调和过程中react会根据新的状态以相对高效的方式构建react元素树。

  3. react会对新旧元素树进行diff算法计算出差异,然后根据差异进行最小化渲染。

详参博文:

九、对 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(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其他节点则进行共享。

详参博文:

十、InteractionManager

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

延迟计划函数比较:

  • requestAnimationFrame(): 用来执行在一段时间内控制视图动画的代码。

  • setImmediate/setTimeout(): 在稍后执行代码。注意这有可能会延迟当前正在进行的动画。

  • runAfterInteractions(): 在稍后执行代码,不会延迟当前进行的动画。

十一、缓存用的是什么?

AsyncStorage 它是一个简单、异步、持久化的键值对存储系统,它对于App来说是全局的。可以用来替代LocalStorage

官网推荐在此基础上封装一层,不要直接使用。

IOS上,AsyncStorage 在原生端的实现是把较小值存放在序列化的字典中,而把较大值写入单独的文件。

Android上,AsyncStorage会尝试使用RocksDB,或退而选择SQLite

在这里插入图片描述

十二、redux 状态管理流程

在这里插入图片描述
action是用户或程序触发的一个普通对象。 reducer是根据action操作来做出不同的数据响应,返回一个新的statestore的最终值就是由reducer的值来确定的。(一个store是一个对象, reducer会改变store中的某些值)。

十三、 bundle 加载机制

在编写业务逻辑的时候,我们会有许多个js文件,打包的时候RN会将这些个js文件打包成一个叫index.android.bundle(ios的是index.ios.bundle)的文件,所有的js代码(包括rn源代码第三方库业务逻辑代码)都在这一个文件里,启动App时会第一时间加载bundle文件,所以脚本热更新要做的事情就是替换掉这个bundle文件。

十四、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。