【整理四】

1、Vue组件通信？

• pops/$emit,父组件通过props向子组件传递数据，子组件通过$emit和父组件通信
• Ref/$refs,ref这个属性用在子组件上，指向子组件的实例，可以通过实例访问组件的数据和方法
• EventBus事件总线（$emit/on）,是用于父子组件，非父子组件之间的通信
• 依赖注入（provide/inject），用于父子组件之间的通信，provide和inject是vue中的两个钩子，provide是用来发送数据或方法，inject用来接收
• $parent/$children，使用$parent可以让组件访问父组件的实例，使用$children访问子组件
• $attrs/$listeners,$listeners属性是一个对象，实现组件之间的跨代通信，$attrs继承所有的父组件
• Vuex

2、说说你对vuex的理解？写出其原理的核心代码？

vuex是一个专为vue.js应用程序开发的状态管理模式，

采用集中式存储管理应用的所有组件的状态，

并以相应的规则保证状态以一种可预测的方式发生变化，vuex可以实现共享状态

//Store.js
Import Vue from ‘vue’
Import Vuex from ‘vuex’
Vue.use(Vuex)
Export default new Vuex.Store({
    State:{},
    Getters:{},
    Mutations:{},
    Actions:{},
    Modules:{}
})

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

• 去除constructor，constructor中并不推荐去处理初始化以外的逻辑，本身并不属于react生命周期，去除constructor可以让代码变得更简洁
• GetDerivedStateFromProps是当props发生变化的时候更新state，当props传入的时候，state发生变化的时候，forceUpdate被调用时，只要当父组件重新渲染GetDerivedStateFromProps就会被调用，是外部参数，可以直接复制到props到state,在props变化后修改state
• componentDidMount用于组件挂载完成时，发起网络请求，在render之后调用
• ShouldComponentUpdate通过true或者false来确定是否重新渲染，可以优化性能

4、说说你对React中虚拟dom的理解？

虚拟dom本质上是js对象，是真实dom的抽象，状态变更时记录新旧dom树的差异，

最后把差异更新到真实dom中去，react虚拟dom是在浏览器端用js实现了一套dom接口，

基于react进行开发时所有的dom构造都是通过虚拟dom进行，

当数据发生变化是，react重新构建整个dom树，

然后react将当前整个dom树和上一次的dom树进行对比，得到dom结构的区别

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

1. React会将传入的参数对象与组件当前的状态合并，然后触发调和过程
2. 经调和后，react会以相对高线的方式根据新的状态构建react元素树并更新页面渲染
3. 在react得到元素树之后，会计算出新旧dom树的结点差异
4. 在计算算法中，react能够相对精确地知道哪些位置发生了变化，保证的按需更新

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

• 父组件向子组件传递，父组件在调用子组件的时候，在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数
• 子传父，父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值
• 兄弟组件，父组件最为中间层实现数据的互通，通过父组件传递
• 父组件向后代组件传递，使用context提供组件之间通讯的一种方式，通过使用React.createContext创建context
• 非关系组件传递，将数据进行一个全局资源管理，实现通信

7、说说redux的实现原理是什么，写出其原理的核心代码？

Action把数据从应用传到store的有限载荷，

通过store.dispatch将action传到store

reducer指定了应用状态的变化如何响应actions并传送到store的

Store就是把action和reducer联系到一起的对象，

store本质上是状态树，保存所有对象的状态，

在redux中，所有数据被保存在一个store中，

在一个应用程序中只能有一个store对象，

当接收到一个antion，它将把action代理给相关的reducer

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

作用：连接React组件与Redux Store

首先connect之所以会成功，是因为Provider组件:

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

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

connect是一个高阶函数，首先传入mapStateToProps、mapDispatchToProps，

然后返回一个生产Component的函数(wrapWithConnect)，

然后再将真正的Component作为参数传入wrapWithConnect，

这样就生产出一个经过包裹的Connect组件

9、说说react 中jsx语法糖的本质？

Jsx全称JavaScript xml,jsx语法会在必要的时候使用，降低开发难度，

