react-umi面试题

1. 说说React生命周期中有哪些坑？如何避免？

在讨论生命周期的时候一定是在讨论类组件，因为函数组件没有生命周期的概念，它本身就是一个函数，只会从头到尾的执行完毕

在生命周期中，执行的顺序是从 挂载=>更新=>卸载 这一react的完整的流程才叫生命周期

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

2. componentWillMount在react已经被标记弃用，不推荐使用，主要原因是新的异步架构会导致他被多次调用，像ajax网络请求等异步操作应该放到componentDidmount中

3. componentWillReceiveProps同样也被标记弃用，被getDerivedStateFromProps所取代，主要用于性能优化

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

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

6. 在componentWillUnmount函数中忘记接触绑定事件，取消定时器等清理操作，容器引发内存泄露等bug

7. 如果没有添加错误边界处理，当渲染发生宜昌市，用户将会看到一个无法操作的白屏，所以一定要添加

2. 调和阶段setState干了什么？

调用setState时，react流程为

将传递给setState的对象合并到组件的当前状态，在这过程中将启动一个可以称之为和解的过程，和解的最终目标是以最有效的方式，根据这个新的状态来更新ui，为此，react将构建一个新的元素树，然后react将这个新树与上一个元素树相比较（diff）

调和阶段setState发生的了什么？

1. 代码调用setState函数之后，react会将传入的参数对象与组件当前的状态进行合并，然后触发所谓的调和过程

2. 经过调和过程，react会以相对高效的方式根据新的状态构建react元素树并且着手重新渲染整个ui界面

3. 在react得到元素树之后，react会自动计算树新树与老树的节点差异，然后根据差异对界面进行最小化从重渲染

4. 在差异化算法中，react能够相对精确的知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染

3. React合成事件的原理？

1. react合成事件是什么？

1. React合成事件（SyntheticEvent）是React模拟原生DOM事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。他根据W3C规范来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口

4. BrowserRouter与HashRouter的区别

1. 底层原理不一样：

1. BrowserRouter使用的是H5的history API，不兼容IE9以下的版本，HashRouter使用的是URL的哈希值。

b. path表现形式不一样

BrowserRouter的路径是没有#,HashRouter的路径包含#

c. 刷新后对路由state参数的影响

BrowserRouter没有影响，因为state保存在history对象当中

HashRouter刷新后会导致路由state参数的丢失

5. 为什么react元素有一个$$type属性

6. 说说你对webSocket的理解？

什么是websocket？

websocket是html5提供的一种浏览器与服务器之间进行双全工通讯的网络技术，属于应用层协议，它基于TCP传输协议，并复用HTTP的握手通道，浏览器和服务器之间只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，他最大的特点是：服务器可以向客户端主动推送消息，客户端也可以主动向服务器推送消息

其原理是什么？

客户端向websocket服务器通知一个带有所有接收者ID的事件，服务器接收后立即通知所有活跃的客户端，只有ID在接受者ID序列中的客户端才会处理这个事件

其特点是什么？

1. 支持双向通信，实时性更强，可以发送文本，也可以发送二进制数据，建立在TCP协议之上，服务端的实现比较容易

2. 数据格式比较轻量，性能开销小，通信高效没有同源限制，客户端可以与任意服务器通信，协议标识符是ws（如果加密，服务器网址则为wss）

3. URL与http协议有着良好的兼容性，默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易欧宁比，能通过各种HTTP代理服务器

应用场景？

聊天，弹幕，协同编辑，体育实时更新，股票基金报价实时更新

7.说说你对react的理解？有哪些特性

react是一个用于构建用户界面的javascript库，只提供了ui层面的解决方案，遵循组件的设计模式，声明式编程范式和函数式编程概念，以使前端应用程序更高效。

使用虚拟dom进行有效地操作dom，遵循从高阶组件到低阶组件的单项数据流，帮助我们将界面分为了各个独立的小块，这些组件之间可以组合，嵌套，构建成整体的页面

7. 说说Real diff算法是怎么运作的、

diffing算法的运作流程主要分为三部分，tree层，component层，element层

1. tree层：tree层对Dom节点的跨层级移动的操作忽略不计，只对相同级的dom节点进行比较，一旦发现节点不存在，直接删除该节点以及之下的所有子节 点

2. component

8.什么是强缓存和协商缓存？

