2021React前端面试总结

参加面试对面试官问题总结

最近一直参加面试，故对面试题进行一些总结，希望能对大家有用。

React生命周期执行顺序

这个问题考察点：我们对React生命周期的理解，对我们平时在项目中出现bug分析问题的一种考察。

constructor --> componentWillMount —> render --> componentDidMount
update 过程：componentWillReceiveProps -->shouldComponentUpdate --> componentWillUpdate --> render --> componentDidUpdate
卸载过程：componentWillUnmout

当然componentWillReceiveProps 在React中被废弃 替代是：getDerivedStateFromProps。
getDerivedStateFromProps在无论是props发生变化还是state发生变化都会触发。

可以参考：https://www.jianshu.com/p/514fe21b9914

父子组件生命周期执行顺序

参考上面的执行顺序，会先进父组件的componentWillMount然后依次执行子组件生命周期函数到所有子组件的componentDidMount执行完成再执行父组件的render和componentDidMount。
多个子组件交替执行。

a==11 && a==22 && a==33在什么情况下为true

考察点：js == 双等语句的隐性转换。
可以参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Equality

这里大概说一下解题思路：
当对象和一个数值进行比较时，对象的隐形转换的方式是通过toString()和valueOf()来进行转换，并且是先valueOf()再toString()的。了解这个之后实现方式就很简单了。
代码如下：

var a = {
	num: 0,
	toString: () => {
		this.num++
		return this.num * 11;
	}
}

变量提升，js预编译，作用域

考察点：如标题，这个考察基础能力，这三个考察点可以出无限的面试题，所以一定要研究明白，加分项满满的。很多前端面试题教学的都有讲这个的。
参考面试题：

a = 100;
console.log(a) //100
var a;
console.log(b) //undefind
var b;

这是一个很简单的变量提升的题。当然这些是在非严格模式下执行的结果。
js为什么会有变量提升的情况存在，是因为存在预编译。那么预编译会做什么呢。
1.会将所有的声明（包括函数声明，函数形参）提前并且函数声明的优先级高于变量的声明。这也是变量提升的原因
2.然后会给所有的变量的赋值为undefind.
所以上面的代码执行顺序：

var a = undefind;
a = 100;
console.log(a);
//var a; 这一步提前执行了就不会再执行了

关于预编译还有很多很多面试题网上可以搜到，解决这类题的话，只要不着急慢慢自己整理出来实际的执行顺序就好。不要急不要乱。
这个是一个讲预编译的博客可以看看：
https://segmentfault.com/a/1190000018001871
关于作用域的话，只要牢记就近原则这一条就ok
就近原则：会在变量使用的最小作用域单元查找（块级活着函数级）找不到往父级一直找到全局作用域为止。

var a = 100;
var b = 10;
function test(a) {
	console.log(a);
	console.log(b);
	console.log(c);
	var c = 1;
	console.log(c);
}
test(20);
// 20
// 10
// undefind
// 1

这是我自己造的一道面试题，这道题需要注意函数形参也相当于变量声明。
然后b这里就能看出作用域的查找原理。

HTTP协议和HTTPS协议区别以及网络状态码

关于http协议：https://developer.mozilla.org/zh-CN/docs/Web/HTTP

http协议状态码：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

状态码的话：一般常问到的是300 和 400 和500这些错误的状态码

300一般是重定向的。

400的状态码一般是客户端的响应，是服务端对客户端发送过来的数据的一些响应，也是前端接触比较的状态码回答的时候拿项目中比较常见的来说，如果问太多的话 可以回答忘记了，因为有的时候在实际开发中我们也经常会去查阅状态码。

500 是服务端的响应，表示客户端的请求已经发给服务端，但是在服务端出现了问题。

其实对于网络状态码面试提问，面试官是很宽容的，所以答的好是加分项，即使答的不好，面试官也不会很纠结这个。

