前端面试总结-感易智能（二）自上次滴滴面试结束后，感受到了自己的众多不足，所以我觉得我目前还需要加强学习，一点一点进步，

前言

自上次滴滴面试结束后，感受到了自己的众多不足，所以我觉得我目前还需要加强学习，一点一点进步，一步一步前进。😁从普通公司开始慢慢积累面试经验，“每天进步一小步,未来前进一大步”,坚持每天学习。

感易智能

该offer拿下了，不过拒掉了。面试只有一面，面试难度还不错。

废话不多说，直接上题目

1. Vue和react的区别

啊这，一上来就问这个，我对vue不熟悉，也没有去了解两者的区别，所以我着重讲了一下React的特点和缺点。

react是MVC,Vue是MVVM
react整体上是函数式的思想，把组件设计为纯函数，状态和逻辑通过参数传入，所以react是单一数据流
react主要是all in js，通过js来操作dom和css之类的,vue是将html、 css、 js放在一起，各自处理各自的东西
react做的事情比较少，很多东西都是交给社区去做，react-dom、react-router、react-redux等等，vue则是其内置了很多api,使用起来很方便简单。

前端框架用vue还是react？清晰对比两者差异

2. Viturl DOM你了解多少

虚拟DOM 就是一个用来描述真实 DOM 的 JavaScript 对象，是对 DOM 的抽象，比 DOM 更加轻量级。

为什么要使用 Virtual DOM

当然是前端优化方面，避免频繁操作 DOM，频繁操作 DOM 会可能让浏览器重排和重绘，性能也会非常的低，还有就是手动操作 DOM还是比较麻烦的，要考虑浏览器兼容性问题，当前 jQuery 等库简化了 DOM 操作，但是项目复杂了，DOM 操作还是会变得复杂，数据操作也会变得复杂
并不是所有情况使用虚拟DOM 都会提高性能

让虚拟DOM和DOM-diff不再成为你的绊脚石

3.React生命周期你了解吗

当时我就是纯粹的在背书念经，各种钩子函数讲了一遍。

React的生命周期

4. setState是异步的还是同步的

setState并不是单纯异步或者是同步的，它的表现会因为调用场景的不同而不同：

在react钩子函数中也就是我们说的生命周期函数里是setState异步的，还有合成事件也就是我们定义的函数，setState也是异步的。
而在setTimeout、setInterval等函数中，包括在DOM原生事件中，setState都是同步的。

导致这种差异的原因，是因为react的事务机制和更新机制的工作方式决定的。

事务机制，在源码中这个变量为isBatchingUpdates，在执行react钩子函数和合成事件之前，这个变量都会被react修改成true,当这个变量为true时，setState就不会生效，当钩子函数或者合成事件执行完毕之后，这个变量会被设置为false,此时setState才会生效，isBatchingUpdates就好像一把锁，在isBatchingUpdates的约束下setState只能是异步的。
但是当遇到setTimeout时，事情就会有点不同，isBatchingUpdates的约束对setTimeout内部的执行逻辑完全没有约束能力,这是因为setTimeout就是异步的，当异步函数开始执行的时候，同步任务早就结束了，isBatchingUpdates早就被设置为了false。批量更新，每来一个setState，就会把他塞进一个队列里面，最后再合并相同任务，最后只针对需要更新的state进行操作。

5. 怎么获取setState改变后的值

如果是class的写法，我们就没有这个疑问，因为在执行方法中我们都是直接从this.state里的值，始终是最新的;如果修改后需要立即用最新的值做其他的操作，也可以利用setState的回调函数。

如果是hooks的写法，就有问题，如果是需要对修改后的值立即执行其他操作，可以使用setState((a)=> return a + 1)的写法，参数为一个函数，返回值为state更新后的值。如果需要在其他地方使用，可以借用useEffect钩子函数。

useEffect(
    ()=>{
     // ...这里可以获取到更新后的count值   
    }
,[count])

6. useEffect对应那些生命周期

useEffet 我们可以理解成它替换了componentDidMount, componentDidUpdate, componentWillUnmount 这三个生命周期，但是它的功能还更强大。useEffect可以多个存在。

componentDidMount: 首次渲染,即在组件挂载后（插入 DOM 树中）立即调用
componentDidUpdate:重新渲染，即在更新后会被立即调用。
componentWillUnmount:在组件卸载及销毁之前直接调用

包含3个生命周期的代码结构

useEffect(
  () => {
    // 这里的代码块 等价于 componentDidMount
    // do something...

    // return的写法 等价于 componentWillUnmount 
    return () => {
       // do something...
    };
  },
  // 依赖列表，当依赖的值有变更时候，执行副作用函数，等价于 componentDidUpdate
  [ xxx，obj.xxx ]
);

注意：依赖列表是灵活的，有三种写法

当数组为空 [ ]，表示不会应为页面的状态改变而执行回调方法【即仅在初始化时执行，componentDidMount】，
当这个参数不传递，表示页面的任何状态一旦变更都会执行回调方法
当数组非空，数组里的值一旦有变化，就会执行回调方法

7. 如何实现元素水平垂直居中

常见的有flex布局、grid布局、position、transform.

这也是一道常考题，可以看面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高）

8. display有哪些属性值

常见的有flex、grid、none、block、inline、table、inline-block。

CSS display 属性详解

9. 块级元素有哪些，行内元素有哪些。

内联元素： span/strong/em/del/ins/label/a/sup/sub

块级元素： div/hx/p/address/ul/ol/li/dl/dt/dd/table/form/fieldset/legend

内联块元素： input/img/select/textarea/iframe

10. 你知道有哪些选择器，以及他们的权重分别是什么

通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、标签选择器和伪元素选择器、类选择器和伪类和属性选择器、id选择器，权重分别对应:0,1,10,100

你了解多少es6新特性

promise、async和await、let和const、对象新增的一些方法、数组新增的一些方法、运算符扩展、箭头函数等等。

阮一峰老师的ES6

后言

这些问题都是很基础的，很考验八股能力。如果对你有帮助，可以点一个小赞，后面还有其他公司的面试总结，陆续会发布。

前端面试总结-感易智能（二）

前言