第三周：

1、Redux中的connect有什么作用？

connect负责连接React和Redux
获取state
connect 通过 context获取 Provider 中的 store，通过 store.getState() 获取整个store tree 上所有state
包装原组件
将state和action通过props的方式传入到原组件内部 wrapWithConnect 返回—个 ReactComponent 对象 Connect，Connect重新 render 外部传入的原组件 WrappedComponent ，并把 connect 中传入的 mapStateToProps，mapDispatchToProps与组件上原有的 props 合并后，通过属性的方式传给 WrappedComponent
监听store tree变化
connect缓存了store tree中state的状态，通过当前state状态 和变更前 state 状态进行比较，从而确定是否调用 this.setState()方法触发 Connect 及其子组件的重新渲染

2、调和阶段setState内部干了什么？

当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态,
这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）。
一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）。
通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。

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

Redux是一个全局状态管理的插件，通过创建并配置好store之后，使用特定方法来访问修改，其实现原理是在根组件进行传递状态，在任意组件中都可以访问到此状态，修改状态需要使用dispatch发送一个action信号，通过提前定义的reducer来修改状态。
view 调用store的dispatch 接受action传入的store，reduce进行state操作
view通过store提供的getState获取最新的数据

Store.js

import {
    
     createStore } from 'redux' 
import reducers from './reducer' 
export default createStore(reducers);

4、说说react声明周期中有哪些坑？如何避免？

下面7种情况最容易造成生命周期的坑：

• getDerivedStateFromProps 容易编写反模式代码，使受控组件和非受控组件区分模糊
• componentWillMount 在 React 中已被标记弃用，不推荐使用，主要的原因是因为新的异步架构会导致它被多次调用，所以网络请求以及事件绑定应该放到 componentDidMount 中
• componentWillReceiveProps 同样也被标记弃用，被 getDerivedStateFromProps 所取代，主要原因是性能问题。
• shouldComponentUpdate 通过返回 true 或者 false 来确定是否需要触发新的渲染。主要用于性能优化。
• componentWillUpdate 同样是由于新的异步渲染机制，而被标记废弃，不推荐使用，原先的逻辑可结合 getSnapshotBeforeUpdate 与 componentDidUpdate 改造使用。
• 如果在 componentWillUnmount 函数中忘记解除事件绑定，取消定时器等清理操作，容易引发 bug。
• 如果没有添加错误边界处理，当渲染发生异常时，用户将会看到一个无法操作的白屏，所以一定要添加。

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

react通过将组件编写的JSX映射到屏幕，以及组件中的状态发生了变化之后 React会将这些「变化」更新到屏幕上

JSX通过babel最终转化成React.createElement这种形式，例如：

<div>
  < img src="avatar.png" className="profile" />
  <Hello />
</div>

会被bebel转化成如下：

React.createElement(
  "div",
  null,
  React.createElement("img", {
    
    
    src: "avatar.png",
    className: "profile"
  }),
  React.createElement(Hello, null)
);

在转化过程中，babel在编译时会判断 JSX 中组件的首字母：

• 当首字母为小写时，其被认定为原生 DOM 标签，createElement 的第一个变量被编译为字符串
• 当首字母为大写时，其被认定为自定义组件，createElement 的第一个变量被编译为对象

最终都会通过RenderDOM.render(…)方法进行挂载，如下：

ReactDOM.render(<App />,  document.getElementById("root"));

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

理解：
中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的。
Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理

常用的中间件：
Redux-thunk、redux-logger、redux-promise

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

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

State是一个组件中的状态，状态就是数据，决定了当前组件的显示形态。
Props是组件通信中的一个属性，可以通过props来获取到组件传递的数据

相同点：

• 两者都是 JavaScript 对象
• 两者都是用于保存信息
• props 和 state 都能触发渲染更新(render)

区别：

• props 是外部传递给组件的，而 state 是在组件内被组件自己管理的，一般在 constructor 中初始化
• props 在组件内部是不可修改的，但 state 在组件内部可以进行修改
• state 是多变的、可以修改

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

getDerivedStateFromProps

// 注意，声明此钩子必须添加static
static getDerivedStateFromProps(props) {
    
    
	return props;
}

getSnapshotBeforeUpdate

这个钩子的意思其实就是在组件更新前获取快照，此方法一般结合componentDidUpdate使用，getSnapshotBeforeUpdate中返回的值将作为第三参数传递给componentDidUpdate

