前端面试题（二）

1.高阶组件？redux里面有一个高阶组件？（redux里面的connect就是一个高阶组件）

react-router里的withRouter,withRouter提供了history，在没有通过route跳转，也没有传递this.props的时候，可以通过withRouter实现路由跳转,redux里的高阶组件也用过，是connect，连接全局store的.

2.redux中如果需要使用异步调用数据的话需要使用什么？（redux中间件）

首先需要使用axios或者fetch发送异步请求，然后需要中间件thunk，thunk中间件允许发送的action是一个函数，在函数中执行异步请求.

3.如何在redux中执行ajax异步操作?

解决方案:redux-thunk中间件.

4.为什么要用状态管理器-redux?

react只是一个视图层的框架，只能通过组件的props进行父子间传值通信，在大型应用中，组件很多，需要跨级通信，而redux正好可以解决这个问题.

5.用户单击触发事件到ui界面发生了什么?（redux流程说一下）

用户点击按钮，dispatch一个action，store接收到action以后发送给reducer处理，reducer接收到action，做出相应的操作，之后返回一个新的state给store，store更新自己里面的state，再把新的state返回组件，刷新组件的state值引发重新渲染。

6.写reducer注意什么？

reducer是一个纯函数，应该是固定的输入，固定的输出，并且不会产生副作用。

7.saga解决了什么问题？

解决了异步请求地狱回调问题。

8.如果你接到一个项目如何从头开始的？(需求，技术选型，技术环境，依赖哪些组件)

首先看根据用户的需求，然后组内开会进行技术选型，选好之后一般都是用react或者vue框架进行开发，依赖antd组件库。

9.setState到底是异步还是同步?

有时表现出异步,有时表现出同步

setState在生命周期函数和合成函数中都是异步更新。 setState在setTimeout、原生事件和async函数中都是同步更新。
  setState只在合成事件和钩子函数中是“异步”的，在原生事件和setTimeout 中都是同步的。
  setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
  setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout中不会批量更新，在“异步”中如果对同一个值进行多次setState，setState的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时setState多个不同的值，在更新时会对其进行合并批量更新。

10.Generator和promise的原理？

Generator 是 ES6 添加的一个特性，允许函数的暂停和恢复,

generator函数:是一个状态机，函数内部封装多个状态，每个状态是一个yield，调用generator函数，会返回一个遍历器对象
  Promise 异步对象:一般用于改写异步操作，比如ajax，增加可读性和可维护性
    fetch       jquery ajax -->用ES6 Promise 进行封装
    axios      js ajax -->用ES6 Promise 进行封装

11.promise generator async三者关系和区别？

 promise

·有三个状态：pending(进行中)、resolved(成功)、rejected(失败)
·无法取消Promise,一旦新建就会立即执行，无法中途取消
·当处于Pending状态时，无法得知目前进展到那个阶段
·promise真正执行回调的时候，定义Promise那部分实际上已经走完了，所以Promise的报错堆栈上下文不太友好

generator
·ES6 引入，可以暂停和继续执行函数
·可以当做一个迭代器（iterator）来用，也可以在内部存一些状态，成为一个状态机
·yield（关键字）表示暂停 yield表单式本身没有返回值或者说总是返回undefined
·next方法可以带一个参数，该参数就会被当做上一个yield的返回值

async
·async 对应的是 * 。
·await 对应的是 yield 。
·async/await 自动进行了 Generator 的流程控制。

12.简述下generator函数？

1.generator是一个状态机，每条yield语句都是一个状态
2.用同步的方法去写异步操纵
3.generator会返回一个遍历器对象，遍历器对象都有一个next方法，可以对yield语句进行遍历，每次调用一次next方法，都会返回一个对象{value:值，done：false}
4.直到yield语句执行完毕或碰上 return 会返回{value：undefined，done：true}
  注意：yield语句后面函数的返回值，是作为next函数的返回值value属性的值

13.Redux 三个基本原则？

1、单一数据源：整个应用的state被储存在一棵object tree中，并且这个object tree只存在于唯一一个store中。
2、State 是只读的：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
3、使用纯函数来执行修改：为了描述 action 如何改变 state tree ，你需要编写reducers。

14.redux的原理？

首先注册全局唯一对象store，用来维护整个应用的state。当变更state时，就会dispath一个action，reducer根据action来更新相应的state（需要能手写出来）

15.对redux的理解？

（1）单向数据流

（2）集中管理数据

（3）函数式编程

（4）简化数据流

（5）redux的理念  万物皆函数

16. redux 和 react-redux区别？

React：负责组件的UI界面渲染；

Redux：数据处理中心；

React-Redux：连接组件和数据中心，也就是把React和Redux联系起来。

17.redux的优点？

