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实现三角形