react一共四个will将来时的钩子，除了componentWillUnmout之外，componentWillMount、componentWillReceiveProps、componentWillUpdate这三个钩子均被废弃。说废弃也不是现在直接不能用了，在react 17版本中如果我们用了上述写法，官方会给出警告并推荐我们在这三个钩子前添加UNSAFE_前缀，比如UNSAFE_componentWillMount，且官方强调预计在后续版本可能只支持UNSAFE_前缀写法。

那为什么要废弃这三个呢？react中生命周期钩子虽然多，但事实上常用的就那么几个，比如新版废弃的钩子中可能除了componentWillReceiveProps常用一点外，另外两个使用率并不太高。按照官方的说法，这三个钩子很容易被误解和滥用，而且在未来react打算提供异步渲染能力，那么这几个钩子的不稳定很可能被放大，从而带来不可预测的bug

13、CDN的特点及意义?

CDN是什么?

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

基本思路:

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

CDN 表示将数据从原始服务器复制到其他服务器。当用户访问时，他们可以在复制了数据内容的服务器上进行访问。其目的是使用户能够更快更好地获取所需内容，解决网络拥塞情况，提高用户访问网站的响应速度。CDN 加速成本低，速度快，适合访问量比较大的网站。

CDN 具有的主要功能

• 节省骨干网带宽，降低带宽需求；

• 提供服务器端加速，解决大量用户访问导致的服务器过载问题；

• 服务提供商可以利用Web Cache技术将用户访问的网页和对象缓存在本地，这样对相同对象的访问就不需要占用骨干网的出口带宽，相应的用户访问网页的时间要求也增加了；

• 可以克服网站分布不均的问题，降低网站自身的建设和维护成本；

• 减少“通信风暴”的影响，提高网络访问的稳定性。

CDN 的特点

• 本地缓存加速:提高了企业网站(尤其是包含大量图片和静态页面的网站)的访问速度，大大提高了上述网站的稳定性。

• 镜像服务:消除了不同运营商之间互联瓶颈带来的影响，实现了跨运营商的网络加速，保证了不同网络的用户都能获得良好的接入质量。

• 远程加速:远程访问用户根据DNS负载均衡技术智能自动选择缓存服务器，选择最快的缓存服务器加速远程访问。

• 带宽优化:自动生成服务器的远程镜像缓存服务器。远程用户访问时，可以从缓存服务器读取数据，减少远程访问的带宽，分担网络流量，减轻原WEB服务器的负载。

• 集群抗攻击:广泛分布的CDN 节点加上节点间的智能冗余机制，可以有效防止黑客入侵，降低各种D.D.o.S攻击对网站的影响，同时保证更好的服务质量。

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

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。

创建私有变量不被清理的变量、私有变量、延长变量的生命周期、函数的柯里化

闭包在处理速度和内存消耗方面对脚本性能具有负面影响

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

• 解析url地址
• Dns查询
• 建立tcp三次握手连接
• 发送http请求
• 相应请求
• 页面渲染

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

简单来说，浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上，浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息

浏览器内核又可以分成两部分：渲染引擎和JS引擎

• 渲染引擎：负责获取网页的内容并显示，不同的浏览器内核对网页的解析渲染也不同
• JS引擎：负责解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果

起初渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核倾向于渲染引擎

常用内核
内核的种类很多，常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit

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

（1）、父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

（2）父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 。
优点：简单、代码少、浏览器支持好

（3） 结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 。
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

（4）设置伪类元素，定义clear：both属性
原理： 这个方式的原理和额外标签法的方式异曲同工，只是利用伪类向浮动元素的父盒子的后面添加了一个块级元素
优点：代码少、兼容性好、不会有额外的标签、简单
缺点：为了兼容低版本的浏览器，需要加上zoom: 1这个属性

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

Koa是一个精简的node框架，被认为是第二代Node框架，其最大的特点就是独特的中间件流程控制，是一个典型的洋葱模型，它的核心工作包括下面

• 将node原生的req和res封装成为一个context对象。
• 基于async/await的中间件洋葱模型机制。

洋葱模型它出名于独特的请求响应方式，就是像一个洋葱一样一层一层的请求到最后，在从最后一层层的返回响应。

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

多数显示器的默认频率是60hz，每秒刷新60次，所以理论上的最小间距是1/60*1000ms = 16.7ms；

20、说说你对webSocket的理解？

WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅。

客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输，服务器可以单独向客户端发送数据。

全双工
通信允许数据在两个方向上同时传输，它在能力上相当于两个单工通信方式的结合
例如指 A→B 的同时 B→A ，是瞬时同步的