react和vue的面试题

目录

1.Vue组件通信：

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

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

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

5.清除浮动的几种方式？各自的优缺点？

6.说说你对koa中洋葱模型的理解？

---

1.Vue组件通信

父组件通过v-bind绑定一个自定义的属性，子组件通过props接收父组件传来的数据，子组件通过$emit触发事件,父组件用on()或者在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件，从而接收子组件传来的数据；

父传子时候通过props传递的数据是单向的，父组件数据变化时会传递给子组件，但是子组件不能通过修改props传过来的数据来修改父组件的相应状态，就是单向数据流；

子组件向父组件传值，通过$emit触发，然后再父组件中获取；

全局事件总线eventBus也是一种发布订阅者模式；实现组件通信；在main.js中全局引入。

Vuex全局共享状态数据，state，通过action，mautation方法调用各个组件都可以调用和修改数据；

最后一种就是我自己也用的消息发布与订阅 pubsub，首先要npm i pubsub-js需要引入第三方库，pubsub.publish(‘消息名’,传递的值)发布消息

Pubsub.subscripe(‘消息名’,回调函数)订阅消息 ，接收值;

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

Constructor不推荐去处理初始化以外的逻辑

Constructor本身并不是属于react生命周期，它只是class的一个初始化函数

移除掉它可以使代码更简洁；

GetDerivedStateFromProps它是当props发生变化时来更新state，那么它的触发时机就是当props被传入的时候，当state发生变化时，当forceupdate被调用时候，我们尝尝误以为只有props发生变化时候，它才会被调用

Render函数返回的是jsx的数据结构，用于描述具体的渲染内容，但是render函数并不会真正的渲染组件，真正的渲染是依靠react操作jsx描述结构来完成，而render函数是一个穿函数，不应该产生副作用函数，不然会导致重复渲染，触发死循环

Shouldcomponentupdate

这个方法通过返回true或者false来确定是否重新触发新渲染，这一个关键点可以很好的提升性能，通过增加判断条件，来决定是否重新渲染该页面；

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

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

通过props.store获取祖先Component的store

props包括stateProps、dispatchProps、parentProps,合并在一起得到nextState，作为props传给真正的Component

componentDidMount时，添加事件this.store.subscribe(this.handleChange)，实现页面交互shouldComponentUpdate时判断是否有避免进行渲染，提升页面性能，并得到nextState

componentWillUnmount时移除注册的事件this.handleChange

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

中间件是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的

Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理

本质上一个函数，对store.dispatch方法进行了改造，在发出 Action和执行 Reducer这两步之间，添加了其他功能

常用中间件：

redux-thunk：用于异步操作

redux-promise：用于返回promise对象

实现原理：

所有中间件被放进了一个数组chain，然后嵌套执行，最后执行store.dispatch。可以看到，中间件内部（middlewareAPI）可以拿到getState和dispatch这两个方法

内部会将dispatch进行一个判断，然后执行对应操作

1. props和state相同点和不同点？render方法在哪些情况下会执行？

Props一般是父组件向子组件通信，在组件之间通信使用

State一般用于组件内部的状态维护，更新组件内部的数据，更新子组件的props等

Render的触发事件，通过setState调用

或者函数式组件中的set数据也会触发

​​​​​​​5.清除浮动的几种方式？各自的优缺点？

Clear:both,

overflow:hidden：可能会出现滚动条

空div，不推荐使用，虽然没有副作用，但是因为这个div纯粹表现，没有语义

使用浮动父元素：使用该方法将不可避免的使页面所有元素都浮动，也不推荐

采用伪类:after动态建立一个父元素设置clear属性，比较推荐

6.说说你对koa中洋葱模型的理解？​​​​​​​

Koa和express是同一个作者，它和express相比少了一些固定中间件，比如说router，使得这个koa更轻量，那好处还有就是让用户开发出更个性化的项目，

而koa既然没有那么多中间件，所以它要添加中间件，自己引入，这个使用加载中间件的过程就使用了洋葱模型，洋葱模型就是将所有的中间件由外而内的一次排开，并且每个中间件都有一个next()函数，而中间件的执行被分为了两部分，我们都知道请求分为请求和响应，当客户端发出请求时候，服务端接受，这时候koa就会依次执行排开的中间件，而到最里层时，就会由内而外返回，这时候next（）函数就凸显了作用，next（）函数以上的代码为请求的时候执行，以下的为响应的执行；