强缓存和协商缓存从字面意义上理解都是保存在浏览器客户端的资源，资源缓存统一保存在chrome：//version当中，

强缓存就是在客户再次访问同一个地址时浏览器直接从本地磁盘加载文档

协商缓存指的是想服务端发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，

如果命中则返回304状态码并带上新的request header通知浏览器从缓存中读取资源

两者共同点在于都是从客户端中获取数据，不同点在于强缓存不会发送请求，协商缓存会发送请求

9.如何使用css实现一个三角形？

设置一个div的四条border边框的宽度，当中心的盒子没有宽高时设置其中三条边框为100px solid transparent透明就能得到一个三角形，其余的一条需要设置颜色就可以

8. 说说你对React中虚拟dom的理解？

虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘

使用虚拟 DOM 的优势如下：

简单方便：如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难

性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能

跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行

缺点：

在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化

首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢

9. 说说你对react hook的理解

React的hook指的是在函数式组件中的特殊的api，类组件中有生命周期钩子，所以可以借助类组件的生命周期钩子完成一些副作用操作，比如页面挂载完毕执行异步请求拿到相应的数据等，而在函数组件中因为没有this指向，所以没有办法使用相应方法，这时候就可以使用函数组件中的hooksapi来模拟响应的类组件中的生命周期钩子来进行副作用操作，比如常用的useMemo，useState，useEffect等等

10. React组件之间如何通信？

1. 父子传值，使用props最为简单

2. 子父传值，使用父组件传递给子组件一个方法，子组件在需要的时候直接调用即可传值

3. 兄弟组件通信，使用第三方库pubsub.js，消息订阅与发布进行传值

4. 全局事件通信，使用redux和react-redux进行从容器中删除或者请求数据

5. 使用useContext，组件上下文传值，一般用于祖组件给后代组件进行通信

11. 说说你对受控组件和非受控组件的理解？应用场景？

1. 受控组件，受控组件指的是随着用户的输入而不断的维护某个变量当中的数据从而实时保证变量中的数据是最新的数据，一句话总结，随着用户的不断输入或者删除，不断的维护某一个变量中的数据就是受控组件

2. 非受控组件，非受控组件指的是在用户需要使用到数据的地方随时去获取最新的数据，一般都是使用ref中的实例.current.input.value来获取值，一句话总结，随用随取，这就是非受控组件

React官方是不推荐直接操作dom的，并且不推荐在组件中过多使用ref，这样可能会造成一定的性能影响

从应用场景来说，受控组件一般用在用户输入的值要进行实时校验，比如身份证号校验，手机号校验等，非受控组件一般用户采集用户数据，比如form表单等等

12. 说说Connect组件的原理是什么？

作用：连接React组件与Redux Store

在原应用组件上包裹一层，使原来整个应用成为Provider的子组件

接收Redux的store作为props，通过context对象传递给子孙组件上的connect

那connect做了些什么呢？

它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件。

13. 说AMD、CMD、commonJS模块化规范的区别

三个都是为了模块化加载诞生的，区别在于amd是依赖前置，提前加载，cmd是依赖就近，按需加载，也可以说是延时加载，commonjs是所有模块都加载在作用域当中，不会污染全局作用域，模块同步加载，只有在加载完成后才会执行后序操作

14. 说说package.json中版本号的规则

>应该是接收高于版本的任何版本

<应该指的是低于版本的任何版本

=>等于或者高于版本的任何版本

=<低于版本或者等于版本号

15.说你对@reduxjs/toolkit的理解？和react-redux有什么区别

1、reduxjs/tookit相对于react-redux来说比较方便，集成了redux-devtools-extension，不需要额外的配置，非常方便

2、reduxjs/tookit集成immutable-js的功能，不需要安装配置使用，提升了开发效率

3、reduxjs/tookit集成了redux-thunk的功能

1. reduxjs/tookit将types、actions、reducers放在一起组成了全新的slices，简化了我们的使用

1、reduxjs/tookit相对于react-redux来说比较方便，集成了redux-devtools-extension，不需要额外的配置，非常方便

2、reduxjs/tookit集成immutable-js的功能，不需要安装配置使用，提升了开发效率

3、reduxjs/tookit集成了redux-thunk的功能

4、reduxjs/tookit将types、actions、reducers放在一起组成了全新的slices，简化了我们的使用