看完这篇文章保你面试稳操胜券——React篇
✨欢迎各位小伙伴：\textcolor{blue}{欢迎各位小伙伴：}欢迎各位小伙伴：
✨ 进大厂收藏这一系列就够了，全方位搜集总结，为大家归纳出这篇面试宝典，面试途中祝你一臂之力！，共分为四个系列
✨包含Vue40道经典面试题\textcolor{green}{包含Vue40道经典面试题}包含Vue40道经典面试题
✨包含react12道高并发面试题\textcolor{green}{包含react12道高并发面试题}包含react12道高并发面试题
✨包含微信小程序34道必问面试题\textcolor{green}{包含微信小程序34道必问面试题}包含微信小程序34道必问面试题
✨包含javaScript80道扩展面试题\textcolor{green}{包含javaScript80道扩展面试题}包含javaScript80道扩展面试题
✨包含APP10道装逼面试题\textcolor{green}{包含APP10道装逼面试题}包含APP10道装逼面试题
✨包含HTML/CSS30道基础面试题\textcolor{green}{包含HTML/CSS30道基础面试题}包含HTML/CSS30道基础面试题
✨还包含Git、前端优化、ES6、Axios面试题\textcolor{green}{还包含Git、前端优化、ES6、Axios面试题}还包含Git、前端优化、ES6、Axios面试题
✨接下来让我们饱享这顿美味吧。一起来学习吧！！！\textcolor{pink}{接下来让我们饱享这顿美味吧。一起来学习吧！！！}接下来让我们饱享这顿美味吧。一起来学习吧！！！
✨本篇为《看完这篇文章保你面试稳操胜券》第五篇（react、app、git）\textcolor{pink}{本篇为《看完这篇文章保你面试稳操胜券》第五篇（react、app、git）}本篇为《看完这篇文章保你面试稳操胜券》第五篇（react、app、git）
react
React 中 keys 的作用是什么？
Keys是React用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识 在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。 在 React Diff 算法中React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素， 从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系， 因此我们绝不可忽视转换函数中 Key 的重要性
传入 setState 函数的第二个参数的作用是什么？
该函数会在 setState 函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成
React 中 refs 的作用是什么
Refs 是 React 提供给我们的安全访问 DOM元素或者某个组件实例的句柄 可以为元素添加ref属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回
在生命周期中的哪一步你应该发起 AJAX 请求
我们应当将AJAX 请求放到 componentDidMount 函数中执行，主要原因有下
React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到 componentWillMount 的触发次数。对于 componentWillMount 这个生命周期函数的调用次数会变得不确定，React 可能会多次频繁调用 componentWillMount。如果我们将 AJAX 请求放到 componentWillMount 函数中，那么显而易见其会被触发多次，自然也就不是好的选择。 如果我们将AJAX 请求放置在生命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了setState函数将数据添加到组件状态中，对于未挂载的组件则会报错。而在 componentDidMount 函数中进行 AJAX 请求则能有效避免这个问题
shouldComponentUpdate 的作用
shouldComponentUpdate 允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新
如何告诉 React 它应该编译生产环境版
通常情况下我们会使用 Webpack 的 DefinePlugin 方法来将 NODE_ENV 变量值设置为 production。 编译版本中 React会忽略 propType 验证以及其他的告警信息，同时还会降低代码库的大小， React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息
概述下 React 中的事件处理逻辑
为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。 这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。 另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。 这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的
createElement 与 cloneElement 的区别是什么
createElement 函数是 JSX 编译之后使用的创建 React Element 的函数，而 cloneElement 则是用于复制某个元素并传入新的 Props
redux中间件
中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。 这种机制可以让我们改变数据流，实现如异步action ，action 过滤，日志输出，异常报告等功能 redux-logger：提供日志输出 redux-thunk：处理异步操作 redux-promise：处理异步操作，actionCreator的返回值是promise
react组件的划分业务组件技术组件？
根据组件的职责通常把组件分为UI组件和容器组件。 UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。 两者通过React-Redux 提供connect方法联系起来
react旧版生命周期函数
初始化阶段
getDefaultProps:获取实例的默认属性 getInitialState:获取每个实例的初始化状态 componentWillMount：组件即将被装载、渲染到页面上 render:组件在这里生成虚拟的DOM节点 componentDidMount:组件真正在被装载之后 运行中状态
componentWillReceiveProps:组件将要接收到属性的时候调用 shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行了） componentWillUpdate:组件即将更新不能修改属性和状态 render:组件重新描绘 componentDidUpdate:组件已经更新 销毁阶段
componentWillUnmount:组件即将销毁
新版生命周期
在新版本中，React 官方对生命周期有了新的 变动建议:
使用getDerivedStateFromProps替换componentWillMount； 使用getSnapshotBeforeUpdate替换componentWillUpdate； 避免使用componentWillReceiveProps； 其实该变动的原因，正是由于上述提到的 Fiber。首先，从上面我们知道 React 可以分成 reconciliation 与 commit两个阶段，对应的生命周期如下:
reconciliation
componentWillMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate commit
componentDidMount componentDidUpdate componentWillUnmount 在 Fiber 中，reconciliation 阶段进行了任务分割，涉及到 暂停 和 重启，因此可能会导致 reconciliation 中的生命周期函数在一次更新渲染循环中被 多次调用 的情况，产生一些意外错误
Git相关面试题
git代码冲突处理
先将本地修改存储起来 git stash 暂存了本地修改之后，就可以pull了。 git pull 还原暂存的内容 git stash pop stash@{0}
避免重复的合并冲突
正如每个开发人员都知道的那样，修复合并冲突相当繁琐，但重复解决完全相同的冲突（例如，在长时间运行的功能分支中）更让人心烦。解决方案是：
git config --global rerere.enabled true 或者你可以通过手动创建目录在每个项目的基础上启用.git/rr-cache。
使用其他设备从GitHub中导出远程分支项目，无法成功。
其原因在于本地中根本没有其分支。解决命令如下： git fetch -- 获取所有分支的更新 git branch -a -- 查看本地和远程分支列表，remotes开头的均为远程分支 -- 导出其远程分支，并通过-b设定本地分支跟踪远程分支 git checkout remotes/branch_name -b branch_name
APP相关面试题
你平常会看日志吗, 一般会出现哪些异常（Exception）?
这个主要是面试官考察你会不会看日志，是不是看得懂java里面抛出的异常，Exception
一般面试中java Exception（runtimeException ）是必会被问到的问题 app崩溃的常见原因应该也是这些了。常见的异常列出四五种，是基本要求。
常见的几种如下：
NullPointerException - 空指针引用异常 ClassCastException - 类型强制转换异常。 IllegalArgumentException - 传递非法参数异常。 ArithmeticException - 算术运算异常 ArrayStoreException - 向数组中存放与声明类型不兼容对象异常 IndexOutOfBoundsException - 下标越界异常 NegativeArraySizeException - 创建一个大小为负数的数组错误异常 NumberFormatException - 数字格式异常 SecurityException - 安全异常 UnsupportedOperationException - 不支持的操作异常
app的日志如何抓取?
adb logcat | find “com.sankuai.meituan” >d:\hello.txt
也可以用ddms抓取，手机连上电脑，打开ddms工具，或者在Android Studio开发工具中，打开DDMS
app对于不稳定偶然出现anr和crash时候你是怎么处理的？
app偶然出现anr和crash是比较头疼的问题，由于偶然出现无法复现步骤，这也是一个测试人员必备的技能，需要抓日志。查看日志主要有3个方法：
方法一：app开发保存错误日志到本地 一般app开发在debug版本，出现anr和crash的时候会自动把日志保存到本地实际的sd卡上，去对应的app目录取出来就可以了
方法二：实时抓取 当出现偶然的crash时候，这时候可以把手机拉到你们app开发那，手机连上他的开发代码的环境，有ddms会抓日志，这时候出现crash就会记录下来日志。 尽量重复操作让bug复现就可以了
adb logcat | find “com.sankuai.meituan” >d:\hello.txt
方法三：第三方sdk统计工具
一般接入了第三方统计sdk,比如友盟统计，在友盟的后台会抓到报错的日志
App出现crash原因有哪些？
为什么App会出现崩溃呢？百度了一下，查到和App崩溃相关的几个因素：内存管理错误，程序逻辑错误，设备兼容，网络因素等，如下： 1.内存管理错误：可能是可用内存过低，app所需的内存超过设备的限制，app跑不起来导致App crash。 或是内存泄露，程序运行的时间越长，所占用的内存越大，最终用尽全部内存，导致整个系统崩溃。 亦或非授权的内存位置的使用也可能会导致App crash。 2.程序逻辑错误：数组越界、堆栈溢出、并发操作、逻辑错误。 e.g. app新添加一个未经测试的新功能，调用了一个已释放的指针，运行的时候就会crash。 3.设备兼容：由于设备多样性，app在不同的设备上可能会有不同的表现。 4.网络因素：可能是网速欠佳，无法达到app所需的快速响应时间，导致app crash。或者是不同网络的切换也可能会影响app的稳定性。
app出现ANR，是什么原因导致的？
那么导致ANR的根本原因是什么呢？简单的总结有以下两点：
1.主线程执行了耗时操作，比如数据库操作或网络编程 2.其他进程（就是其他程序）占用CPU导致本进程得不到CPU时间片，比如其他进程的频繁读写操作可能会导致这个问题。
细分的话，导致ANR的原因有如下几点： 1.耗时的网络访问 2.大量的数据读写 3.数据库操作 4.硬件操作（比如camera) 5.调用thread的join()方法、sleep()方法、wait()方法或者等待线程锁的时候 6.service binder的数量达到上限 7.system server中发生WatchDog ANR 8.service忙导致超时无响应 9.其他线程持有锁，导致主线程等待超时 10.其它线程终止或崩溃导致主线程一直等待。
android和ios测试区别？
App测试中ios和Android有哪些区别呢？ 1.Android长按home键呼出应用列表和切换应用，然后右滑则终止应用； 2.多分辨率测试，Android端20多种，ios较少； 3.手机操作系统，Android较多，ios较少且不能降级，只能单向升级；新的ios系统中的资源库不能完全兼容低版本中的ios系统中的应用，低版本ios系统中的应用调用了新的资源库，会直接导致闪退（Crash）； 4.操作习惯：Android，Back键是否被重写，测试点击Back键后的反馈是否正确；应用数据从内存移动到SD卡后能否正常运行等； 5.push测试：Android：点击home键，程序后台运行时，此时接收到push，点击后唤醒应用，此时是否可以正确跳转；ios，点击home键关闭程序和屏幕锁屏的情况（红点的显示）； 6.安装卸载测试：Android的下载和安装的平台和工具和渠道比较多，ios主要有app store，iTunes和testflight下载； 7.升级测试：可以被升级的必要条件：新旧版本具有相同的签名；新旧版本具有相同的包名；有一个标示符区分新旧版本（如版本号）， 对于Android若有内置的应用需检查升级之后内置文件是否匹配（如内置的输入法）
另外：对于测试还需要注意一下几点： 1.并发（中断）测试：闹铃弹出框提示，另一个应用的启动、视频音频的播放，来电、用户正在输入等，语音、录音等的播放时强制其他正在播放的要暂停； 2.数据来源的测试：输入，选择、复制、语音输入，安装不同输入法输入等； 3.push（推送）测试：在开关机、待机状态下执行推送，消息先死及其推送跳转的正确性； 应用在开发、未打开状态、应用启动且在后台运行的情况下是push显示和跳转否正确； 推送消息阅读前后数字的变化是否正确； 多条推送的合集的显示和跳转是否正确；
4.分享跳转：分享后的文案是否正确；分享后跳转是否正确，显示的消息来源是否正确；
5.触屏测试：同时触摸不同的位置或者同时进行不同操作，查看客户端的处理情况，是否会crash等
app测试和web测试有什么区别？
WEB测试和App测试从流程上来说，没有区别。 都需要经历测试计划方案，用例设计，测试执行，缺陷管理，测试报告等相关活动。 从技术上来说，WEB测试和APP测试其测试类型也基本相似，都需要进行功能测试、性能测试、安全性测试、GUI测试等测试类型。
他们的主要区别在于具体测试的细节和方法有区别，比如：性能测试，在WEB测试只需要测试响应时间这个要素，在App测试中还需要考虑流量测试和耗电量测试。
兼容性测试：在WEB端是兼容浏览器，在App端兼容的是手机设备。而且相对应的兼容性测试工具也不相同，WEB因为是测试兼容浏览器，所以需要使用不同的浏览器进行兼容性测试（常见的是兼容IE6，IE8，chrome，firefox）如果是手机端，那么就需要兼容不同品牌，不同分辨率，不同android版本甚至不同操作系统的兼容。（常见的兼容方式是兼容市场占用率前N位的手机即可），有时候也可以使用到兼容性测试工具，但WEB兼容性工具多用IETester等工具，而App兼容性测试会使用Testin这样的商业工具也可以做测试。
安装测试：WEB测试基本上没有客户端层面的安装测试，但是App测试是存在客户端层面的安装测试，那么就具备相关的测试点。
还有，App测试基于手机设备，还有一些手机设备的专项测试。如交叉事件测试，操作类型测试，网络测试（弱网测试，网络切换）
交叉事件测试：就是在操作某个软件的时候，来电话、来短信，电量不足提示等外部事件。
操作类型测试：如横屏测试，手势测试
网络测试：包含弱网和网络切换测试。需要测试弱网所造成的用户体验，重点要考虑回退和刷新是否会造成二次提交。弱网络的模拟，据说可以用360wifi实现设置。
从系统架构的层面，WEB测试只要更新了服务器端，客户端就会同步会更新。而且客户端是可以保证每一个用户的客户端完全一致的。但是APP端是不能够保证完全一致的，除非用户更新客户端。如果是APP下修改了服务器端，意味着客户端用户所使用的核心版本都需要进行回归测试一遍。
还有升级测试：升级测试的提醒机制，升级取消是否会影响原有功能的使用，升级后用户数据是否被清除了。
Android四大组件
Android四大基本组件：Activity、BroadcastReceiver广播接收器、ContentProvider内容提供者、Service服务。
Activity:
应用程序中，一个Activity就相当于手机屏幕，它是一种可以包含用户界面的组件，主要用于和用户进行交互。一个应用程序可以包含许多活动，比如事件的点击，一般都会触发一个新的Activity。
BroadcastReceiver广播接收器：
应用可以使用它对外部事件进行过滤只对感兴趣的外部事件(如当电话呼入时，或者数据网络可用时)进行接收并做出响应。广播接收器没有用户界面。然而，它们可以启动一个activity或serice 来响应它们收到的信息，或者用NotificationManager来通知用户。通知可以用很多种方式来吸引用户的注意力──闪动背灯、震动、播放声音等。一般来说是在状态栏上放一个持久的图标，用户可以打开它并获取消息。
ContentProvider内容提供者:
内容提供者主要用于在不同应用程序之间实现数据共享的功能，它提供了一套完整的机制，允许一个程序访问另一个程序中的数据，同时还能保证被访问数据的安全性。只有需要在多个应用程序间共享数据时才需要内容提供者。例如：通讯录数据被多个应用程序使用，且必须存储在一个内容提供者中。它的好处：统一数据访问方式。
Service服务：
是Android中实现程序后台运行的解决方案，它非常适合去执行那些不需要和用户交互而且还要长期运行的任务（一边打电话，后台挂着QQ）。服务的运行不依赖于任何用户界面，即使程序被切换到后台，或者用户打开了另一个应用程序，服务扔然能够保持正常运行，不过服务并不是运行在一个独立的进程当中，而是依赖于创建服务时所在的应用程序进程。当某个应用程序进程被杀掉后，所有依赖于该进程的服务也会停止运行（正在听音乐，然后把音乐程序退出）。
Activity生命周期?
周期即活动从开始到结束所经历的各种状态。生命周期即活动从开始到结束所经历的各个状态。从一个状态到另一个状态的转变，从无到有再到无，这样一个过程中所经历的状态就叫做生命周期。
Activity本质上有四种状态：
1.运行（Active/Running）:Activity处于活动状态，此时Activity处于栈顶，是可见状态，可以与用户进行交互
2.暂停（Paused）:当Activity失去焦点时，或被一个新的非全面屏的Activity，或被一个透明的Activity放置在栈顶时，Activity就转化为Paused状态。此刻并不会被销毁，只是失去了与用户交互的能力，其所有的状态信息及其成员变量都还在，只有在系统内存紧张的情况下，才有可能被系统回收掉
3.停止（Stopped）:当Activity被系统完全覆盖时，被覆盖的Activity就会进入Stopped状态，此时已不在可见，但是资源还是没有被收回
4.系统回收（Killed）:当Activity被系统回收掉，Activity就处于Killed状态
如果一个活动在处于停止或者暂停的状态下，系统内存缺乏时会将其结束（finish）或者杀死（kill）。这种非正常情况下，系统在杀死或者结束之前会调用onSaveInstance()方法来保存信息，同时，当Activity被移动到前台时，重新启动该Activity并调用onRestoreInstance()方法加载保留的信息，以保持原有的状态。
在上面的四中常有的状态之间，还有着其他的生命周期来作为不同状态之间的过度，用于在不同的状态之间进行转换，生命周期的具体说明见下。
什么是activity
什么是activity，这个前两年出去面试APP测试岗位，估计问的最多了，特别是一些大厂，先问你是不是做过APP测试，那好，你说说什么是activity? 如果没看过android的开发原理，估计这个很难回答，要是第一个问题就被难住了，面试的信心也会失去一半了，士气大减。
Activity是Android的四大组件之一，也是平时我们用到最多的一个组件，可以用来显示View。 官方的说法是Activity一个应用程序的组件，它提供一个屏幕来与用户交互，以便做一些诸如打电话、发邮件和看地图之类的事情，原话如下： An Activity is an application component that provides a screen with which users can interact in order to do something, such as dial the phone, take a photo, send an email, or view a map.
Activity是一个Android的应用组件，它提供屏幕进行交互。每个Activity都会获得一个用于绘制其用户界面的窗口，窗口可以充满哦屏幕也可以小于屏幕并浮动在其他窗口之上。 一个应用通常是由多个彼此松散联系的Activity组成，一般会指定应用中的某个Activity为主活动，也就是说首次启动应用时给用户呈现的Activity。将Activity设为主活动的方法 当然Activity之间可以进行互相跳转，以便执行不同的操作。每当新Activity启动时，旧的Activity便会停止，但是系统会在堆栈也就是返回栈中保留该Activity。 当新Activity启动时，系统也会将其推送到返回栈上，并取得用在这里插入图片描述 户的操作焦点。当用户完成当前Activity并按返回按钮是，系统就会从堆栈将其弹出销毁，然后回复前一Activity 当一个Activity因某个新Activity启动而停止时，系统会通过该Activity的生命周期回调方法通知其这一状态的变化。 Activity因状态变化每个变化可能有若干种，每一种回调都会提供执行与该状态相应的特定操作的机会
语音通话功能
WebRTC实时通讯的核心 WebRTC 建立连接步骤 1.为连接的两端创建一个 RTCPeerConnection 对象，并且给 RTCPeerConnection 对象添加本地流。
2.获取本地媒体描述信息(SDP)，并与对端进行交换。
3.获取网络信息(Candidate，IP 地址和端口)，并与远端进行交换。
装逼神器
一般通过面试的短短一个小时时间，面试官需要对你的技术底子进行磨盘，如果你看完下面这些材料，相信你一定能够让他心里直呼牛逼（下面所有链接文章均是小编自己总结的）
关于scoped样式穿透问题
Vue2和Vue3的区别
项目中的登录流程
构造函数、原型、继承
项目中遇到的难点
写在最后
✨原创不易，还希望各位大佬支持一下\textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下
👍 点赞，你的认可是我创作的动力！\textcolor{green}{点赞，你的认可是我创作的动力！}点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！\textcolor{green}{收藏，你的青睐是我努力的方向！}收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！\textcolor{green}{评论，你的意见是我进步的财富！}评论，你的意见是我进步的财富！
