react native面试题

web前端面试react-native篇

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

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

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

2.React Native 的缺点是什么？

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

3.Redux状态管理流程

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实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。