（1）集中管理数据

（2）单向数据流

18.redux的缺点？

（1）维护大量的reducer和action constants  最后造成难以维护

（2）当一个组件相关数据更新的时候，即使父组件不需要用到这个组件，父组件还是会重新render，可能会造成性能影响，或者需要写复杂的shouldComponentUpdata

19.什么是中间件？

位于action和reducer之间，负责拦截，并转发action的这个函数，就是中间件，

他有两个方法：

1.next方法的作用：如果只有一个中间件，就会直接转发给reducer，如果还有下一个中间件，就转发给下一个中间件，然后再转发给reducer

2.run方法的作用：自动调用next方法并且执行

20.中间件的作用是什么？

1.实现异步

2.监控redux

3.其他功能

21.中间件实现原理？

如果只有一个中间件，就会把action直接转发给reducer，如果还有下一个中间件，就转发给下一个中间件，然后再转发给reducer。

22.常用的中间件？

 （1）redux-logger

       --负责拦截action 并且转发action

       --负责打印我们之前的state和之后state

 （2）redux-thunk

        --负责拦截action 并且转发action

        --让我们action可以执行异步操作

 （3）redux-promise

        --负责拦截action 并且转发action

         --简化thunk的写法 也是让我们的action可以执行异步操作

 （4）redux-saga

  使用了 ES6 的 Generator 功能，让异步的流程更易于读取，写入和测试

23.redux-saga/effects 也叫saga的附件或副作用？

    --takeEvery的作用：两个参数，第一个是接收的假参数，第二个是你要执行的generator函数

    --takeLatest作用：防止重复提交，当点击多次 只会执行最后一次

    --put的作用：转发action

    --call的作用：阻塞的作用，异步不执行完毕，不会执行后面的yield语句

    --fork的作用：非阻塞，不会等待结果，直接执行后面的yield语句

    --all的作用：合并saga

24.Router的功能？

组件功能:地址栏的地址切换，实现组件切换或同一个组件不同状态的切换。

25.都有哪些router？

1.hashRouter 是基于location.hash来实现的  url地址会出现#号 对用户不友好

     一般开发用这个，上线之前换成browserRouter

2.browserRouter  是基于H5的history来实现的 url地址不会出现#号，对用户友好

3.withRouter  高阶组件 也叫高阶路由 自带三个对象 history location match一般用于接收不到这三个对象的组件，通过高阶路由包裹可以获得这三个对象实现路由跳转传值

4.动态路由就是通过路由传值一般通过Route里面的path的路径后面添加要传递的值，可以在location里面的search获取我们传递的内容，也可以通过Link的标签的to的地址后面加？id这样传递  也是通过location里面的search获取。

26.react组件间传值？

1.父->子  通过props 一般不会超过3层

子->父  子组件通过调用父组件的里面的函数来进行传值

2.redux进行组件间通信

3.context全局对象的方法进行跨级传值

    context全局对象存在于propType中 这是一个格式校验，一般想要使用context全局对象就必须要在这个组件中使用格式校验才可以获得context全局对象

4.通过events实现事件订阅  哪个组件需要进行跨级通信 就让这两个组件进行订阅

接收方组件：

事件对象.on（自定义事件,（回来的数据）=>{}）

发送方组件：

事件对象：emit（自定义事件，数据）

27.react与vue有什么区别？

相同点：

·  两者都是用于创建UI的JavaScript库；

·  两者都快速轻便；

·  都有基于组件的架构；

·  都是用虚拟DOM；

·  都可放入单个HTML文件中，或者成为更复杂webpack设置中的模块；

·  都有独立但常用的路由器和状态管理库；

不同点：

·  React偏向MVC模式，VUE属于MVVM模式。

·  React一般适用于大型的项目开发，而且更倾向于原生app的开发，扩展性更强，更灵活。

·  VUE相对于React，更适合一些中小型的项目，开发速度快，还有指令系统，很多东西都是内置的，写起来方便。

·  Vue组件分为全局组件和局部组件，在react中都是通过import相应组件，然后模版中引用；

·  多了指令系统，让模版可以实现更丰富的功能，而React只能使用JSX语法；

·  react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css；

而 vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。

28.你理解“在React中，一切都是组件”这句话？

组件是React应用UI的构建块。这些组件将整个UI分成小的独立并可重用的部分，每个组件彼此独立，而不会影响UI的其余部分。

29.什么是JSX？

JSX是javaScript XML的简写。是React使用的一种文件，它利用javaScript的表现力和xHTML的模板语法。这使得HTML文件非常容易理解。此文件能够提高其性能。

30.diff算法原理？

1.把树形结构按照层级分解，只比较同级元素    

2.给列表结构的每个单元添加唯一的key值，方便比较。

