面试某家公司的初级前端工程师的面试题

CSS 不熟悉，加上之前并不是 React 工程师（上一家公司使用的是 Jquery），答得比较差，根据记忆记录下了以下面试题，希望以后不要再答错。

React 部分

1. react 在更新 state 的时候，为什么会使用 setState() 方法？
   • 因为直接修改 state 并不会导致组件的更新。如果想要使组件在状态修改后立刻发生更新，就需要使用 setState() 方法。
   • 另一个方面，setState() 方法也提供了一些组件内部优化性能的方式。
     • setState() 是异步的，react 内部会在合适的时机对 state 进行修改；
     • react 会将多个 setState() 在内部合并成一个 setState()；
     • setState() 除了接受一个对象或者一个函数外，还支持传入一个回调函数。该回调函数可为空，在组件状态更新完成之后触发。在这里可以获取组件更新后的状态，或者对组件更新完成之后的一些操作；
     • setState() 第一个参数支持传入一个函数，这个函数默认传入两个参数，一个是修改前的状态（preState），一个是父组件传来的属性（props），如果希望在 setState 之前做一些什么，可以使用函数式写法。
2. 受控组件和非受控组件你了解吗？
   • 受控组件指的是组件的状态由 react 控制的组件。比如 input 框中的值，由 state 保存，想要修改组件的值，需要对应的修改 state 中的。
   • 非受控组件指的是组件的状态由 DOM 控制而非 react 控制，在这种情况下，想要获取组件的状态必须使用 refs，或者使用 DOM 去获取。
3. React 的高阶组件，涉及过吗？
   • React 中的高阶组件并不是什么 react 的新特性，只是在 react 编程模式下的一种组件。高阶组件其实就是接受（或者不接受）参数，并返回一个组件的组件。高阶组件有很多用处：
     • 对代码进行复用
     • 代理属性，对 props 进行控制
4. React 中的 diff 算法？
   • diff 算法的作用是计算处 virtual DOM 中真正变化的部分，并只针对该部分进行原生 DOM 操作，而非重新渲染整个页面
   • https://www.jianshu.com/p/3ba0822018cf
5. React 的性能优化
   • 尽量不要将 props 设置为一个组件的 state
   • 利用 shouldComponentUpdated 或者 useMemo 以及 useCallback 来实现对 react 组件更新的控制。多使用 PureComponent
   • 在 render 中尽量减少创建变量，以及在传递参数时，尽量减少传递参数
   • react 中的对象的比较是浅比较，由于每次都会创建新的对象，尽量避免直接在render()函数中使用对象或者数组直接量。
   • 由于diff算法的限制，为了保证不出现使用空间换取时间的情况，在组件发生变化时，尽量避免修改最外层的包裹元素。
   • 由于diff算法的限制，在比如创建多个li的组件中，尽量不要出现将最后一个元素，提前到第一个的情况。
   • 在一个组件中渲染多个子组件时，保证key保持不变。

CSS 部分

1. 有哪些css盒子模型，模型之间的区别

   • 标准盒子模型
     • 标准盒子模型在计算元素的大小时，会计算 padding 和 border
   • ie盒子模型
     • 不计算上边框和内边距
   • 利用 box-sizing 来设定两种盒子模型

2. css 权重：

   等级	例子	权重值
   行内样式	style	1000
   ID	#nav	100
   属性选择器/class/伪类	:hover	10
   元素名/伪元素	::after	1

3. 有哪些垂直居中的方式

   • 在知道父元素宽高和子元素宽高的情况下，设置子元素的 margin 值。
   • 如果是文本，设置文本的 text-align 为 center，设置 line-height 并使用 vertical-align 为 middle
   • 设置父元素 position 为 relative，设置子元素 position 为 absolute，并将子元素的 top 和 left 设置为 50%，利用 transform(-50%, -50%) 向上右调整一般的距离。
   • 设置父元素的display为flex，并设置justify-center为center，align-item为center。

4. 如何实现响应式的布局

   • 媒体查询
   • 栅格系统
   • 百分比局部
   • rem 布局 - 弹性布局
   • 视口单位

5.伪类和伪元素的区别？
在CSS2中，并未作为明显的区分，在CSS3中有了区分。

• 伪类：引入伪类概念是为了允许基于文档树之外的信息进行选择，或者使用其他简单选择器无法表达这些信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，:target。
• 伪元素：伪元素创建文档树的抽象，而不是文档语言指定的抽象。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。

6. 弹性盒子
   菜鸟教程弹性盒子

JS 基础部分

1. 对象的浅拷贝和深拷贝

   • 浅拷贝不会创建当前对象中，属性值为引用对象的副本，而是直接将引用对象的地址赋值给创建的属性。
   • 深拷贝会完全拷贝当前对象中的属性值为引用对象中的属性。
   • 有以下方式：
     • JSON 对象
     • 利用 for in 循环遍历
     • Object.create()

2. call、apply、bind

   • call、apply 接受一个调用对象和参数，区别在于 call 接受单个参数，而 apply 接受一个参数数组
   • bind 只将 this 指针绑定到当前对象上，而不调用

3. 闭包，如何处理闭包的内存泄漏

   • 闭包由 js 的函数作用域实现。具体的原理是，作用域外部无法访问作用域内部的变量
   • 作用：
     • 模拟私有变量
     • 暂存数据
   • 闭包的内存泄露原因在于，在创建变量时，如果该变量处于作用域之外，而被作用域内部所引用，则作用域外部的变量被迫停留在内存中，导致内存的占用不断上升，最终导致内存泄漏。需要在子作用域中，手动释放调用父作用域的值，将其置为 null。

4. 如何为数组去重

   • 利用 Set()
   • 利用对象属性的唯一性