面试（3）

shouldComponentUpdate是一个生命周期钩子函数，通过shouldComponentUpdate（），
1、主要用于性能优化(部分更新)
2、唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入
重新渲染的流程，在这里return false可以阻止组件的更新
3、因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着
重新渲 染的，因此需要在子组件的该生命周期中做判断。
此函数来比对state和props，确定是否要重新渲染，默认情况下返回true表示重新渲染，如果不希望组件
重新渲染，返回false即可。
大部分情况下，可以使用 React.PureComponent 来代替手写 shouldComponentUpdate。但它只进行浅比较，
所以当 props 或者 state 某种程度是可变的话，浅比较会有遗漏，那你就不能使用此函数了。

vue提供了一套为数据驱动视图更加方便的操作，这些操作被称之为指令系统，除了默认指令职位，
  vue也允许注册自定义指令。
  注册自定义指令有**全局注册和局部注册**，全局注册是通过vue.active方法进行注册。
  全局注册：通过vue.directive方法进行注册，第一个参数是指令名称，第二个参数是
  对象数据(或指令函数)。
  局部注册：通过在组件options选项中设置directive属性。
  自定义指令也像组件那样存在钩子函数：
    bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    inserted：被绑定元素插入到父节点时调用。
    update：所在组件的vnode更新时调用，可能发生在其子vnode更新之前。
    componentUpdated：指令所在的组件的vnode及其子vnode全部更新后调用。
    unbind：只调用一次，指令与元素解绑时调用。

表单防止重复提交
  图片懒加载
  一键copy功能

上拉加载和下拉刷新，这两种交互方式通常出现在移动端中，本质上等同于pc网页中的分页，只是交互方式不同。
上拉加载：本质是页面的触底，或者快要触底时的动作。
  涉及几个属性值：
  scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，
  它是一个变化的值。
  clientHeight:它是一个定值，表示屏幕可视区域的高度；
  scrollHeight：页面不能滚动时也是存在的,此时scrollHeight等于clientHeight。
  scrollHeight表示body所有元素的总长度(包括body元素自身的padding)
下拉刷新：
  下拉刷新的本质是页面本身置于顶部时，用户下拉时需要触发的动作
  关于下拉刷新的原生实现，主要分成三步：
  监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY；
  监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，
  并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值；
  监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，
  元素回到初始位置。

三次握手就是建立一个tcp连接时，需要客户端和服务器总共发送三个包。
  主要作用就是未来确认双方的接收能力和发送能力是否正常，指定自己的初始化序列号
  为可靠性传送做准备。
  第一次握手：客户端发送网络包，服务端收到了 这样服务端就能得出结论：
  客户端的发送能力、服务端的接收能力是正常的。
  第二次握手：服务端发包，客户端收到了 这样客户端就能得出结论：服务端的接收、发送能力，
  客户端的接收、发送能力是正常的。不过此时服务器并不能确认客户端的接收能力是否正常
  第三次握手：客户端发包，服务端收到了。 这样服务端就能得出结论：客户端的接收、发送能力正常，
  服务器自己的发送、接收能力也正常
  通过三次握手，就能确定双方的接收和发送能力是正常的。之后就可以正常通信了
为什么不是两次握手?
  如果是两次握手，1.发送端可以确定自己发送的信息能对方能收到，也能确定对方发的包自己能收到，
  但接收端只能确定对方发的包自己能收到 无法确定自己发的包对方能收到。
  2.两次握手的话, 客户端有可能因为网络阻塞等原因会发送多个请求报文，延时到达的请求又会与服务器
  建立连接,浪费掉许多服务器的资源.
四次挥手原因
  服务端在收到客户端断开连接Fin报文后，并不会立即关闭连接，而是先发送一个ACK包先告诉客户端收到
  关闭连接的请求，只有当服务器的所有报文发送完毕之后，才发送FIN报文断开连接，因此需要四次挥手

1、强缓存也叫本地缓存，状态码200，直接缓存到本地，不与服务器通信。
2、协商缓存：状态码304.会将一些资源信息返回给服务端，让服务端判断是否可以直接使用本地缓存，
   整个过程至少与服务器通信一次。

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。
Symbol函数前不能使用new命令，否则会报错。这是因为生成的Symbol是一个原始类型的值，不是对象
Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了在控制台显示，
或者转为字符串 时，比较容易区分。

在使用git进行版本管理的项目中，当完成一个特性的开发并将其合并到master分支时，会有两种方式。
git merge：将当前分支合并到指定分支，命令格式：git merge xxx
git rebase ：将当前分支移植到指定commit上。命令格式：git rebase --continue。
区别：
  都是合并历史记录，但是各自特性不同。
  merge：
  通过合并分支会增加一个merge commit ，然后将两个分支的历史联系起来，其实是一种
  非破坏性的操作，对现有分支不会以任何方式被更改，但是会导致历史记录相对复杂。
  rebase
  rebase会将整个分支移动到另一个分支上，有效地整合了所有分支上的提交
  主要的好处是历史记录更加清晰，是在原有提交的基础上将差异内容反映进去，消除了 git merge所需的
  不必要的合并提交。

reduxjs/toolkit：
  Redux 官方强烈推荐，开箱即用的高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，
  使用 Redux Toolkit 都可以优化你的代码，使其更可维护
react-redux：
  react官方推出的redux绑定库，react-redux将所有组件分为两大类：UI组件和容器组件，
  其中所有容器组件包裹着UI组件，构成父子关系。容器组件负责和redux交互，里面使用redux API
  函数，UI组件负责页面渲染，不使用任何redux API。容器组件会给UI组件传递redux中保存对的状态
  和操作状态的方法

第一种方法：额外标签法：在需要清除浮动的元素前面放一个空的div，并给这个空div设置属性 clear：both。
（优点：通俗易懂，方便）
缺点：增加了无意义的结构元素，语义化差。
第二种方法：给父元素设置 overflow 属性 为 hidden 或者 auto。
（优点：代码简洁）
第三种：利用伪元素清除有浮动的标签->在有浮动的标签前面添加一个块级元素。
（我们可以定义一个类 clearfix ，给这个类里面添加css属性，设置清除浮动的操作，
哪里需要清除浮动就给哪里设置这个类。
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.）。