我有拖延症，逃避了很久，这篇面试题总结还是不得不行动起来，主要不总结我又不会去学习下一步，呃......算了，我自己都无语了

还是2021年，单独写这篇面试题总结，主要是因为面试过程确实让我印象深刻，面试官的面试水平也是我从来没有遇到过的（面试官太强？我太弱？）本能的不想面对。

一、h5和小程序功能不一样吗？为什么要单独写h5的项目？

问：h5和小程序如何交互？数据怎么相互通信？

二、web端用过哪些响应式布局？

答：flex

问：除了flex还有什么响应式方法吗

答：百分比，css的响应式单位：比如rem、rpx

问：rem的工作原理？（就是rem是怎么工作的）

......好的，我死了......

三、定位有哪些方式？

...这题我会

答：相对定位relative，绝对定位absolute，固定定位fixed，粘性定位sticky

...反正回答的时候我没说的这么溜，那什么粘性定位单词都记不到了，只知道有个s⭐╮（￣﹏￣）╭⭐

问：绝对定位和固定定位有什么区别？

我的个乖乖，我当时很自信的说fixed是相对于浏览器的，面试官皱了个眉又问了我一遍，给我整不会了，可是我下来看了一下就是啊，所以是面试官记错了吧？？？

四、隐藏元素的方法？

答：display:none；opacity:0(提示了一下visibility:hidden)

问：display:none和visibility:hidden的区别？

结构： display:none: 会让元素完全从dom中消失，渲染的时候 不占据任何空间, 不能点击
visibility: hidden:不会让元素从dom中消失，渲染元素 占据空间，不能点击
opacity: 0: 不会让元素从dom中消失，渲染元素继续 占据空间，可以点击
继承： display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能： display：none : 修改元素会造成文档重排，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少
opacity: 0 ：修改元素会造成重绘，性能消耗较少

五、css如何实现一个元素淡入淡出？

答：animation动画，设置透明度

<div class='box'></div>
div {
  width: 200px;
  height: 200px;
  background-color: red;
}

.box3:hover {
  animation: fade 5s;
}
@keyframes fade {
  form { opacity:  1s;}
  to{ opacity: 0;}
}

问：还知道其他方式吗？比如过渡动画transition?

.box {
  opacity   : 1;
  transition: opacity 0.5s;
}

.box:hover {
  opacity: 0;
}

六、用过哪些css3的属性？css的变量呢？

七、简单说一下BFC

块级格式化上下文，不同BFC之间不会相互影响，同一个BFC中的块元素垂直外边距会重合触发BFC:

根元素html;
float不为none;
overflow不为visible;
position：absolute或fixed;
display：inline-block或flex;

八、盒子模型有哪种？有什么区别？

大概这个问题是我回答的最好的了，他还没说完我就会抢答了(︶.̮︶✽)不说了，写这篇总结的时候我都还尴尬得抠jio

标准盒子模型：width不包含padding和border，

box-sizing:conent-box;

IE模型：width包含padding和border

box-sizing:border-box;

九、flex布局，如果想换行如何实现

答：设置flex-wrap:wrap

问：设置元素居中后，换行的元素也会居中，如何让它换行后从左边排列？

我....我的内心是崩溃的，既然要从左排列，为啥还要设置居中？反正我不是很能理解这个问题

（提示：使用grid布局，或者用空元素补齐）

十、前端js模块化有哪些规范？

答：import和require

问：叫什么？是什么规范？

答：require是commonjs，import是ES Module

CommonJs 输出的是一个值得拷贝，ES6 输出的是值得引用；
CommonJs 是运行时加载，ES6 是编译时输出，所以ES6会提升到模块，不能使用变量；
CommonJs 的require()是同步加载，可能会造成阻塞，ES6 的import是异步加载

问：了解他们的原理吗？我们平时一般用哪一种？

十一、说一下MVVM模式

MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

十二、说一下react的生命周期

主要分为三个阶段

挂载阶段：

componentWillMount（废弃，使用getDerivedStateFromProps）
componentDidMount

更新阶段：

componentWillReceiveProps（父组件触发）
shouleComponentUpdate
componentWillUpdate（废弃，使用getSnapshotBeforeUpdate）
componentDidUpdate 更新阶段的生命周期在react 16之后都推荐使用getDerivedStateFromProps来处理逻辑

卸载阶段：

componentWillUnmount

问：在react组件中如何处理错误边界？

使用getDerivedStateFromError判断处理值，根据返回的值显示降级UI，在componentDidCatch中打印错误信息

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {    // 更新 state 使下一次渲染能够显示降级后的 UI    
    return { hasError: true };  
  }
  componentDidCatch(error, errorInfo) {    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo); 
  }
  render() {
    if (this.state.hasError) {      // 你可以自定义降级后的 UI 并渲染      
      return <h1>Something went wrong.</h1>;   
    }
    return this.props.children; 
  }
}

