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

系统管理员 2022-10-17 10:54 245阅读 0赞

## React PureComponent原理 ##

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

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

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

详参博文：

*  《[ReactNative进阶（三十）：Component和PureComponent解析][ReactNative_Component_PureComponent]》

## Bloc ##

详参博文：

*  《[ReactNative进阶（二十九）：BloC模式][ReactNative_BloC]》

## IoC 框架 InversifyJS ##

详参博文：

*  《[ReactNative进阶（三十一）： IoC 框架 InversifyJS解读][ReactNative_ IoC _ InversifyJS]》

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

详参博文：

*  《[ReactNative进阶（三十六）：ES8中async与await的使用方法详解][ReactNative_ES8_async_await]》

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

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

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

详参博文：

*  《[ReactNative进阶（十六）：React-Native 组件生命周期][ReactNative_React-Native]》

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

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

详参博文：

*  《[ReactNative进阶（四）：ReactNative原理剖析之JS 层渲染之 diff 算法][ReactNative_ReactNative_JS _ 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`(结构共享)，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其他节点则进行共享。

详参博文：

*  《[Immutable 详解及 React 中实践][Immutable _ React]》

## `InteractionManager` ##

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

延迟计划函数比较：

>  *  `requestAnimationFrame()`: 用来执行在一段时间内控制视图动画的代码。
>  *  `setImmediate/setTimeout()`: 在稍后执行代码。注意这有可能会延迟当前正在进行的动画。
>  *  `runAfterInteractions()`: 在稍后执行代码，不会延迟当前进行的动画。

## 缓存用的是什么？ ##

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]

## redux状态管理流程 ##

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

## bundle加载机制 ##

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

[ReactNative_Component_PureComponent]: https://shq5785.blog.csdn.net/article/details/117032817
[ReactNative_BloC]: https://shq5785.blog.csdn.net/article/details/116977788
[ReactNative_ IoC _ InversifyJS]: https://shq5785.blog.csdn.net/article/details/117108216
[ReactNative_ES8_async_await]: https://shq5785.blog.csdn.net/article/details/117227973
[ReactNative_React-Native]: https://shq5785.blog.csdn.net/article/details/116525730
[ReactNative_ReactNative_JS _ diff]: https://shq5785.blog.csdn.net/article/details/116015328
[Immutable _ React]: https://github.com/camsong/blog/issues/3
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]: /images/20221014/1827ed85e3a54f9dbd0d472528af523d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/c28717c1583e48c98939a76749b55a8c.png