面试总结

1.水平垂直居中

• flex布局
  父元素：display:flex; flex-direction:row; justify-content:center; align-items:center;
• 绝对定位
  left:50%; top:50%; margin-left:-width; margin-top:-height
• 绝对定位
  left:0; top:0; right:0; bottom:0; margin:auto
• table
  父元素:display:table
  子元素:display:table-ceil; vertical-align:middle; text-align:center

2.react中的绑定事件和js中的有什么不同？

• js中事件直接绑定DOM，走的是原生事件机制
• react事件不是直接绑定在DOM上，而是将所有对象绑定在document上，使用统一的事件监听，然后利用冒泡机制，当事件传播到document时，将事件封装给正式的函数处理和运行。react事件是合成对象而不是原生对象

3.react 中key的作用

• 唯一标识组件，diff算法中element比较是根据key判断插入、删除还是移动

4.改变this的指向，以及他们之间的区别

• apply():第一个参数为作用域,第二个参数是(1:array; 2:arguments对象)
• call():第一个参数为作用域,第二个是参数列表(逐个举例)
• bind()：第一个参数为作用域,第二个是参数列表
• 区别：bind会返回执行上下文被改变的函数，而不会立即执行，会被返回，需要手动调用，call和apply会立即执行

5.this的指向

• 作为函数调用，严格模式下指向undefined,非严格模式下指向window
• 作为对象的方法调用，指向调用的对象
• 作为全局函数，指向window
• 作为构造函数中的this，指向新创建的对象
• apply、call、bind可以绑定this

6.如何根据屏幕大小设置根元素的字体（rem）

• html{font-size:16px}则1em=16px
• 例以640px屏幕为基准时，html{font-size:20px},1em = 20px;当屏幕宽度为320px时，则根元素的字体大小应该相应的缩小一半，html{font-size:10px},1em = 10px

7.setState()是异步的吗

• setState在合成事件和钩子函数中是异步的，在原生事件和setTimeout中都是同步的。
• setState的批量更新也是异步的，建立在（合成事件和钩子函数之上）
• setState本身执行过程和代码是同步的，只是合成事件和钩子函数的执行顺序在更新之前，导致没法立马拿到更新后的值，也就形成了异步。可以通过setState(state,callback)第二个参数拿到更新后的结果

8.箭头函数和普通函数的区别

• 箭头函数没有自己的this、arguments
• 普通函数在变量提升中是最高的，箭头函数没有变量提升
• 箭头函数不能作为构造函数，不能被new，没有原型对象

9.webpack如何将css压缩为单独的css文件

安装 extract-text-webpack-plugin
  npm i extract-text-webpack-plugin -D
在webpack.config.js中引入该模块
  const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
在webpack.config.js 中的 plugins 中加入new  ExtractTextWebpackPlugin('css提取出去的路径') 
  plugins: [
      new ExtractTextWebpackPlugin('/css/demo.css') 
  ]

10.性能优化

• 减少http请求，合并js、css、图片
• 压缩资源体积
• http缓存
• css文件放在头部、js放在底部
• 减少对dom的操作
• 使用事件委托，减少事件监听

11.强缓存怎么实现

• Expires
• Cache-Control 设置max-age

12.闭包是什么？闭包的应用

• 闭包：有权访问另一个函数作用域中变量的函数
• 应用:1.读取其他函数内部变量 2.封装私有变量

13.事件委托

• 事件委托:通过监听一个父元素，利用冒泡机制触发事件

14.css实现三角形

• border实现