—新的一年结束了，开始了求职之路。以下是多家面试机构的提问集合。

1.css 相关的问题。

@1：盒子模型的理解

盒子是由自身的长宽高，加上padding和border加上margin。怪异盒模型加大padding和margin都不会改变自身的大小。正常盒模型加大padding和margin会改变自身的大小。

@2：浏览器的兼容问题

例如flex的兼容。
.box{display: -webkit-flex;  /* 新版本语法: Chrome 21+ */display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */display: -moz-box;      /* 老版本语法: Firefox (buggy) */display: -ms-flexbox;   /* 混合版本语法: IE 10 */   }.flex1 {            -webkit-flex: 1;        /* Chrome */  -ms-flex: 1             /* IE 10 */  flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */-webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  -moz-box-flex: 1;       /* OLD - Firefox 19- */
}

@3：未知宽高的盒子垂直水平居中的几种方案。

1.方法1使用弹性盒
.box{display:flex;justify-content:center;align-items:center;
}
2.方法2使用定位
.box{position:relative;}
.son{position:absolute;lef:50%;top:50%;transform: translate(-50%，-50%);
}

@4：1px的解决方法

1，使用伪类处理1px像素问题。
.box{position: relative;border: none;
}.box:after{  //  单边框content: '';position: absolute;bottom: 0;background: #DCDCDC;width: 100%;height: 1px;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0;
}.box:after{  //   四条边框content: '';position: absolute;top: 0;left: 0;border: 1px solid #000;-webkit-box-sizing: border-box;box-sizing: border-box;width: 200%;height: 200%;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: left top;transform-origin: left top;
}

@5: 上下margin值叠加解决方案

1.给子元素一个float属性，就不会造成叠加。

2.给外层元素一个，overflow：hidden

3.子元素不用margin，给外层元素设置padding，来展示一样的效果。

4.分别在两个子元素之间加一个有高度的空标签。

@6：H5C3新特性总结

@7：移动端浏览器兼容

@8：浅谈video标签在移动端的运用

@9：rem的理解和计算公式

@10：css 过度和动画

@11：css样式污染怎么解决

@12：BFC的理解

@13：图片和文字的底部对齐

@14：css实现9宫格

@15：flex布局，flex为1怎么理解，gap使用过吗？

@16：竖屏实现一个正方形，和视窗口等宽。

@17：css实现三角形

2.js相关的问题。

@1：闭包的理解

作用：闭包是为了解决变量私有化。可以读取其他函数内的变量。缺点：长期驻留内存，内存消耗大。不能释放。

@2：构造函数和实例和原型对象的理解

实例有一个内部指针，指向原型对象。原型对象通过constructor属性指向相关的构造函数。构造函数通过prototype属性指向原型对象。

@3：es6的认知

》1.箭头函数》2.变量的声明let const 》3.解构赋值》4.模板字符串》5.promise 》6.扩展运算符》 7.set和map。

_拓展：1.解构赋值在什么情况下才会使用到默认值？

关注点在于解构出来的是null还是undefined？，为null的时候，解构还是null，为undefined的时候，就会用到默认值。

（原理的是，解构赋值会严格的按照===undefined的判断，然后就是null和undefined自身的区别了。）

@4: foreach和map的区别

foreach的返回值为undefined,map返回值为新数组。原数组不发生改变。

@5：聊聊call和apply和bind的区别和使用场景

区别:call跟apply的用法几乎一样，唯一的不同就是传递的参数不同，call只能一个参数一个参数的传入。
apply则只支持传入一个数组，哪怕是一个参数也要是数组形式。最终调用函数时候这个数组会拆成一个个参数分别传入。
至于bind方法，他是直接改变这个函数的this指向并且返回一个新的函数，之后再次调用这个函数的时候this都是指向bind绑定的第一个参数。bind传餐方式跟call方法一致。

使用场景：