然后作为常规组件使用

<ErrorBoundary>
  <MyChild />
</ErrorBoundary>

但是，错误边界不能捕获以下场景中产生的错误：

事件处理

异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）

它自身抛出来的错误（可以捕获它的子组件的错误，所以通常用来作为需要捕获错误的顶层组件）

十三、深入了解过react的模式吗？

balabala...提到了diff算法

问：为什么要做diff

答：减少对真实DOM的操作，合并对真实DOM的操作我这句描述是有问题的，只可意会不可言传o(╥﹏╥)o

问：为什么优化后的diff算法复杂度为O(n)？了解过吗？

问：了解fiber吗？

十四、react的setState是同步还是异步？

答：生命周期、事件函数里是异步，setTimeout里是同步（提示过的）

十五、class组件内如何同步使用state？

答：this.setState的回调函数中可以同步获取

十六、类组件的ref是做什么的？

答：操作真实DOM

问：如何绑定ref?

答：在ref属性上写一个函数赋值

问：为什么是一个函数呢？是绑定在真实DOM上吗？

答：不是，render函数中return的也只是一个js对象（提示：是一个组件实例）

问：那在函数组件中，没有实例，ref怎么用呢？（自己写的函数组件如何让外部通过ref调用自定义的方法？）

结合useImperativeHandle和forwardRef，forwardRef包裹组件，useImperativeHandle暴露实例值

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => { //父组件可以通过ref直接调子组件的focus方法
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

十七、官方提供的Hook在使用过程中有什么要求？

答：必须在组件内顶部定义

问：可以写在循环里面吗？ ---不能

可以写在条件分支里面吗？ ---不能

可以写在条件分支后面吗？ ---不能

if(...) { return <Loading />; }
...                    // <—— 这里可以使用吗
return <div ...</div>;

十八、useEffect的依赖数组有什么作用？

问：如果依赖数组为空？

问：如果有个变量声明在组件外部，作为依赖数组，依赖会检测到这个变量的改变吗？

答：不会，因为外部其实只执行一次

问：为什么外部只执行了一次？

答：整个react项目中，组件只是一个函数，渲染组件只是在执行这个函数，不会重复外部逻辑

十九、使用过useLayoutEffect吗？useMemo？memo?

答：使用memo，组件会对props浅比较

问：什么是浅比较？

答：基础数据类型直接对比值，引用类型对比引用

问：对比的是哪一级？

问：组件使用了memo，是否只要props不变，组件一定不会重新渲染？

答：内部state改变会引起重新渲染，还有父级节点标签改变也会（重新挂载）...

问：对比时key不一样了，节点是mount还是update?

问：用redux的useSelector时，redux的值改变，memo包裹的组件会重新渲染吗？为什么？

(会，提示：redux使用的context)

二十、简单说一下mobx如何工作？

二十一、mobx和redux有什么区别？

二十二、axios底层使用的是什么请求方式？与html5的fetch有什么区别？和ajax有什么区别？

二十三、http协议各个版本，http和https有什么区别？

二十四、typescript的联合类型和交叉类型有什么区别？

问：什么时候用交叉类型？

问：了解面向对象吗？（在面向对象中理解交叉和联合类型）

二十五、interface与type有神区别？

问：interface能用联合类型吗？

问：type能用泛型吗？

二十六、写过ts的函数重载吗？（js原生方法都有函数重载）

二十七、什么是js的继承？

原型链继承，将父类实例作为子类原型：
- 优点：父类方法可以复用；
- 缺点：
  1. 子类无法向父类传参；
  2. 父类所有属性和方法被子类共享，当子类修改某个属性时，其他子类也会被修改
构造函数继承：
- 优点：
  1. 子类不会共享父类属性，
  2. 子类可以向父类传参；
- 缺点：子类不能访问父类原型上的方法，即父类prototype绑定的方法
组合继承：
寄生组合继承：

问：怎么用父类的方法？

问：super是做什么？

答：调用父类的构造函数

二十八、promise有哪些状态？

问：promise构造函数接收的回调函数是同步还是异步执行？ ---- 同步

问：promise().then()的回调函数是同步还是异步？ ---- 异步

问：简单说一下事件执行机制

问：用promise实现一个这样的delay函数

console.log(1);
delay(3000);    //实现这个delay函数，提示：利用异步任务
console.log(3); //3秒后执行这一句

二十九、小程序做过什么兼容处理

问：ios和android的屏幕问题

答：根据获取机型区分并分别处理（提示，小程序提供获取安全区域的api）

叹气三连，面试总结一波