让js语言支持直接在js代码里编写xml标签结构的语法，

编译的过程会把类似的xml的jsx结构转换成js的对象结构,

react.js把js语法扩展成了jsx,事实上jsx就是js对象，

使用react和jsx要经过编译，jsx中标签必须要闭合，最外层只能有一个根元素,

style={{}},写入事件的时候要用驼峰法命名，jsx语法中的注释需要写成{/**/}

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

中间件介于应用系统和系统软件之间的一类软件，

使用系统软件提供基础服务，能够达到资源共享，功能共享

Redux-thunk用于异步操作

Redux-logger用于记录日志

所有中间件被放进了一个数组，然后嵌套执行，最后执行store.dispatch

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

• props是组件对外的接口，state是组件对内的接口，
• props组件是只读属性，组件内部不能直接修改props，
• state主要用于组件保存控制以及修改自己的状态，只能在constructor中初始化
• Props和state都是普通的js对象，都是用来保存信息的，控制组件的渲染输出

12、react新出来两个钩子函数是什么？和删掉的will系列有什么区别？

getDerivedStateFromProps

getSnapshotBeforeUpdate

componentWillReceiveProps实际行为与命名并不相符，由于不稳定性已由getDerivedStateFromProps代替；

而componentWillUpdate同等理由被getSnapshotBeforeUpdate代替

13、CDN的特点及意义？

CDN 意为内容分发网络，是基于现有网络的智能虚拟网络，分布在世界各地的边缘服务器上。

避免互联网上可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输更快更稳定。

CDN 的特点

• 本地缓存加速
• 镜像服务
• 远程加速
• 带宽优化
• 集群抗攻击

14、什么是闭包，应用场景是什么？

可以访问外部函数中的变量的内部函数，

在js中只有函数内部的子函数才能读取局部变量，

闭包就是将函数内部和函数外部连接起来的桥梁,让外部访问函数内部变量，

局部变量常驻在内存中，可以避免使用全局变量，防止全局变量污染，

会造成内存泄漏，每次执行外部函数的时候，

外部函数的引用地址不同，都会创建一个新的地址

应用场景：

函数嵌套

内部函数中引用了外部函数的变量

将内部函数作为返回值返回

15、从浏览器地址栏输入url到显示页面的步骤？

1. 查看浏览器缓存
2. DNS域名解析
3. 生成http请求报文
4. Tcp连接
5. 发送http请求
6. 服务器收到请求并返回数据
7. Tcp断开连接

16、介绍一下你对浏览器内核的理解？

浏览器内核主要分为渲染引擎和js引擎，

前者负责网页的内容，整理讯息，

后者解析和执行js实现网页的动态效果，

最开始两者没有区分的很明显，

后来js引擎越来越独立，内核就倾向于渲染引擎

17、清除浮动的几种方式？各自的优缺点？

1. 使用额外的标签，书写方便，但结构差
2. 父元素添加overflow：hidden，代码简洁，内容增多的时候容易造成高度塌陷，溢出隐藏
3. 为父元素设置高度，简单有效，但需要手动添加高度，如果后面高度发生变化，还需再次修改，比较繁琐
4. 使用after伪元素清楚浮动，符合闭合浮动，在一些浏览器上不支持使用after,，会触发hasLayout

18、说说你对koa中洋葱模型的理解？

Koa是一个精简的node框架，有着独特的中间件流程控制，

将node原生的req和res封装称为一个context对象，

基于async/await的中间件洋葱模型机制，

以next()函数为分割点，由外到内执行request逻辑，再由内到外执行，

主要借助compose方法

19、如果需要手动写动画，你认为最小时间间隔是多久，为什么？

0.1-0.3秒

加快浏览器的渲染，增强用户体验

20、说说你对webSocket的理解？

WebSocket是一种网络传输协议，位于OSI模型的应用层，

可在单个tcp连接上进行全双工通信，

能更好的节省服务器资源和带宽并达到实时通讯，

较少的控制开销，更强的实时性，保持创连接状态，

更好的二进制帧，支持扩展，更好的压缩效果