react native面试题

灰太狼 2022-02-25 15:38 380阅读 0赞

### web前端面试react-native篇 ###

ps：一部分关于react native面试题搜集总结，不喜勿喷，有什么问题希望大家指正，谢谢！！！

##### 1.React Native相对于原生的ios和android有哪些优势？ #####

React Native一套代码可以跨平台使用  
减少人力，节省时间  
避免Android和IOS版本发布时间不同步  
开发新功能迅速  
更方便的增量更新  
组件开发，代码重用性很高

##### 2.React Native 的缺点是什么？ #####

内存占用较高  
版本还不稳定，一直在更新

##### 3.Redux状态管理流程![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70_pic_center] #####

action是用户触发或程序触发的一个普通对象。  
reducer是根据action操作来做出不同的数据响应，返回一个新的state。  
store的最终值就是由reducer的值来确定的。（一个store是一个对象, reducer会改变store中的某些值）  
action -> reducer -> 新store -> 反馈到UI上有所改变。  
同时，作为一款应用状态管理框架，为了让应用的状态管理不再错综复杂，使用Redux时应遵循三大基本原则，否则应用程序很容易出现难以察觉的问题。这三大原则包括：  
单一数据源：  
整个应用的State被存储在一个状态树中，且只存在于唯一的Store中。  
State是只读的：  
对于Redux来说，任何时候都不能直接修改state，唯一改变state的方法就是通过触发action来间接的修改。而这一看似繁琐的状态修改方式实际上反映了Rudux状态管理流程的核心思想，并因此保证了大型应用中状态的有效管理。  
应用状态的改变通过纯函数来完成：  
Redux使用纯函数方式来执行状态的修改，Action表明了修改状态值的意图，而真正执行状态修改的则是Reducer。且Reducer必须是一个纯函数，当Reducer接收到Action时，Action并不能直接修改State的值，而是通过创建一个新的状态对象来返回修改的状态。

##### 4.加载bundle机制 #####

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

##### 5.Flex布局 #####

采用Flex布局的元素，称为Flex容器（flex Container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。  
容器的属性  
以下6个属性设置在容器上。  
flex-direction 属性决定主轴的方向（即项目的排列方向)。  
flex-wrap 属性定义，如果一条轴线排不下，如何换行。  
flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式。  
justify-content 定义了项目在主轴上的对齐方式。  
align-items 属性定义项目在交叉轴上如何对齐。  
align-content align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

##### 6.简述code push的原理 #####

code push 调用 react native 的打包命令，将当前环境的非 native 代码全量打包成一个 bundle 文件，然后上传到微软云服务器（Windows Azure）。 在 app 中启动页（或 splash 页）编写请求更新的代码（请求包含了本地版本，hashCode、appToken 等信息），微软服务端对比本地 js bundle 版本和微软服务器的版本，如果本地版本低，就下载新的 js bundle 下来后实现更新(code push 框架实现)。

##### 7.Redux中同步action和异步action的最大区别是什么？ #####

同步只返回一个普通 action 对象。而异步操作中途会返回一个 promise 函数。当然在 promise 函数处理完毕后也会返回一个普通 action 对象。thunk 中间件就是判断如果返回的是函数，则不传导给 reducer，直到检测到是普通 action 对象，才交由 reducer 处理。

##### 8.下列代码输出什么 #####

constructor() {
        super();
        this.state = {
          val: 0
        };
      }
    
      componentDidMount() {
        this.setState({val: this.state.val + 1});
        console.log(this.state.val);    // 第 1 次 log
    
        this.setState({val: this.state.val + 1});
        console.log(this.state.val);    // 第 2 次 log
    
        setTimeout(() => {
          this.setState({val: this.state.val + 1});
          console.log(this.state.val);  // 第 3 次 log
    
          this.setState({val: this.state.val + 1});
          console.log(this.state.val);  // 第 4 次 log
        }, 0);
      }
    
      render() {
        return null;
      }
    };
    答案：4 次 log 的值分别是：0、0、2、3。

##### 9.在使用redux过程中，如何防止定义的action-type的常量重复？ #####

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。  
Symbol函数前不能使用new命令，否则会报错。这是因为生成的Symbol是一个原始类型的值，不是对象  
Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20220225/d89234ab4fe040fe8046aeb08f48076e.png