面试参考
[X] 基础题就选固定概念，项目中会涉及的
[X] 1. css基础题，规范
[ ] 水平垂直居中方式
[X] 2. js基础题
[ ] 语义化理解
[X] 3. react基础题
[ ] react 生命周期
[ ] es6 语法：let const bind 箭头函数 promise等
[ ] react中获取真实dom方法
[X] 上面三个不通过直接pass掉
[ ] 项目业务题：1-2个，
[ ] 一般是工程搭建 +
[ ] 组件协作 +
[ ] 质量交付
[ ] 问题参考：
[X] 微任务 和 宏任务理解清晰
[X] 请求拦截和响应拦截清晰
[X] 不可变数据类型不了解：就是原始数据类型null string underfined number 布尔
[X] 数据驱动页面渲染的理解：数据驱动不是操作节点的，而是通过虚拟的抽象数据层来直接更新页面，也就是react
[X] 盒子模型理解，怪异盒模型：
[X] 高阶组件理解， connect的实现
[X] 状态管理redux， redux的数据流程，react-redux作用；
[X] 数据管理使用axios， 请求拦截和响应拦截；
请求拦截器 请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
响应拦截器 响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。 axios.interceptors.request.use( (config)=> { // 处理请求之前的配置 return config }, (error)=> { // 请求失败的处理 return Promise.reject(error) })
[X] 数据请求放在didmount， 与放在willmount的区别；
setstate不会发生重新渲染：componentWillMount方法的调用在constructor之后，在render之前，在这方法里的代码调用setState方法不会触发重渲染，所以它一般不会用来作加载数据之用，它也很少被使用到。
会保证数据加载和执行setstate会触发重新渲染：componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。
[X] js深浅拷贝；JSON.parse的缺点；
- 取不到值为 undefined 的 key
- NaN 和 无穷大，无穷小转变为 null
- 取不到原型的内容
- date 对象转变为 date 字符串
-
循环引用会报错
- 正则会变成对象object
- 无法实现对函数 、RegExp等特殊对象的克隆
会抛弃对象的constructor,所有的构造函数会指向Object
对象有循环引用,会报错
含有symbol属性名的对象拷贝会漏掉symbol属性
[X] 回流和重绘，如何优化或者减少回流影响；
一. CSS中避免回流
- 尽可能在DOM树的最末端改变class
- 避免设置多层内联样式
- 动画效果应用到position属性为absolute或fixed的元素上
- 牺牲平滑度换取速度
- 避免使用table布局
- 避免使用CSS的JavaScript表达式
二. JS操作避免回流
- 避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
- 避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。
- 也可以在一个display:none的元素上进行操作，最终把它显示出来。因为display:none上的DOM操作不会引发回流和重绘。
- 避免循环读取offsetLeft等属性。在循环之前把它们存起来。
- 绝对定位具有复杂动画的元素。绝对定位使它脱离文档刘，否则会引起父元素及后续元素大量的回流。
[X] 防抖和节流；
[X] webpack 自己简单搭建项目；
[X] 修改配置经验
[ ] 什么是BFC，作用
[ ] call apply bind 的区别
[ ] 这两个是判断是否资深的条件：
[ ] 技术发展题： 如果有专项很强就问，如果能说完整或者有特点 +分
[ ] 团队协作题：对团队管理上面经验
1.说出一些块级元素 行内元素
2.语义化理解
有利于搜索引擎的建立索引、抓取；另外，亦有利于页面在不同的设备上显示尽可能相同；此外，亦有利于构建清晰的结构，有利于团队的开发、维护。
3.水平垂直居中方式
4.什么是BFC，作用
块级格式化上下文 它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用 当涉及到可视化布局的时候
怎样才能形成BFC
- float的值不能为none
- overflow的值不能为visible
- display的值为table-cell, table-caption, inline-block中的任何一个
- position的值不为relative和static
作用
不和浮动元素重叠 清除元素内部浮动 防止垂直 margin 重叠
5.flex布局
6.基本数据类型
7.深拷贝，浅拷贝
8.call apply bind 的区别
9.什么是闭包
10.es6 语法：let const bind 箭头函数 promise等
11.react 生命周期
12.react中获取真实dom方法
13.redux及react-redux作用
JS基础：
- 对象的深/浅拷贝及常用的一些实现方式
- 跨域解决方案 注：jsonp需要后端支持且只支持get，webpack配置proxy只能解决本地跨域
- event loop之宏/微任务
- 箭头函数中的arguments和this？
- 本地存储的几种方式及区别
- 浏览器渲染过程
CSS基础:
- CSS盒模型以及怎么实现IE盒模型
- 各个选择器的权重
- 哪些常用的属性可以被继承
框架
- 受控/非受控组件
- 有状态/无状态组件职责划分
- 高阶组件及常见应用场景
- react项目常用优化点
- 异步请求之WillMount/DidMount（Fiber机制导致WillMount重复执行）
- Redux什么是单向数据流
- JSX语法通过React哪个API转换成JS对象的？createElement
- 被connect包裹后的组件怎么获取ref组件实例
实践
- POST方式实现下载文件
- 本地分页 const start = (pageNo - 1) * pageSize; dataSource.slice(start, start + pageSize)
行业前端面试题库分享: yuque.antfin-inc.com/industrypro…
电话面试 （钱军）
- 请讲一下class与hooks的区别（然后着重问hooks方面：自由发挥，大致了解基本情况，可以要求讲下细节，了解使用深度）。（如果只了解class，则换相应难度的题目）。 a. 【pass】说一下use开头的hooks内置函数。能回答出useState、useEffect、useRef、useMemo、useCallback等。能答出3项即可。 b. 【good】说一下useEffect的用法，或者说一下useEffect第二个参数的用法。能回答出useEffect如何在卸载时执行：第一个参数传入的函数里所返回的函数；能回答出第二个参数的含义：不传则每次渲染都会触发、传空数组则挂在和卸载时运行、传变量数组则变量改变时运行。50%答对即可。 c. 【nice】说一下useMemo和useCallback的区别。useMemo缓存的是函数返回的值，useCallback缓存的是函数本身（函数里的外部变量不重新获取）。答对大概意思即可。
- 讲一下异步处理方式（引导到Promise主线上）。 a. 【pass】能回答出setTimeout、Promise、async/await、generator等方法。能答出50%即可。 b. 【good】同时发出api请求，都返回成功再进行下一步的方法：回答出 Promise.all即可。 c. 【nice】访问接口三秒内返回成功则算成果，否则算失败，要求用两个Promise来构建：1.用setTimeout构建一个3秒后reject的Promise，2.两个Promise用Promise.race方法。基本回答出思路即可。
- css有单位： a. 【pass】CSS（样式表）的长度单位有哪些？能回答出px、em、rem、vw/vh等，如果知道vmin/vmax更好则可以忽略。 b. 【good】说一下em和rem区别？能讲出em相对于父元素，rem相对于根元素。 c. 【nice】竖屏手机下如何用css实现一个和手机屏幕等宽的正方形？给几分钟思考时间，能讲出height: 100vw。
- 防抖和节流。 a. 【pass】讲一下防抖和节流的基本概念或目的。 b. 【good】防抖和节流的区别是什么？能表达“一个掐头，一个去尾”的意思即可，不要求分清楚哪个是防抖，哪个是节流。 c. 【nice】那么，防止按钮点击过快是用防抖还是节流？实现输入框输入停顿时显示提示框是用防抖还是节流？为什么？能清楚答出节流、防抖，或者能解释清楚原因都可以。
- 跨域问题及解决方法：。 a. 【pass】能回答出CORS、CSRF、JSONP等。 b. 【good】了解JSONP的限制：只能用GET方法；或者知道CORS原理：请求的Origin要在响应的Access-Controll-Allow-Origin里。 c. 【nice】理解CORS的原理：简单请求和非简单请求的条件（和Method方法和Content-Type类型有关）；或者非简单请求的过程：首先或发一条预检（Options方法），返回Access-Control-Allow-Methods和Access-Control-Allow-Headers，然后客户端判断。能答出50%即可。
- http协议状态码：。 a. 【pass】http协议状态码有哪些？理解200表示成功，404表示找不到该页，500表示服务器错误。 b. 【good】301和302的区别是什么？知道30x表示跳转/重定向，理解301和302的区别：永久重定向和临时重定向。 c. 【nice】如何实现缓存？302和303的区别是什么？303和307的区别是什么？知道304本地缓存，通过Header里设定的过期时间判断；理解302和303的区别：303明确客户端以GET重定向；理解303和307的区别：307支持POST请求。能任意答出一道即可。
- git碰到冲突的解决方法：考察代码版本管理的使用程度，看是否能讲到在本地解决冲突再提交的方法，比如merge、rebase。 a. 【pass】用过命令行或图形化界面的Git，会解决冲突。 b. 【good】命令行用过merge，知道--no-ff参数的含义：或者知道快进合并和非快进合并的区别。能回答出一个即可。 c. 【nice】会使用rebase（衍合或变基）及其限制（避免对已合并到master分支做此操作）；或者会使用cherry-pick进行剪切；或者会使用revert进行恢复。能答出一项即可。