当我们使用一个函数需要改变this指向的时候才会用到call`apply`bind
如果你要传递的参数不多，则可以使用fn.call(thisObj, arg1, arg2 ...)
如果你要传递的参数很多，则可以用数组将参数整理好调用fn.apply(thisObj, [arg1, arg2 ...])
如果你想生成一个新的函数长期绑定某个函数给某个对象使用，则可以使用const newFn = fn.bind(thisObj); newFn(arg1, arg2...)

@6：ES6新的数组去重方法

es6里新添加了两个很好用的东西，set和Array.from。

set是一种新的数据结构，它可以接收一个数组或者是类数组对象，自动去重其中的重复项目。

set返回的是一个对象，可以通过Array.from来转化为数组。

@7: 深拷贝浅拷贝的认知和实现的方法，递归深拷贝和Json.parse()深拷贝的区别？

认知：

深拷贝是复制引用类型对象，当前对象不会随着改变而发生变化。

浅拷贝是拷贝引用类型的地址。当前对象会随着改变而发生变化。

方法：

浅拷贝：Object-assign()

深拷贝：先使用json.stringify()在使用json.parse

@8: 函数阻塞问题

@9：防抖函数

@10：ansy awite 和promise的区别

@11：怎么处理多个同时触发的异步请求

@12：JS的节流、函数防抖原理及使用场景

@13：遍历对象的多种方法列举

@14：怎么在跨域发cookie

@15：es6 set和map的理解？

@16：几种创建对象的方法？

@17：ajax 的过程和为啥要选择axios？

@18：对象的隐式装换？

3.react相关的问题。

@1：生命周期

