React面试题

1、说说react生命周期中有那些坑？如何避免？

以下这几种情况容易造成生命周期的坑：

getDerivedStateFromProps 容易编写反模式代码，使受控组件和非受控组件区分模糊

componentWillMount 在 React 中已被标记弃用，不推荐使用，主要的原因是因为新的异步架构会导致它被多次调用，所以网络请求以及事件绑定应该放到 componentDidMount 中

componentWillReceiveProps 同样也被标记弃用，被 getDerivedStateFromProps 所取代，主要原因是性能问题。

shouldComponentUpdate 通过返回 true 或者 false 来确定是否需要触发新的渲染。主要用于性能优化。

componentWillUpdate 同样是由于新的异步渲染机制，而被标记废弃，不推荐使用，原先的逻辑可结合 getSnapshotBeforeUpdate 与 componentDidUpdate 改造使用。

避免：

    不在恰当的时候调用不该调用的代码

    在需要调用时，不要忘记调用

2、 说说Real diff算法是怎么运作的？

主要分为三个层级：tree层级，component层，element层级

tree层级：DOM节点跨层级的操作不做优化，只对相同层级的节点进行操作，一旦发现该节点不存在，直接删除该节点以及下面的所有子节点

component层级：如果是同一个类的组件，就会继续往下diff运算，如果不是一个类的组件，就将直接删除这个组件下的所有子节点，创建新的

element层级：对于比较同一层级的节点们，每个节点在对应的层级用唯一的key作为标识

提供了3种节点操作，分别为 INSERT_MARKUP(插入)、MOVE_EXISTING (移动)和 REMOVE_NODE (删除)

3、调和阶段setState干了什么？

1）代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。
2）经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；
3）在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；
4）在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

4、说说redux的实现原理是什么？

redux要求我们吧数据放在store公共存储空间，一个组件改变了store中的数据内容，其他组件就能感知到store的变化，再来取数据，从而实现了一个数据传递的功能

5、react合成事件的原理？

最主要的两个方法就是 extractEvents$4 和 processDispatchQueue ，前者是收集该节点及该节点到根节点之间的事件，将它们保存在 dispatchQueue 里，然后调用 processDispatchQueue 来依次执行里面的方法。

6、React组件之间如何通信？

父传子：只需要在子组件标签内传递参数，子组件通过props属性接收父组件传递过来的参数

子传父：父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值

兄弟传值：父组件作为中间层来实现数据的互通，

7、为什么react元素有一个$$type属性

防止XSS攻击

8、说说Connect组件的原理是什么

connect是一个高阶函数，首先传入mapStateToProps、mapDispatchToProps，然后返回一个生产Component的函数(wrapWithConnect)，然后再将真正的Component作为参数传入wrapWithConnect，这样就生产出一个经过包裹的Connect组件

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

从架构角度来看，Fiber 是对 React核心算法（即调和过程）的重写

从编码角度来看，Fiber是 React内部所定义的一种数据结构，它是 Fiber树结构的节点单位，也就是 React 16 新架构下的虚拟DOM

一个 fiber就是一个 JavaScript对象，包含了元素的信息、该元素的更新操作队列、类型，其数据结构

10、说说你对redux中间件的理解？常用的中间件有哪些？实现原理？

中间件就是放在就是在dispatch过程，在分发action进行拦截处理
常用的中间件：
redux-thunk：用于异步操作
redux-logger：用于日子记录
实现原理：
所有中间件被放进了一个数组，然后嵌套执行，最后执行store.dispatch。可以看到中间件内部可以拿到getState和dispatch这两个方法，内部会将dispatch进行一个判断，然后执行对应操作

11、React性能优化的手段有哪些？

避免使用内联函数
使用React Framgments避免额外标记
使用Immutable
懒加载组件
事件绑定方式
服务器渲染

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

js是一门单线程的语言，意味着同一时间内只能做一件事，但是这不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环

13、前端跨域的解决方案

cors跨域：
服务端进行接口请求设置，前端直接调用
jsonp：
jsonp跨域-前端适配，后端配合，
前后端同时改造
接口代理：
通过修改nginx服务器配置实现代理转发
前端修改，后端不用

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

call( ) ceil() floor() map() route() apply() bind() find() findindex（） splice （）pop（） push（） forearch（） instanceof （） filter（） indexof（）

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

原理：
在类组件和函数组件中，render的型式是不一样的
类组件中的render函数指的是render方法，函数组件中指的是这个函数组件
触发时段：
类组件调用setState修改状态，函数组件通过useState，hook修改状态

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

mixin是面向对象程序设计语言中的类，提供了方法的实现，其他类可以访问mixin类的方法而不必成为其子类
mixin本质就是一个js对象，它可以包含我们组件中任意功能选项

17.for…in循环和for…of循环的区别？

（1）for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值

（2）for in总是得到对象的key或数组、字符串的下标

（3）for of总是得到对象的value或数组、字符串的值

（4）for in是ES5里的，for…of是ES6里的

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

typeof：可以判断数据类型，它返回表示数据类型的字符串
instanceof：一般用来检测引用数据类型，表达式为：A instanceof B，判断A是否是B的实例，如果 A 是 B 的实例，则返回 true,否则返回 false，由构造类型判断出数据类型
constructor：是prototype对象上的属性，指向构造函数
Object.prototype.toString.call()：用来检测对象类型
jquery.type()：对象是undefined或null，则返回相应的“undefined”或“null”

19、说说你对webSocket的理解

是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅

客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输