1. Vue组件通信？
组件间的通信方式可以分为
父子组件间的通信， 兄弟组件间的通信， 祖孙与后代之间的通信， 非关系组件间的通信
vue常见的通信
1.通过props传递(父组件传递数据给子组件，子组件设置props属性，定义接收父组件传递过来的参数，父组件在使用子组件标签中通过自变量来传递值。)
2.通过 $emit触发自定义事件。（适用于子组件传递数据给父组件。
子组件通过 e m i t 触发自定义事件， emit触发自定义事件，emit触发自定义事件，emit第二个参数为传递的数值，父组件绑定监听器获取到子组件传递过来的参数。）
3.使用ref（父组件在使用子组件的时候设置ref ，父组件通过设置子组件ref来获取数据。）
4.eventBus（适用于兄弟组件传值。创建一个中央事件总线eventBus，兄弟组件通过$emit触发自定义事件， e m i t 第二个人参数为传递的数值，另一个兄弟组件通过 emit第二个人参数为传递的数值，另一个兄弟组件通过emit第二个人参数为传递的数值，另一个兄弟组件通过on监听自定义事件。）
5. p a r e n t 或 parent或parent或root（通过共同的祖辈 p a r e n t 或者 parent或者parent或者root搭建通信桥梁，）
6.vux（适用于复杂瓜西的组件数据传递。vuex作用相当于一个用来存储共享变量的容器）
2. 说说你对vuex的理解？写出其原理的核心代码？
vuex由State + Muatations(commit) + Actions(dispatch) 组成：
（1）全局只有一个Store实例（单一数据源）；
（2）Mutations必须是同步事务，不同步修改的话，会很难调试，不知道改变什么时候发生，也很难确定先后顺序。
（3）Actions负责处理异步事务，然后在异步回调中触发一个或多个mutations，也可以在业务代码中处理异步事务，然后在回调中同样操作；
（4）模块化通过module方式来处理，这个跟Redux-combineReducer类似，在应用中可以通过namespaceHelper来简化使用；
3. 说说React生命周期中有哪些坑？如何避免？
- getDerivedStateFromProps 容易编写反模式代码，使受控组件和非受控组件区分模糊
- componentWillMount 在 React中已被标记弃用，不推荐使用，主要的原因是因为新的异步架构会导致它被多次调用，所以网络请求以及事件绑定应该放到componentDidMount 中
- componentWillReceiveProps 同样也被标记弃用，被 getDerivedStateFromProps
所取代，主要原因是性能问题。 - shouldComponentUpdate 通过返回 true 或者 false 来确定是否需要触发新的渲染。主要用于性能优化。
- componentWillUpdate 同样是由于新的异步渲染机制，而被标记废弃，不推荐使用，原先的逻辑可结合
getSnapshotBeforeUpdate 与 componentDidUpdate 改造使用。 - 如果在 componentWillUnmount 函数中忘记解除事件绑定，取消定时器等清理操作，容易引发 bug。
- 如果没有添加错误边界处理，当渲染发生异常时，用户将会看到一个无法操作的白屏，所以一定要添加。
4. 说说你对React中虚拟dom的理解？
Virtual dom 本质上是以对象的形式存在的，对dom的描述，创建虚拟dom，目的就是为了更好的将虚拟dom的节点渲染到页面视图中去，虚拟dom对象的节点与真实dom的属性一一照应。在react中jsx是其一大特性，可以让你在js中通过xml的方式去直接声明界面的dom结构。reactDom.render()用于将创建好的虚拟dom节点插入到某个真实的节点上，并渲染到页面上，jsx实际上是一种语法糖，在使用的过程中会被babel进行编译转化成js代码，所以jsx就是为了简化直接调用react。createelement（）方法。
虚拟dom特点:
简单方便：如果使用手动操作真实dom来完成页面，繁琐又容易出错，在大规模应用下维护也很困难。
性能方面：使用虚拟dom，能够有效的避免真实dom树频繁更新，减少多次引起重绘与回流，提高性能。
跨平台：react借助虚拟dom，能够有效的避免真实dom树频繁更新，减少多次引起重绘与回流，提高性能。
但是在一些性能要求极高的应用中虚拟dom无法进行针对性的极致优化。
5. 调和阶段setState干了什么？
代码中调和setstate函数之后，react会将传入的参数对象与组件当前的状态进行合并，然后出发调和过程。
经过调和过程，react会以相对高效的方式根据新的状态构建react元素树，并且着手重新渲染整个ul界面。
在react得到元素树之后，react会自动计算出新的树和老鼠的节点差异，然后根据差异对界面进行最小化重新渲染。
在差异计算算法中，react能够相对精确的知道哪些位置发生了改变以及如何改变，这就保证了按需更新，而不是全部重新渲染。
6. React组件之间如何通信？
父组件向子组件传递：父组件调用子组件的时候，只需要在子组件的标签内传递参数，子组件通过props属性就能接收到父组件传递过来的参数。
子组件向父组件传递：父组件向子组件传递一个函数，然后通过这个函数的回调，拿到组件传递过来的值。
兄弟组件之间的通信：父组件充当中间层来实现数据的互通，通过使用父组件传递
非关系组件传递：如果组件之间类型比较复杂，可以将数据进行一个全局资源管理redux，从而实现通信。
7. 说说redux的实现原理是什么，写出其原理的核心代码？
redux遵循三大原则：单一数据源，state是只读的，使用纯函数来执行修改。
redux要求外面把数据都放在store公共存储空间中，一个组件改变了store里的数据内容，其他组件就能感知到store的变化，再来取数据，从而间接实现了这些数据传递的功能。
实现原理：
react components需要获取一些数据，然后它就告知store需要获取数据，这就是action creactor，store接收到之后，取reducer查一下，reducer就会告诉store应该给这个组件什么数据。
核心代码
import { createStore } from 'redux' // 引入一个第三方的方法 const store = createStore() // 创建数据的公共存储区域（管理员） // 设置默认值 const initialState = { counter: 0 } const reducer = (state = initialState, action) => { } const store = createStore(reducer)
8. 说说Connect组件的原理是什么？
connect 的第一个参数是 mapStateToProps
这个函数允许我们将 store 中的数据作为 props 绑定到组件上
connect 的第二个参数是 mapDispatchToProps
由于更改数据必须要触发action, 因此在这里的主要功能是将 action 作为props 绑定到 组件上
Provider就是react-redux中的一个组件, Provider 做的事情也简单, 它就是一个容器组件, 会把嵌套的内容原封不动作为自己的子组件渲染出来. 它还会把外界传给它的 props.store 放到 context。
9. 说说react 中jsx语法糖的本质？
React 使用 JSX 来替代常规的JavaScript。
JSX 是按照 XML 语法规范 的 JavaScript 语法扩展。
JSX 语法的本质：并不是直接把 JSX 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的。所有的jsx语法都会最终经过babel.js转化成为React.createElement这个函数的函数调用。
jsx特点：
1.JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化；
2.它是类型安全的，在编译过程中就能发现错误；
3.使用 JSX 编写模板更加简单快速。
10. 说说你对redux中间件的理解？常用的中间件有哪些？实现原理？
中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的
Redux整个工作流程，当action发出之后，reducer立即算出state，整个过程是一个同步的操作
那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件
Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理。
常用的中间件
redux-thunk：用于异步操作
redux-logger：用于日志记录。
redux-thunk是官网推荐的异步处理中间件，action需要是一个JavaScript的对象
redux-thunk中间件会判断你当前传进来的数据类型，如果是一个函数，将会给函数传入参数值（dispatch，getState），dispatch函数用于我们之后再次派发action
getState函数考虑到我们之后的一些操作需要依赖原来的状态，用于让我们可以获取之前的一些状态
11. props和state相同点和不同点？render方法在哪些情况下会执行？
state
一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是 state， 一般在 constructor 中初始化，当需要修改里面的值的状态需要通过调用 setState 来改变， 从而达到更新组件内部数据的作用，并且重新调用组件 render 方法。
props
React 的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件 组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是 props， 所以可以把 props 理解为从外部传入组件内部的数 react 具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据 props 除了可以传字符串，数字，还可以传递对象，数组甚至是回调函数。
区别
相同点：
两者都是 JavaScript 对象
两者都是用于保存信息
props 和 state 都能触发渲染更新
区别：
props 是外部传递给组件的，而 state 是在组件内被组件自己管理的，一般在 constructor 中初始化
props 在组件内部是不可修改的，但 state 在组件内部可以进行修改
state 是多变的、可以修改
12. react新出来两个钩子函数是什么？和删掉的will系列有什么区别？
react废弃的生命周期有：componentwillmount ，componentwillreceiveprops。
废弃原因：在react的fiber架构中，调和过程会多次执行will周期，不再是一次执行，失去了原有的意义。多次执行在周期中如果setstate或者dom操作，会触发多次重绘，影响性能，也会导致数据错乱。
新增的生命周期有：个体derivedstatefrompros，getsnapshotBeforupdate，
getDerivedstatefromprops：在react16.4中，每次则改为每次组件渲染器调用，即无论props变化，组件自己setstate，父组件render都会触发静态方法，本意是隔离访问组件实例，却造成访问组件的数据和方法十分不便，难以进行数据的比较，不能state，而是返回一个对象来更新setstate，使用不便，也可能触发多次更新状态，当组件实例化的时候，这个方法替代了componentwiillmount（），而当接收到新的props的时候，该方法替代了componentwillreceiveProps（）和componentWillupdate（）。
13. CDN的特点及意义？
CDN详解：
CDN，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"，使用户可以就近取得所需的内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访问网站响应速度慢的问题。
CDN的作用：
实际上，内容分发布网络(CDN)是一种新型的网络构建方式，它是为能在传统的IP网发布宽带丰富媒体而特别优化的网络覆盖层；而从广义的角度，CDN代表了一种基于质量与秩序的网络服务模式。
CDN的特点：
1、CDN网站加速 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性
2、镜像服务 消除了不同运营商之间互联的瓶颈造成的影响，实现了跨运营商的网络加速，保证不同网络中的用户都能得到良好的访问质量。
3、远程加速 远程访问用户根据DNS负载均衡技术 智能自动选择Cache服务器，选择的Cache服务器，加快远程访问的速度
4、带宽优化 自动生成服务器的远程Mirror(镜像)cache服务器，远程用户访问时从cache服务器上读取数据，减少远程访问的带宽、分担网络流量、减轻原站点WEB服务器负载等功能。
5、集群抗攻击 广泛分布的CDN节点加上节点之间的智能冗于机制，可以有效地预防黑客入侵以及降低各种D.D.o.S攻击对网站的影响，同时保证较好的服务质量。
14. 什么是闭包，应用场景是什么？
意义
闭包让你可以在一个内层函数中访问到其外层函数的作用域。
使用场景
- 创建私有变量 - 延长变量的生命周期
注意：如果不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。