还有遇到这个问题的时候，也可以通过一些自己在项目中常遇见的状态码，然后自己怎么通过状态码分析前端请求方法错误地方来作答，这样也行。

http和https协议的区别：

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
　　可以在网上搜索一些博客看看。

Hook的好处为什么Hook会大规模推崇

React的hooks出来也一年多，至于他的好处各大博客也有讲，可以自己搜索一些博客，加上自己平时使用hooks的过程的感受来谈谈，总结一套适合自己的答案。

可以参考React官网中对于Hook简介

常用的Hook有哪些

对于这个问题更多是你在平时工作中怎么使用hook然后对每个hook怎么理解他们的用途来答。
首先React官网中Hook概览这个页面里面的hook一定有的也是一定要答。
其次就是其他hook
这里面需要额外说几句的

1. useCallback: 这个我们在平时项目中会使用该hook包裹一些方法，缓存这个方法，当依赖发生变化时更改方法体的实现然后为了解决闭包陷阱。
2. useMemo：React 可能仍需要在跳过渲染前渲染该组件。不过由于 React 不会对组件树的“深层”节点进行不必要的渲染，所以大可不必担心。如果你在渲染期间执行了高开销的计算，则可以使用 useMemo 来进行优化。这个是React官网上的一段话，可以去理解一下。大部分做性能优化。
3. 提到useMemo需要注意的它有点类似shouldComponentUpdate，在使用hook之后都是函数组件，那么除了这个React还提供了React.memo这样的高阶组件来实现类似shouldComponentUpdate功能。
4. 关于useCallback和useMemo的差异，其实useCallback的底层是通过useMemo来实现的，所以可以通过自己在实际项目中对他们不同的使用场景来答，然后既然useCallback的底层是useMemo实现的也就表示useMemo可以完全替代useCallback。

Promise

这个是前端必会的，就不过多口舌。
文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

首先它有三个状态，pending 已兑现（fulfilled）成功，已拒绝（rejected）cath，一旦状态发生变化就不逆了。

然后就是promise.all https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
此方法在集合多个 promise 的返回结果时很有用。

完成（Fulfillment）：
如果传入的可迭代对象为空，Promise.all 会同步地返回一个已完成（resolved）状态的promise。
如果所有传入的 promise 都变为完成状态，或者传入的可迭代对象内没有 promise，Promise.all 返回的 promise 异步地变为完成。
在任何情况下，Promise.all 返回的 promise 的完成状态的结果都是一个数组，它包含所有的传入迭代参数对象的值（也包括非 promise 值）。

失败/拒绝（Rejection）：
如果传入的 promise 中有一个失败（rejected），Promise.all 异步地将失败的那个结果给失败状态的回调函数，而不管其它 promise 是否完成。

有些面试官会让人自己实现一个promise.all的方法，这个就看你怼promise.all这个方法的理解了，可以根据上面的描述自己自己说说思路。
可以自己查查博客，因为我也是自己知道大概思路，直接写代码没写过，后面有空我会尝试一下。

Promise.race() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/race

一个待定的 Promise 只要给定的迭代中的一个promise解决或拒绝，就采用第一个promise的值作为它的值，从而异步地解析或拒绝（一旦堆栈为空）。

描述
race 函数返回一个 Promise，它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失败（rejects），这要取决于第一个完成的方式是两个中的哪个。

如果传的迭代是空的，则返回的 promise 将永远等待。

如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺，则 Promise.race 将解析为迭代中找到的第一个值。

最近面试遇到的问题基本在这里，因为我面试的公司没有那种一线大厂，可能有些面试题就很常见，但是也希望对大家有一些帮助。

面试总结：每一道面试题都有面试官的考察点，即使这个考察点在实际开发中用的不多但是依然是有用。而我们作为面试者，所要做的只有努力提升自己，我以前很不喜欢刷面试题，但是这次面试真的改变很多，刷一些面试题能自己明白很多，在面试的时候更加从容，这样不是很好嘛。但是刷面试题最好能理解地去记忆。