1.使用伪表达式来阐述。constructor(){1.定义一些初始的变量。2.定义初始绑定的函数。}componentWillMount(){1.加载页面开始渲染要看到的效果。}componentDidMount(){1. 在这里可以编写异步请求。2. 可以拿到dom节点。}shouldComponentUpdate(){1.控制因为某些不重要的state改变，而不去渲染页面。return false;可以提高性能。}render() {1.功能必不可少，吐出dom节点。}componentWillUnmount(){1.可以在这里销毁某些函数，和插件。}componentWillReceiveProps(){//props发生改变，子组件会在此周期行数接收到变化。1.考察问题：父组件的props的改变，子组件一定会在此函数接收到吗？@1：如果父组件的props是基本类型的，子组件一定会在次周期函数接收到变化的值。@2:如果父组件的Props是引用类型的。并且只有一层例如{key:value}，比如是一个对象的key:value任何变化也会接收到。但是如果改变的是多层数据的key:value值就不会接收变化的。例如[[{key:vale}]]}

@2：react的单向数据流和双向数据绑定

单向数据流中的‘单向’-- 数据从父组件到子组件这个流向叫单向。


一个基础的不能再基础的数据双向绑定 因为react不同于vue 没有v-model指令 所以怎么实现呢？import React from "react"
import ReactDOM from "react-dom"export default class DataBind extends Comonent{constructor(){super()this.state = {value: "wzy"}}handleChange(e){this.setState({value : e.target.value)}render(){return(<div><input value={this.state.value} onChange={this.handleChange.bind(this)}><input/><p>{this.state.value}<p/><div/>)}}

@3：redux的流程图

@4：setState()是同步还是异步，什么是同步？什么时候是异步？

保证内部数据统一，setState异布更新状态使得并发更新组件成为可能。

@5：vue和react的区别

@6：diff算法的认知

@7：react16.8版本的了解（hook/生命周期）

@8: connect高阶组件工作的原理和认知

@9：react的性能优化

shouldComponentUpdate生命周期的手动控制/包裹节点使用react.Fragments/遍历渲染节点加入唯一的k值/在constructor里面定义初始的函数/使用高阶组件来封装某个功能块/如果是纯粹的展示组件可以，采用函数式组件。

@10：react router懒加载实现

@11: react包和react-dom包分别是干啥的。

1.react软件包仅包含定义React组件所需的功能。它通常与React渲染器一起使用，例如react-dom用于Web或react-native本机环境

2.react-dom包充当React的DOM和服务器渲染器的入口点。它打算与reactnpm 附带的通用React软件包配对。

@12: react虚拟dom是什么。

<div id="abc"><span>hello world !</span></div>(真实dom节点)

['DIV',{ id : 'abc'},['span',{},'bye bye']]（虚拟dom来描述真实dom）

虚拟DOM本质上就是一个JS对象，用它来描述真实DOM，之所以能够提高性能，本质上是因为js去比较js对象不太消耗性能，而去比较真实的DOM会很消耗性能。

@13：用hooks写出类似componentDidMount生命周期

@14：react 生命周期的三个过程对应的生命周期是啥？

@15：redux的理解和redux中间件的具体怎么使用的？

@16：react里面的key是怎么工作的

@17：受控组件和非受控组件，那些是受控组件？高阶组件

1.受控组件：

概念：处理表单数据的时候，表单数据是由React组件来控制的。

特点：》设有value值，由state控制》value 一般在onChange中由setState进行修改。

2.非受控组件：处理表单数据的时候，表单数据交由DOM节点来处理。

特点：》不设置value值》通过ref来获取DOM节点再取值。

3.使用场景：

受控组件的状态全程响应外部数据的变化，而非受控组件只是在初始化的时候接受外部数据，然后就自己在内部维护状态了。

非受控组件更方便快捷，代码量小，但是控制能力比较弱。受控组件的控制能力强，但是代码量会比较多。

@18：兄弟组件之间的传值（考察context用法）

@19：类组件和函数式组件的对比认知？

@20：hooks为啥不能再循环体内，原理是啥？useEffect可以嵌套吗？

@21：antd FormItem获取节点数据是怎么实现的？

@22：为啥dva的dispath()可以点then,redux就不行？

@23：react路由匹配的原理？

@24：filber 理解？

@25：setSate()数据是怎么更新的？

@26：react-router的原理？

@27：Link组件和a标签的区别是？

@28：redux怎么解决同步和异步操作的？

@29：如何在函数组件中不用useSate也可以更新新元素？

@30：useRef怎么解决闭包的问题？

4. webpack

@1：说几个webpack的loader使用配置

@2：webapck怎么配置项目错误定位的？

@3：webpack插件解析：HtmlWebpackPlugin是干什么的以及如何使用它？

@4：有没有自己写过webpack插件？

@5：怎么分包？

5. Http 网络请求

@1：302和304状态码？

@2：http和https是对称还是非对称？

@3：说下常见的请求头的有哪些内容？

@4: 怎么解决http队头阻塞。

1. 并发TCP连接（浏览器一个域名采用6-8个TCP连接，并发HTTP请求）
2. 域名分片（多个域名，可以建立更多的TCP连接，从而提高HTTP请求的并发）

2. HTTP2方式

http2使用一个域名单一TCP连接发送请求，请求包被二进制分帧，不同请求可以互相穿插，避免了http层面的请求队头阻塞。
但是不能避免TCP层面的队头阻塞。

6. nodejs

@1：nodejs的module.export 和React中使用的export 的区别？

@2：nodejs 事件循环机制？

7. 前端的拓展

@1: 浏览器缓存机制

@2：前端判断用户登录状态方法。

方法一：

登录成功后，后端返回一个 cookie，根据这个 cookie 的有无来判断；退出登录时，后端会删除这个 cookie；

方法二：

登录成功后，前端设置 cookie，比如'isLogin = true'，根据isLogin的值去判断；退出登录时删除 cookieisLogin 或设置 'isLogin = false'。

方法三：

前台发送登录请求
后台返回 token，前台得到后台返回的 token，将其写入到 localStorage 中，后续请求中都携带 token
后台判断 token 是否过期，如果过期就对前台的请求响应过期标识或者状态码
前台得到过期标识后，清除 localStorage 中的 token，然后重定向到 login 路由

@3：mvvm的设计模式的理解（react/vue/angular）。

1.首先要了解到mvc设计模式。

mvc即model-view-controller（模型-视图-控制器）

model：应用程序中处理数据逻辑的一部分，通常用来模型对象对数据库的存存取等操作

view：视图部分，通常指jsp、html等用来对用户展示的一部分

controller：控制层通常用来处理业务逻辑，负责从试图读取数据，并向模型发送数据

2.mvvm的出现是基于mvc设计的改造不是创新，弱化了controller层。

mvvm即Model-View-ViewModel

ViewMode看作是Model和View的连接桥，View可以通过事件绑定Model，Model可以通过数据绑定View，通过ViewMode可以实现数据和视图的完全分离

@4：px-2rem 插件具体做了什么？

@5：vue的data为什么是函数？

@6：git merge和git rebase的区别？

@7：依赖包版本号的三种安装的区别 16.10.2 ^16.10.2 ~16.10.2 ？

@8：cookie的运行机制？

@9：cookie怎么在不同域里面共享？

@10：项目部署的方式？

@11：项目中主体色的切换？

@12:设定3秒后，请求超时了的实现，在异步请求的外层在封装一层？

@13：服务端渲染和客户端渲染的区别？

@14：怎么让图片打开就自行下载？

8.个人遇到的坑和解决方案。

@1:使用antd的时候，展开table设置任意展开点出现了问题

解决方法是expandedRowKeys和rowKey的属性可以随意设置展开点。

9.个人学习的途径和遇到问题的处理方式。

1.平时会查阅掘金和csdn博客来看一些前端最新的动态。

2.遇到新的知识点可以在github上下载一些demo。运行成功后写一些类似的功能。

3.平时遇到的一些错误会到StackOverflow查阅。

4.工作中发现的特殊问题会记载到csdn博客中。

10.结尾

坚持看到这里的同学，估计还是忐忑不安，担心自己会达不到面试的要求。(ps:不担心也不会里看到这，哈哈

2019年前端求职面试题-主攻react相关推荐

ajax小猿圈面试题,小猿圈之2019年前端JavaScript面试题（二）
小猿圈前端讲师今天继续给你总结js面试题,前面一篇文章咱们已经有一片js基础部分面试题,今天小猿圈web讲师为你讲解js前端应用设计问题,一定要好好看哦,为了能赢在其他人前面. JavaScript前 ...
2019校招前端笔试面试题
程序员学习书籍推荐:(点击查看) 大厂面试题 (点击查看) 前期概要: 01你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 答案 IE: trident内核 Firefox:gecko内核 ...
前端鼠标一次移动半个像素_小猿圈分享2019年前端JavaScript面试题（三）
上篇文章小猿圈前端讲师为你分享了前端面试中js遇到的一些基础问题,接下来给大家讲解的就是前端基础和理论问题都有哪些,想学习web前端就来小猿圈自学吧,里面有全面的技术指导,还有专业的老师为你解答问题. ...
Web前端求职时都会被问到的Redis面试题分享
Web前端人员怎么求职?Redis面试题有哪些?Redis(全称:Remote Dictionary Server 远程字典服务)是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的 ...
2020前端最新面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）（3年前端菜鸟级开发师含泪总结）
2020前端最新面试题总结(js.html.小程序.React.ES6.Vue.算法.全栈热门视频资源) 文档描述 (今年确实挺难 3年前端菜鸟级开发师含泪总结希望能帮助大家) 本文是关注微信小程序 ...
校招前端二面常考react面试题（边面边更）
高阶组件高阶函数:如果一个函数接受一个或多个函数作为参数或者返回一个函数就可称之为高阶函数. 高阶组件:如果一个函数接受一个或多个组件作为参数并且返回一个组件就可称之为高阶组件. react ...
2019新版前端与移动开发学习路线图（视频+工具+书籍+资源）
一.2019新版前端与移动开发学习路线图---每阶段可掌握的能力及各阶段覆盖的关键字点击可看高清大图二.2019新版前端与移动开发学习路线图---学习大纲及各阶段知识点点击可看高清大图三.20 ...
前端开发面试题总结之——JAVASCRIPT（一）
___________________________________________________________________________________ 相关知识点数据类型.运算.对象 ...
常见的前端vue面试题
常见的前端vue面试题 1.请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发, ...

2019年前端求职面试题-主攻react