3.react只会匹配相同的class的Component（class指得是class组件的名字）

4.合并操作，调用component和setState方法的时候，React将其标记为dirty，到每一个事件循环结束，react都会检查所有标记的dirty的component重新重绘

5.选择性子树渲染。开发人员可以重写shouldComponentUpdata提高diff的性能

   1.当组件更新时，如果组件的props或者state都没有改变，render函数就不会触发。

   2.省去虚拟DOM的生成和对比过程，达到提升性能的目的。

   3.具体原因是因为react自动帮我们做了一层浅比较。

31.Rodahog与dva和umi的关系？

Rodahog： 是webpack脚手架

dva：redux数据流管理工具。

优势：基于redux，简化了数据流。

缺点：mock需要手动合并

        model需要手动注册

        路由需要手动添加

umi：

优势：约定式

     -路由按照约定创建问价或文件夹，路由表自动生成

     -mock自动合并导出

     -model自动注册

       可插拔的插件

Umi：相当于roadhog+路由+插件集，一般情况下umi中使用dva进行数据流管理—umi是应用框架

32.vue不能检测哪些属性的变化？

由于JavaScript的限制，Vue不能检测对象属性的添加或删除，Vue 不能检测以下变动的数组： 

        vue实现数据双向绑定有这么一个过程：当你把一个普通的 JavaScript 对象传给 Vue 实的 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty() 把这些属性全部转为getter/setter。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。实现数据data变化更新视图view。

        因为若一个对象的属性没有在data中声明，则他就不是响应式的。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，这样的话这个对象属性就是响应式的。而执行这个过程必须在data中声明才会有。

要解决这个问题需要用Vue.set(object, key, value)或者vm.$set方法(全局 Vue.set 方法的别名)

由于JavaScript的限制，Vue 不能检测以下变动的数组： 

*当使用索引直接设置一个项时，例如： 

1. vm.items[indexOfItem] = newValue;

解决---->
Vue.set(vm.items,indexOfItem,newValue) / vm.items.splice(indexOfItem, 1 , newValue)

* 当你修改数组的长度时，例如： 

vm.items.length = newLength;

解决---->
vm.items.splice(newLength)

33.vuex优势，有哪几部分组成？

1.Vuex是什么？

借鉴 了Flux、Redux、 The Elm Architecture

Vuex是专为vue.js设计的状态管理模式。

集中式存储和管理应用程序中所有组件的状态

Vuex 也集成到 Vue 的官方调试工具

一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的状态 (state)
2.什么情况下我应该使用 Vuex？

不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的 store 模式。

适用于：中大型单页应用，你可能会考虑如何把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为，解决问题如下：

① 多个视图使用于同一状态：
传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力

② 不同视图需要变更同一状态：
采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码

3.Vuex组成部分：
state:进行组件共享数据的集中存储{}
getters:原理computed 用于返回最新的数据值{计算属性写法}
mutations:唯一一个能够修改state里面数据的地方-（函数）-不能做异步
actions:处理异步请求-异步调用mutations函数
modules:模块 当数据比较多的情况下，而且数据之前没有什么关系，用模块划分，每一个模块对象都包含以上4部分
同时提供了3个对象：
mapState:mapState对象辅助操作state,拿到state里的一些数据
mapGetters:mapGetters辅助操作getters通过计算属性返回的一些新的数据值
mapActions：mapActions辅助操作actions函数的调用

commit 同步调用mutations方法
disptatch 异步调用actions方法

34.useeffect如何模仿生命周期？
        useEffect(()=>{},[])
componentDidMount：在useeffect的箭头函数后添加一个空数组，会运行一次

        useEffect(()=>{})
componentDidUpdate：在useeffect的箭头函数后不添加数组，每次state改变都会触发

        useEffect(()=>{
        console.log('渲染的时候执行'); 
        return ()=>{
        }
        })
componentWillUnMount：在useeffect的箭头函数中return一个函数，只会执行一次

35.受控组件与非受控组件？

1.受控组件受状态控制，即state的值为表单的value值，vulue值的改变也会影响state的变化，使用受控组件需要为组件添加change事件。
2.非受控组件没有状态，他的值不受state和props 的影响，一般都添加ref来绑定dom元素。

36.无状态组件和有状态组件？

1.无状态组件就是函数组件，他是一个纯函数函数组件没有状态，没有生命周期，在开发中组要挂钩hooks，钩子生命周期函数才能开发，函数式组件可以直接调用，返回一个新的React元素。
2.状态组件就是类组件，类组件有自己的生命后期，自己的状态，在开发中可以直接使用生命周期中的函数，类组件在调用时要创建一个实例的，然后通过调用实例里的render方法来返回一个函数。