【整理三】-阿里云开发者社区

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

在代码编写中，遇到的坑往往会有两种：

在不恰当的时机调用了不合适的代码；

在需要调用时，却忘记了调用。

getDerivedStateFromProps 容易编写反模式代码，使受控组件与非受控组件区分模糊。

shouldComponentUpdate 通过返回 true 或者 false 来确定是否需要触发新的渲染。主要用于性能优化。

如果在 componentWillUnmount 函数中忘记解除事件绑定，取消定时器等清理操作，容易引发 bug。

如果没有添加错误边界处理，当渲染发生异常时，用户将会看到一个无法操作的白屏，所以一定要添加。

2.说说React diff算法是怎么运作的？

diff算法可以看作是一种对比算法，对比的对象是新旧虚拟Dom。

diff算法可以找到新旧虚拟Dom之间的差异，但 diff算法中其实并不是只有对比虚拟Dom，还有根据对比后的结果更新真实Dom。

合理利用key可以有效减少真实Dom的变动，从而减少页面重绘和回流的频率，进而提高页面更新的效率。

3.调和阶段setState干了什么？

setState是异步还是同步:

合成事件中是异步

钩子函数中的是异步

原生事件中是同步

setTimeout中是同步

1）代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。

2）经过调和过程， React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；

3）在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；

4）在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

4.说说react的事件机制？

react自身实现了一套事件机制，包括事件的注册、事件的存储、事件的合成及执行等。

react 的所有事件并没有绑定到具体的dom节点上而是绑定在了document 上，然后由统一的事件处理程序来派发执行。

通过这种处理，减少了事件注册的次数，另外react还在事件合成过程中，对不同浏览器的事件进行了封装处理，抹平浏览器之间的事件差异。

5.说说redux的实现原理是什么？

将应用的状态统一放到state中，由store来管理state。

reducer的作用是返回一个新的state去更新store中对用的state。

按redux的原则,UI层每一次状态的改变都应通过action去触发，action传入对应的reducer 中，reducer返回一个新的state更新store中存放的state，这样就完成了一次状态的更新

subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dipatch发起后依次执行

可以添加中间件对提交的dispatch进行重写

6.如何使用css绘制一个三角形

clip-path 一个非常有意思的 CSS 属性。

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径。

使用 clip-path 可以将一个容器裁剪成任何我们想要的样子。

通过 3 个坐标点，实现一个多边形，多余的空间则会被裁减掉

div {

background: red;

clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);

}

7.什么是强缓存和协商缓存？

缓存：缓存是指浏览器(客户端)在本地磁盘中队访问过的资源保存的副本文件。

强缓存：强缓存是根据返回头中的 Expires 或者 Cache-Control 两个字段来控制的，都是表示资源的缓存有效时间。

协商缓存：协商缓存是由服务器来确定缓存资源是否可用。主要涉及到两对属性字段，都是成对出现的，即第一次请求的响应头带上某个字, Last-Modified 或者 Etag

8.说说javascript内存泄漏的几种情况？什么是内存泄漏？

由于疏忽或错误造成程序未能释放不在使用的内存，如果不及时释放，会造成内存占比越来越高，对项目中的内存会造成很大的影响

常见的内存泄漏情况？

1.意外的全局变量

2.意外的全局变量可能由 this 创建

3.定时器也常会造成内存泄露

4.闭包函数

5.没有清理对DOM元素的引用同样造成内存泄露

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

props是一个从外部传进组件的参数，由于React具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据，它是不可改变的，如果想要改变它，只能通过外部组件传入新的props来重新渲染子组件，否则子组件的props和展示形式不会改变，props除了可以传字符串，数字，还可以传递对象，数组甚至是回调函数

state主要作用是用于组件保存，控制及修改自己的状态，它只能在constructor中初始化，state是可以被改变的，state放改动的一些属性，比如点击选中，再点击取消，类似这种属性就放入带state中，注意：没有state的叫做无状态组件，多用props少用state，多写无状态组件，注意：修改state的值时，必须通过调用setState方法，当我们调用this.setState方法时,React会更新组件的数据状态，并且重新调用render方法

render方法在类组件抵用setState修改状态时；

函数组件通过useState hook或者通过useState修改状态时;

当我们的数据发生改变render方法就会触发

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

浏览器的地址栏输入URL并按下回车。
浏览器查找当前URL的DNS缓存记录。
DNS解析URL对应的IP。
根据IP建立TCP连接（三次握手）。
HTTP发起请求。
服务器处理请求，浏览器接收HTTP响应。
渲染页面，构建DOM树。
关闭TCP连接（四次挥手）

11.说说你对koa中洋葱模型的理解？

Koa是一个精简的node框架，被认为是第二代Node框架，

其最大的特点就是独特的中间件流程控制，是一个典型的洋葱模型，

它的核心工作包括下面两个方面：

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

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

12.说说Connect组件的原理是什么？

connect有四个参数, 但是后两个参数用到的很少.

connect 的第一个参数是 mapStateToProps

这个函数允许我们将 store 中的数据作为 props 绑定到组件上，

实现主要原理, 就是将需要绑定的props作为一个函数传过来,

在connect中传给mapStateToProps一个真实的store的数据

