react 笔试题

1说说react 生命周期中有哪些坑?如何避免?

数据处理混乱，

2.说说real diff算法是怎么运作的?

普通diff算法是通过递归遍历虚拟dom节点，通过标签名和key值判断是否需要进行更新

react的diff 主要分为3层：tree层、component层、element层

首先dom节点对比，组件对比，元素对比

插入全新，删除多余，移动换位

3.调和阶段setState干了什么?

4说说redux的实现原理是什么，写出核心代码?

Redux是Flux单向数据流框架的一种具体实现，它提供了一套管理全局状态数据的机制。在Flux框架中，Store是一个全局状态数据的管理者，View（视图）中会根据页面的交互的同时绑定发出Action（通知）。Dispatcher（分派器）用于接收Action并修改全局Store，进而更新View。

redux的reducer是纯函数，只会返回处理后的数据而不直接修改state ，通过subscribe（）来监听store变化

说说redux的实现原理是什么，写出其原理的核心代码？_白日梦想家.、的博客-CSDN博客

5React合成事件的原理?

6React组件之间如何通信?

props usecontext

7.为什么反应元素有一个$$类型属性?

8.说说 Connect 组件的原理是什么?

9.说说你对 fiber 架构的理解? 解决了什么问题

将diff算法递归dom更新变成一个一个小任务  Fiber 节点

在浏览器闲置时间执行

Fiber 是一种数据结构，链表存储任务，有属性指向父级子级下一个兄弟节点

解决递归比对的过程长期占用主线程产生了性能问题。

React Fiber 架构详解_react-fiber___畫戟__的博客-CSDN博客
10.说说你对 redux 中间件的理解? 常用的中间件有哪些? 实现原理

11.React 性能优化的手段有哪些?

12说说你对事件循环 event loop 的理解

同步任务 

异步任务放在任务队列中，先处理微任务，再执行一个宏任务，再清理微任务队列

常见宏任务：

• setTimeout()
• setInterval()
• setImmediate()
• script标签

常见微任务：

• promise.then()、promise.catch()
• new MutaionObserver()
• process.nextTick()
• async await 、

面试必问之 JS 事件循环(Event Loop)，看这一篇足够 - 知乎

JavaScript 单线程执行,浏览器是多线程处理任务，“JS 是单线程的”指的是执行 JS 代码的线程只有一个，是浏览器提供的 JS 引擎线程（主线程）。浏览器中还有定时器线程和 HTTP 请求线程。

执行栈和任务队列：

JS 在解析一段代码时，会将同步代码按顺序排在某个地方，即执行栈，然后依次执行里面的函数。当遇到异步任务时就交给其他线程处理，待当前执行栈所有同步代码执行完成后，会从一个队列中去取出已完成的异步任务的回调加入执行栈继续执行，遇到异步任务时又交给其他线程，.....，如此循环往复。而其他异步任务完成后，将回调放入任务队列中待执行栈来取出执行。

事件循环的过程中，执行栈在同步代码执行完成后，优先检查微任务队列是否有任务需要执行，如果没有，再去宏任务队列检查是否有任务执行，如此往复。微任务一般在当前循环就会优先执行，而宏任务会等到下一次循环，因此，微任务一般比宏任务先执行，并且微任务队列只有一个，宏任务队列可能有多个。另外我们常见的点击和键盘等事件也属于宏任务。

• 宏任务特征：有明确的异步任务需要执行和回调；需要其他异步线程支持。
• 微任务特征：没有明确的异步任务需要执行，只有回调；不需要其他异步线程支持。

13前端跨域的解决方案?

jsonp（script标签）

nginx代理（proxy服务器）

iframe跨域 

  document.domain + iframe跨域 location.hash + iframe跨域 

postMessage跨域 

postMessage是HTML5提出的，可以实现跨文档消息传输。

用法 getMessageHTML.postMessage(data, origin);

CORS 

服务端配置Access-Control-Allow-Origin，若是cookie请求，前后端都需要设置。 由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，并非当前页的cookie。

WebSocket协议跨域 HTML5的新协议

解决前端跨域的八种方案_前端解决跨域_熬夜梦想家的博客-CSDN博客

14.数组常用方法及作用，至少15个?

join() concat() slice() splice() foreach() map() reduce() indexof() includes() find() filter()  some()  every() findIndex()

push() pop() unshift() shfit() sort()

15React render 方法的原理，在什么时候会触发

render生命周期 渲染页面

16说说你对 vue 中 mixin 的理解?

提取复用的代码部分

Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类

Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂

• 替换型策略有props、methods、inject、computed，就是将新的同名参数替代旧的参数
• 合并型策略是data, 通过set方法进行合并和重新赋值
• 队列型策略有生命周期函数和watch，原理是将函数存入一个数组，然后正序遍历依次执行
• 叠加型有component、directives、filters，通过原型链进行层层的叠加

17.for·in 循环和 forof 循环的区别?

  for…in  循环是用于遍历对象的可枚举属性，它会遍历对象及其原型链上的所有属性。它返回的是属性名，可以用来访问对象的属性值。

        for…of  循环是用于遍历可迭代对象的元素，例如数组、字符串、Set、Map等。它返回的是元素值，可以用来访问集合中的每个元素。

18.Js 数据类型判断都有哪几种方式? 至少说出 5 种? 它们的区别是什么?

type of 、instance of 、 constructor  、Object.prototype.toString.call(）

getPrototypeOf()

数组的isArray

Symbol.toStringTag属性

19.说说你对 Object.defineProperty（）的理解?

给对象添加或修改属性的方法并且返回这个对象，有多个属性配置参数 值 可改 可删 可枚举 get set

 

20说说你对 webSocket 的理解?

建立浏览器和服务器全双工通信

WebSocket协议是HTML5的新协议。能够实现浏览器与服务器全双工通信，同时允许跨域，是服务端推送技术的一种很好的实现。