11、React性能优化的手段有哪些?
- 使用纯组件;
- 使用 React.memo 进行组件记忆(React.memo 是一个高阶组件),对 于相同的输入,不重复执行;
- 如果是类组件,使用 shouldComponentUpdate(这是在重新渲染组件之前触发的其中一个生命周期事件)生命周期事件,可以利用此事件来决定何时需要重新渲染组件;
- 路由懒加载;
- 使用 React Fragments 避免额外标记;
- 不要使用内联函数定义(如果我们使用内联函数,则每次调用“render”函数时都会创建一个新的函数实例);
- 避免在Willxxx系列的生命周期中进行异步请求,操作dom等;
- 如果是类组件,事件函数在Constructor中绑定bind改变this指向;
- 避免使用内联样式属性;
- 优化 React 中的条件渲染;
- 不要在 render 方法中导出数据;
- 列表渲染的时候加key;
- 在函数组件中使用useCallback和useMemo来进行组件优化,依赖没有变化的话,不重复执行;
- 类组件中使用immutable对象;
12、说说你对事件循环event loop的理解?
事件循环,js中的一个处理任务的具体操作机制。
在我们执行异步任务和同步任务时,异步开始执行后会导致后面的同步任务无法执行,事件循环会把我们的任务分为同步和异步任务,当遇到同步任务直接执行,遇到异步任务放到任务队列中执行,从而不影响主线程的执行。
其中在异步任务队列中还分为,宏任务和微任务,会先执行宏任务再执行微任务。
就这样依次重复形成了事件循环。
13、前端跨域的解决方案?
- 通过jsonp跨域
- document.domain + iframe跨域
- location.hash + iframe window.name + iframe跨域
- postMessage跨域
- 跨域资源共享(CORS)
- nginx代理跨域
- nodejs中间件代理跨域
- WebSocket协议跨域
14、数组常用方法及作用,至少15个?
Array.length:返回或设置一个数组中的元素个数
Array.from() :对伪数组或可迭代对象(包括arguments,Array,Map,Set,String…)转换成数组对象
Array.isArray():用于确定传递的值是否是一个 Array
concat():方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
every(callback):方法测试数组的所有元素是否都通过了指定函数的测试
filter():创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
find():返回数组中满足提供的测试函数的第一个元素的值
forEach():方法对数组的每个元素执行一次提供的函数
includes():用来判断一个数组是否包含一个指定的值,如果是,酌情返回 true或 false
indexOf():返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
join():将数组(或一个类数组对象)的所有元素连接到一个字符串中
lastIndexOf():返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果 不存在则返回 -1。从数组的后面向前查找
map():创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
pop():从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度
push():将一个或多个元素添加到数组的末尾
reduce():累加器和数组中的每个元素(从左到右)应用一个函数
shift():从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度
slice():返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象
some():测试数组中的某些元素是否通过由提供的函数实现的测试。
sort():当的位置对数组的元素进行排序,并返回数组。
splice():通过删除现有元素和/或添加新元素来更改一个数组的内容
toString():返回一个字符串,表示指定的数组及其元素
unshift():将一个或多个元素添加到数组的开头,并返回新数组的长度
toLocaleString():返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 “,”)隔开
15、React render方法的原理,在什么时候会触发?
原理:
在类组件中render函数指的就是render方法;而在函数组件中,指的就是整个函数组件
render函数中的jsx语句会被编译成我们熟悉的js代码,在render过程中,react将新调用的render函数返回的树与旧版本的树进行比较,这一步是决定如何更新 DOM 的必要步骤,然后进行 diff 比较,更新dom树
触发时机:
类组件调用 setState 修改状态
函数组件通过useState hook修改状态
一旦执行了setState就会执行render方法,useState 会判断当前值有无发生改变确定是否执行render方法,一旦父组件发生渲染,子组件也会渲染
16、说说你对vue中mixin的理解?
mixin是一种类,在vue中就是js文件,主要的作用是作为功能模块引用。因为在项目中,可能不同组件会有相同的功能,比如控制元素的显示和隐藏,如果他们的变量和规则也完全相同的话,就可以把这个功能单独提取出来,放在mixin.js中,再引入,就可以实现一样的功能了。引入的方法也分为全局混入和局部混入,局部混入就是在每个组件中引入,全局混入就是在main.js中通过Vue.mixin()引入。
17、for…in循环和for…of循环的区别?
for...in 循环:只能获得对象的键名,不能获得键值
for…in循环有几个缺点
①数组的键名是数字,但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
②for…in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
③某些情况下,for…in循环会以任意顺序遍历键名。
for…in循环主要是为遍历对象而设计的,不适用于遍历数组。
for...of 循环:允许遍历获得键值
for…of循环
①有着同for…in一样的简洁语法,但是没有for…in那些缺点。
②不同于forEach方法,它可以与break、continue和return配合使用。
③提供了遍历所有数据结构的统一操作接口
18、Js数据类型判断都有哪几种方式?至少说出5种?它们的区别是什么?
1. typeof判断
typeof返回的类型都是字符串形式
2. Constructor
实例constructor属性指向构造函数本身
constructor 判断方法跟instanceof相似,但是constructor检测Object与instanceof不一样,constructor还可以处理基本数据类型的检测,不仅仅是对象类型
3. Instanceof
instanceof可以判类型是否是实例的构造函数
instanceof 后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。
4. Object.prototype.toString.call()
判断类型的原型对象是否在某个对象的原型链上
5. 通过object原型上的方法判断
比如array.isArray()来判断是不是一个数组
6. ===(严格运算符)
通常出现在我们的条件判断中,用来判断数据类型的话就会非常的有局限性,比如判断一个变量是否为空,变量是否为数据等
19、说说你对Object.defineProperty()的理解?
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
该方法接受三个参数
第一个参数是 obj:要定义属性的对象,
第二个参数是 prop:要定义或修改的属性的名称或 Symbol,
第三个参数是 descriptor:要定义或修改的属性描述符
函数的第三个参数 descriptor 所表示的属性描述符有两种形式:数据描述符和存取描述符。
数据描述符是一个具有值的属性,该值可以是可写的,也可以是不可写的。
存取描述符是由 getter 函数和 setter 函数所描述的属性。
一个描述符只能是这两者其中之一;不能同时是两者。
这两种同时拥有下列两种键值:
configurable: 是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。
enumerable: 当且仅当该属性的 enumerable 键值为 true 时,该属性才会出现在对象的枚举属性中。默认为 false。
20、说说你对webSocket的理解?
理解
WebSocket是HTML5下一种新的协议(websocket协议本质上是一个基于tcp的协议)
它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯的目的
Websocket是一个持久化的协议
原理
websocket约定了一个通信的规范,通过一个握手的机制,客户端和服务器之间能建立一个类似tcp的连接,从而方便它们之间的通信
在websocket出现之前,web交互一般是基于http协议的短连接或者长连接
websocket是一种全新的协议,不属于http无状态协议,协议名为"ws"