13. 通过原生js实现一个节流函数和防抖函数？

防抖函数（debounce）

功能：当事件被触发N秒之后再执行回调，如果在N秒内被触发，则重新计时。

节流函数（throttle）

功能：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

14.说说React jsx转换成真实DOM的过程？

JSX在被编译后，会变成一个针对 React.createElement 的调用。

ceateElement的大致流程为：

二次处理key、ref、self、source四个属性值；

遍历config，筛选可以提到props中的属性；

将children中的子元素推入childArray数组；

格式化defaultProps

将以上数据作为入参，发起ReactElement的调用，最终由ReactElement返回虚拟Dom对象

最终将虚拟Dom传入ReactDom.render函数中，将其转变为真实Dom

15.说说如何借助webpack来优化前端性能？

JS代码压缩

CSS代码压缩

Html文件代码压缩

文件大小压缩

图片压缩

Tree Shaking

代码分离

内联 chunk

16.Vue中自定义指令的理解，应用场景有哪些？

自定义指令分为：全局自定义指令，局部自定义指令。

全局自定义指令 Vue.directive('focus',{bind(el,binding){},inserted(){}})

局部自定义指令 directives: { dir1: { inserted(el,binding){} } }

参数1 ：指令所绑定的元素，可以用来直接操作 DOM 在每个函数中

参数2：是一个对象，这个对象身上，有钩子函数.

17.SPA单页面应用首屏加载速度慢解决方案

1、减少入口文件体积

常用的手段是路由懒加载，只有在解析路由时才会加载组件

2、静态资源本地缓存

后端返回资源：采用HTTP缓存

前端合理利用：localStorage

CDN静态资源缓存 react, react-dom, react-router-dom, axios

3、UI框架按需加载

在日常使用的UI框架，例如element-UI, antd, 我们要按需引入

import { Button } from ‘antd’

4、图片资源压缩

图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素

对于所有的图片资源，我们可以进行适当的压缩

对于页面上使用的icon，可以使用在线字体图标，或者雪碧图，将众多的小图标合并到一张图中，用以减轻http请求的压力

5、开启GZip压缩

拆完包后，我们再用gzip做一下压缩，安装compression-webpack-plugin

webpack中配置安装

18.说说git常用的命令有哪些？

git init // 初始化 在工作路径上创建主分支
git clone 地址 // 克隆远程仓库
git clone -b 分支名 地址 // 克隆分支的代码到本地
git status // 查看状态
git add 文件名 // 将某个文件存入暂存区
git add b c //把b和c存入暂存区
git add . // 将所有文件提交到暂存区
git add -p 文件名 // 一个文件分多次提交
git stash -u -k // 提交部分文件内容 到仓库 例如本地有3个文件 a b c 只想提交a b到远程仓库 git add a b 然后 git stash -u -k 再然后git commit -m “备注信息” 然后再push push之后 git stash pop 把之前放入堆栈的c拿出来 继续下一波操作
git commit -m “提交的备注信息” // 提交到仓库
若已经有若干文件放入仓库，再次提交可以不用git add和git commit -m “备注信息” 这2步， 直接用
git commit -am “备注信息” // 将内容放至仓库 也可用git commit -a -m “备注信息”
git clean -n // 列出打算清除的档案(首先会对工作区的内容进行提示)
git clean -f // 真正的删除
git clean -x -f // 连.gitignore中忽略的档案也删除
git status -sb (sb是 short branch) // 简洁的输出git status中的信息

19.谈谈你对BFC的理解？

官方定义：BFC（Block Formatting Context）块格式化上下文，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

简单的理解：BFC就是一个块级容器，它会隔离外部，让盒子里面的元素不影响外面的元素，也就是在搭建页面的时候，不影响外面的布局。

BFC特性：

属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
计算BFC高度时浮动元素也参于计算（重点）
BFC的区域不会与浮动容器发生重叠（重点）
BFC内的容器在垂直方向依次排列
元素的margin-left与其包含块的border-left相接触
BFC是独立容器，容器内部元素不会影响容器外部元素

20.CDN的特点及意义？

CDN 意为内容分发网络，是基于现有网络的智能虚拟网络，分布在世界各地的边缘服务器上。基本思路是避免互联网上可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输更快更稳定。

CDN 具有的主要功能

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

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

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

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

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

CDN 的特点

本地缓存加速:提高了企业网站(尤其是包含大量图片和静态页面的网站)的访问速度，大大提高了上述网站的稳定性。
镜像服务:消除了不同运营商之间互联瓶颈带来的影响，实现了跨运营商的网络加速，保证了不同网络的用户都能获得良好的接入质量。
远程加速:远程访问用户根据DNS负载均衡技术智能自动选择缓存服务器，选择最快的缓存服务器加速远程访问。
带宽优化:自动生成服务器的远程镜像缓存服务器。远程用户访问时，可以从缓存服务器读取数据，减少远程访问的带宽，分担网络流量，减轻原WEB服务器的负载。
集群抗攻击:广泛分布的CDN 节点加上节点间的智能冗余机制，可以有效防止黑客入侵，降低各种D.D.o.S攻击对网站的影响，同时保证更好的服务质量。

【整理三】