网页换肤示例

{!num ? \"请求后端数据...\" : `后端数据是 ${num}`}

;\n}\n```\n\n这段代码，虽然这样组织可读性更高，毕竟可以将这个请求理解为函数的副作用。**但这并不是必要的**。完全可以不使用`useEffect`，直接使用`setTimeout`，并且它的回调函数中更新函数组件的 state。\n\n在 useEffect 的第二个参数中，我们可以指定一个数组，如果下次渲染时，数组中的元素没变，那么就不会触发这个副作用（可以类比 Class 类的关于 nextprops 和 prevProps 的生命周期）。好处显然易见，**相比于直接裸写在函数组件顶层，useEffect 能根据需要，避免多余的 render**。\n\n下面是一个不包括销毁副作用功能的 useEffect 的 TypeScript 实现：\n\n```ini\n// 还是利用 Array + Cursor的思路\nconst allDeps: any[][] = [];\nlet effectCursor: number = 0;\n\nfunction useEffect(callback: () => void, deps: any[]) {\n if (!allDeps[effectCursor]) {\n // 初次渲染：赋值 + 调用回调函数\n allDeps[effectCursor] = deps;\n ++effectCursor;\n callback();\n return;\n }\n\n const currenEffectCursor = effectCursor;\n const rawDeps = allDeps[currenEffectCursor];\n // 检测依赖项是否发生变化，发生变化需要重新render\n const isChanged = rawDeps.some(\n (dep: any, index: number) => dep !== deps[index]\n );\n if (isChanged) {\n callback();\n allDeps[effectCursor] = deps; // 感谢 juejin@carlzzz 的指正\n }\n ++effectCursor;\n}\n\nfunction render() {\n ReactDOM.render(, document.getElementById(\"root\"));\n effectCursor = 0; // 注意将 effectCursor 重置为0\n}\n\n```\n\n对于 useEffect 的实现，配合下面案例的使用会更容易理解。当然，你也可以在这个 useEffect 中发起异步请求，并在接受数据后，调用 state 的更新函数，不会发生爆栈的情况。\n\n```typescript jsx\nfunction App() {\n const [num, setNum] = useState < number > 0;\n const [num2] = useState < number > 1;\n\n // 多次触发\n // 每次点击按钮，都会触发 setNum 函数\n // 副作用检测到 num 变化，会自动调用回调函数\n useEffect(() => {\n console.log(\"num update: \", num);\n }, [num]);\n\n // 仅第一次触发\n // 只会在compoentDidMount时，触发一次\n // 副作用函数不会多次执行\n useEffect(() => {\n console.log(\"num2 update: \", num2);\n }, [num2]);\n\n return (\n

num: {num}

\n \n \n

\n );\n}\n\n```\n\nuseEffect 第一个回调函数可以返回一个用于销毁副作用的函数，相当于 Class 组件的 unmount 生命周期。这里为了方便说明，没有进行实现。\n\n参考文档：\n- https://juejin.cn/post/6844903975838285838\n",{"_54":660,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/285/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/285/timeline",{"_54":663,"_56":57,"_58":664,"_60":665,"_62":666,"_64":667,"_66":668,"_68":669,"_70":670,"_72":671,"_74":672,"_107":673,"_127":128,"_129":26,"_130":-5,"_131":676,"_133":677,"_155":148,"_149":679,"_151":680,"_154":-5,"_158":159,"_160":681,"_165":-5,"_166":682,"_168":683,"_180":685,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/278","https://api.github.com/repos/pro-collection/interview-question/issues/278/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/278/comments","https://api.github.com/repos/pro-collection/interview-question/issues/278/events","https://github.com/pro-collection/interview-question/issues/278",1662779556,"I_kwDOJGDC6c5jHACk",278,"大文件上传了解多少",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[674,675],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":296,"_64":297,"_58":298,"_66":299,"_68":300,"_70":301,"_72":302,"_118":303,"_143":678,"_145":305,"_147":148,"_127":128,"_149":306,"_151":307,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-11T15:43:37Z","2023-04-11T15:43:38Z",{"_162":148,"_163":148,"_164":148},"### 大文件分片上传\n\n如果太大的文件，比如一个视频1g 2g那么大，直接采用上面的栗子中的方法上传可能会出链接现超时的情况，而且也会超过服务端允许上传文件的大小限制，所以解决这个问题我们可以将文件进行分片上传，每次只上传很小的一部分比如2M。\n\n`Blob` 它表示原始数据, 也就是二进制数据，同时提供了对数据截取的方法 `slice`,而 `File` 继承了 `Blob` 的功能，所以可以直接使用此方法对数据进行分段截图。\n\n过程如下：\n\n* 把大文件进行分段比如2M，发送到服务器携带一个标志，暂时用当前的时间戳，用于标识一个完整的文件\n* 服务端保存各段文件\n* 浏览器端所有分片上传完成，发送给服务端一个合并文件的请求\n* 服务端根据文件标识、类型、各分片顺序进行文件合并\n* 删除分片文件\n\n客户端 JS 代码实现如下\n\n```js\nfunction submitUpload() {\n var chunkSize = 2 * 1024 * 1024;//分片大小 2M\n var file = document.getElementById('f1').files[0];\n var chunks = [], //保存分片数据\n token = (+new Date()),//时间戳\n name = file.name, chunkCount = 0, sendChunkCount = 0;\n\n //拆分文件像操作字符串一样\n if (file.size > chunkSize) {\n //拆分文件\n var start = 0, end = 0;\n while (true) {\n end += chunkSize;\n var blob = file.slice(start, end);\n start += chunkSize;\n\n //截取的数据为空则结束\n if (!blob.size) {\n //拆分结束\n break;\n }\n\n chunks.push(blob);//保存分段数据\n }\n } else {\n chunks.push(file.slice(0));\n }\n\n chunkCount = chunks.length;//分片的个数\n\n//没有做并发限制，较大文件导致并发过多，tcp 链接被占光，需要做下并发控制，比如只有4个在请求在发送\n\n for (var i = 0; i < chunkCount; i++) {\n var fd = new FormData(); //构造FormData对象\n fd.append('token', token);\n fd.append('f1', chunks[i]);\n fd.append('index', i);\n xhrSend(fd, function() {\n sendChunkCount += 1;\n if (sendChunkCount === chunkCount) {//上传完成，发送合并请求\n console.log('上传完成，发送合并请求');\n var formD = new FormData();\n formD.append('type', 'merge');\n formD.append('token', token);\n formD.append('chunkCount', chunkCount);\n formD.append('filename', name);\n xhrSend(formD);\n }\n });\n }\n}\n\nfunction xhrSend(fd, cb) {\n\n var xhr = new XMLHttpRequest(); //创建对象\n xhr.open('POST', 'http://localhost:8100/', true);\n xhr.onreadystatechange = function() {\n console.log('state change', xhr.readyState);\n if (xhr.readyState == 4) {\n console.log(xhr.responseText);\n cb && cb();\n }\n }\n xhr.send(fd);//发送\n}\n\n//绑定提交事件\ndocument.getElementById('btn-submit').addEventListener('click', submitUpload);\n```\n\n服务端 node 实现代码如下：合并文件这里使用 stream pipe 实现，这样更节省内存，边读边写入，占用内存更小，效率更高，代码见fnMergeFile方法。\n\n```js\n//二次处理文件，修改名称\napp.use((ctx) => {\n var body = ctx.request.body;\n var files = ctx.request.files ? ctx.request.files.f1 : [];//得到上传文件的数组\n var result = [];\n var fileToken = ctx.request.body.token;// 文件标识\n var fileIndex = ctx.request.body.index;//文件顺序\n\n if (files && !Array.isArray(files)) {//单文件上传容错\n files = [files];\n }\n\n files && files.forEach(item => {\n var path = item.path;\n var fname = item.name;//原文件名称\n var nextPath = path.slice(0, path.lastIndexOf('/') + 1) + fileIndex + '-' + fileToken;\n if (item.size > 0 && path) {\n //得到扩展名\n var extArr = fname.split('.');\n var ext = extArr[extArr.length - 1];\n //var nextPath = path + '.' + ext;\n //重命名文件\n fs.renameSync(path, nextPath);\n result.push(uploadHost + nextPath.slice(nextPath.lastIndexOf('/') + 1));\n }\n });\n\n if (body.type === 'merge') {//合并分片文件\n var filename = body.filename,\n chunkCount = body.chunkCount,\n folder = path.resolve(__dirname, '../static/uploads') + '/';\n\n var writeStream = fs.createWriteStream(`${folder}${filename}`);\n\n var cindex = 0;\n\n //合并文件\n function fnMergeFile() {\n var fname = `${folder}${cindex}-${fileToken}`;\n var readStream = fs.createReadStream(fname);\n readStream.pipe(writeStream, { end: false });\n readStream.on(\"end\", function() {\n fs.unlink(fname, function(err) {\n if (err) {\n throw err;\n }\n });\n if (cindex + 1 < chunkCount) {\n cindex += 1;\n fnMergeFile();\n }\n });\n }\n\n fnMergeFile();\n ctx.body = 'merge ok 200';\n }\n\n});\n```\n\n### 大文件上传断点续传\n\n在上面我们实现了文件分片上传和最终的合并，现在要做的就是如何检测这些分片，不再重新上传即可。这里我们可以在本地进行保存已上传成功的分片，重新上传的时候使用`spark-md5`来生成文件 hash，区分此文件是否已上传。\n\n- 为每个分段生成 hash 值，使用 `spark-md5` 库\n- 将上传成功的分段信息保存到本地\n- 重新上传时，进行和本地分段 hash 值的对比，如果相同的话则跳过，继续下一个分段的上传\n\n**方案一**：保存在本地 `indexDB/localStorage` 等地方，推荐使用 `localForage` 这个库 \n`npm install localforage`\n\n**客户端 JS 代码**：\n\n```js\n//获得本地缓存的数据\nfunction getUploadedFromStorage() {\n return JSON.parse(localforage.getItem(saveChunkKey) || \"{}\");\n}\n\n//写入缓存\nfunction setUploadedToStorage(index) {\n var obj = getUploadedFromStorage();\n obj[index] = true;\n localforage.setItem(saveChunkKey, JSON.stringify(obj));\n}\n\n//分段对比\n\nvar uploadedInfo = getUploadedFromStorage();//获得已上传的分段信息\n\nfor (var i = 0; i < chunkCount; i++) {\n console.log('index', i, uploadedInfo[i] ? '已上传过' : '未上传');\n\n if (uploadedInfo[i]) {//对比分段\n sendChunkCount = i + 1;//记录已上传的索引\n continue;//如果已上传则跳过\n }\n var fd = new FormData(); //构造FormData对象\n fd.append('token', token);\n fd.append('f1', chunks[i]);\n fd.append('index', i);\n\n (function(index) {\n xhrSend(fd, function() {\n sendChunkCount += 1;\n //将成功信息保存到本地\n setUploadedToStorage(index);\n if (sendChunkCount === chunkCount) {\n console.log('上传完成，发送合并请求');\n var formD = new FormData();\n formD.append('type', 'merge');\n formD.append('token', token);\n formD.append('chunkCount', chunkCount);\n formD.append('filename', name);\n xhrSend(formD);\n }\n });\n })(i);\n}\n```\n\n**方案2**：服务端用于保存分片坐标信息，返回给前端 \n\n需要服务端添加一个接口只是服务端需要增加一个接口。基于上面一个栗子进行改进，服务端已保存了部分片段，客户端上传前需要从服务端获取已上传的分片信息（上面是保存在了本地浏览器），本地对比每个分片的 hash 值，跳过已上传的部分，只传未上传的分片。 \n\n方法1是从本地获取分片信息,这里只需要将此方法的能力改为从服务端获取分片信息就行了。 \n\n\n\n",{"_54":684,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/278/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/278/timeline",{"_54":687,"_56":57,"_58":688,"_60":689,"_62":690,"_64":691,"_66":692,"_68":693,"_70":694,"_72":695,"_74":696,"_107":697,"_127":128,"_129":26,"_130":-5,"_131":706,"_133":707,"_155":148,"_149":709,"_151":710,"_154":-5,"_158":159,"_160":711,"_165":-5,"_166":712,"_168":713,"_180":715,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/260","https://api.github.com/repos/pro-collection/interview-question/issues/260/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/260/comments","https://api.github.com/repos/pro-collection/interview-question/issues/260/events","https://github.com/pro-collection/interview-question/issues/260",1659554529,"I_kwDOJGDC6c5i6srh",260,"介绍下 BFC、IFC、GFC 和 FFC？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[698,705],{"_66":699,"_68":700,"_54":701,"_113":702,"_115":703,"_117":26,"_118":704},5232524505,"LA_kwDOJGDC6c8AAAABN-H82Q","https://api.github.com/repos/pro-collection/interview-question/labels/CSS","CSS","A46719","CSS 相关问题",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":708,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-08T15:21:27Z","2023-04-08T15:21:28Z",{"_162":148,"_163":148,"_164":148},"### BFC（Block Formatting Contexts）块级格式化上下文\n\n#### 什么是BFC？\n\n`BFC` 全称：`Block Formatting Context`，名为 **块级格式化上下文**。\n\n`W3C`官方解释为：`BFC`它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，`Block Formatting Context`提供了一个环境，`HTML`在这个环境中按照一定的规则进行布局。\n\n#### 如何触发BFC？\n\n* 根元素或其它包含它的元素\n\n* 浮动 `float: left/right/inherit`\n\n* 绝对定位元素 `position: absolute/fixed`\n\n* 行内块`display: inline-block`\n\n* 表格单元格 `display: table-cell`\n\n* 表格标题 `display: table-caption`\n\n* 溢出元素 `overflow: hidden/scroll/auto/inherit`\n\n* 弹性盒子 `display: flex/inline-flex`\n\n#### BFC布局规则\n\n* 内部的Box会在垂直方向，一个接一个地放置。\n\n* Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。\n\n* 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。\n\n* BFC的区域不会与float box重叠。\n\n* BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。\n\n* 计算BFC的高度时，浮动元素也参与计算\n\n#### BFC应用场景\n\n#### 解决块级元素垂直方向margin重叠\n\n我们来看下面这种情况：\n\n```html\n\n\n

box1

box2

\n\n\n```\n\n按我们习惯性思维，上面这个box的`margin-bottom`是`60px`，下面这个box的`margin-top`也是`60px`，那他们垂直的间距按道理来说应该是`120px`才对。（可事实并非如此，我们可以来具体看一下）\n\n这种情况下的margin边距为两者的最大值，而不是两者相加，那么我们可以使用BFC来解决这种margin塌陷的问题。\n```html\n\n\n

nanjiu

南玖

\n\n\n```\n\n#### 解决高度塌陷问题\n\n我们再来看这种情况，内部box使用`float`脱离了普通文档流，导致外层容器没办法撑起高度，使得背景颜色没有显示出来。\n\n```html\n\n\n

nanjiu

南玖

\n\n\n```\n\n我们可以看到此时的外层容器的高度为0，导致背景颜色没有渲染出来，这种情况我们同样可以使用BFC来解决，可以直接为外层容器触发BFC，我们来看看效果：\n\n```html\n\n\n

nanjiu

南玖

\n\n\n```\n\n#### 清除浮动\n\n在早期前端页面大多喜欢用浮动来布局，但浮动元素脱离普通文档流，会覆盖旁边内容：\n\n```html\n\n\n

nanjiu

南玖

\n\n\n```\n\n我们可以通过触发后面这个元素形成BFC，从而来清楚浮动元素对其布局造成的影响\n\n```html\n\n\n

nanjiu

南玖

\n\n```\n\n\n### 什么是IFC？\n\n`IFC`全称：`Inline Formatting Context`，名为**行级格式化上下文**\n\n#### 如何触发IFC？\n\n* 块级元素中仅包含内联级别元素\n\n形成条件非常简单，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。\n\n#### IFC布局规则\n\n* 在一个IFC内，子元素是水平方向横向排列的，并且垂直方向起点为元素顶部。\n* 子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。\n* 在垂直方向上，子元素会以不同形式来对齐（vertical-align）\n* 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。\n* IFC中的`line box`一般左右边贴紧其包含块，但float元素会优先排列。\n* IFC中的`line box`高度由 CSS 行高计算规则来确定，同个`IFC`下的多个`line box`高度可能会不同。\n* 当 `inline boxes`的总宽度少于包含它们的`line box`时，其水平渲染规则由 `text-align` 属性值来决定。\n* 当一个`inline box`超过父元素的宽度时，它会被分割成多个`boxes`，这些`boxes`分布在多个`line box`中。如果子元素未设置强制换行的情况下，`inline box`将不可被分割，将会溢出父元素。\n\n#### IFC应用场景\n\n#### 元素水平居中\n\n当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。\n\n```html\n\n\n

\n string 1\n string 2\n

\n\n```\n\n#### 多行文本水平垂直居中\n\n创建一个IFC，然后设置其`vertical-align:middle`，其他行内元素则可以在此父元素下垂直居中。\n\n```html\n\n\n

\n string 1\n string 2\n

\n\n\n```\n\n### GFC（Grid Formatting Contexts）栅格格式化上下文\n\n#### 什么是GFC？\n\n`GFC`全称：`Grids Formatting Contexts`，名为**网格格式上下文**\n\n> 简介： CSS3引入的一种新的布局模型——Grids网格布局，目前暂未推广使用，使用频率较低，简单了解即可。 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定\"项目\"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成\"行\"和\"列\"，产生单元格，然后指定\"项目所在\"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。\n\n#### 如何触发GFC？\n\n当为一个元素设置`display`值为`grid`或者`inline-grid`的时候，此元素将会获得一个独立的渲染区域。\n\n#### GFC布局规则\n\n通过在`网格容器（grid container）`上定义`网格定义行（grid definition rows）`和`网格定义列（grid definition columns）`属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间（具体可以在MDN上查看）\n\n#### GFC应用场景\n\n#### 任意魔方布局\n\n这个布局使用用GFC可以轻松实现自由拼接效果，换成其他方法，一般会使用相对/绝对定位，或者flex来实现自由拼接效果，复杂程度将会提升好几个等级。\n\n```html\n\n\n

\n\n```\n\n### FFC（Flex Formatting Contexts）弹性格式化上下文\n\n#### 什么是FFC？\n\n`FFC`全称：`Flex Formatting Contexts`，名为**弹性格式上下文**\n\n> 简介： **CSS3引入了一种新的布局模型——flex布局。** flex是flexible box的缩写，一般称之为**弹性盒模型**。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕，使用Flex box布局实际上就是声明创建了FFC(自适应格式上下文)\n\n#### 如何触发FFC？\n\n当 `display` 的值为 `flex` 或 `inline-flex` 时，将生成弹性容器（Flex Containers）, 一个弹性容器为其内容建立了一个新的弹性格式化上下文环境（FFC）\n\n#### FFC布局规则\n\n* 设置为 `flex` 的容器被渲染为一个块级元素\n* 设置为 `inline-flex` 的容器被渲染为一个行内元素\n* 弹性容器中的每一个子元素都是一个弹性项目。弹性项目可以是任意数量的。弹性容器外和弹性项目内的一切元素都不受影响。简单地说，Flexbox 定义了弹性容器内弹性项目该如何布局\n\n\\*\\*⚠️注意：\\*\\*FFC布局中，float、clear、vertical-align属性不会生效。\n\n> Flex 布局是轴线布局，只能指定\"项目\"针对轴线的位置，可以看作是**一维布局**。Grid 布局则是将容器划分成\"行\"和\"列\"，产生单元格，然后指定\"项目所在\"的单元格，可以看作是**二维布局**。Grid 布局远比 Flex 布局强大。\n\n#### FFC应用场景\n\n这里只介绍它对于其它布局所相对来说更方便的特点，其实flex布局现在是非常普遍的，很多前端人员都喜欢用flex来写页面布局，操作方便且灵活，兼容性好。\n\n#### 自动撑开剩余高度/宽度\n\n看一个经典两栏布局：左边为侧边导航栏，右边为内容区域，用我们之前的常规布局，可能就需要使用到`css`的`calc`方法来动态计算剩余填充宽度了，但如果使用flex布局的话，只需要一个属性就能解决这个问题：\n\n**calc动态计算方法：**\n```html\n\n\n\t\t

box1

box2

\n\n\n```\n\n**使用FFC：**\n\n```html\n\n\n\t\t

box1

box2

\n\n```\n\n### 参考文档\n- https://juejin.cn/post/7072174649735381029\n",{"_54":714,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/260/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/260/timeline",{"_54":717,"_56":57,"_58":718,"_60":719,"_62":720,"_64":721,"_66":722,"_68":723,"_70":724,"_72":725,"_74":726,"_107":727,"_127":128,"_129":26,"_130":-5,"_131":730,"_133":731,"_155":140,"_149":733,"_151":734,"_154":-5,"_158":159,"_160":735,"_165":-5,"_166":736,"_168":737,"_180":739,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/245","https://api.github.com/repos/pro-collection/interview-question/issues/245/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/245/comments","https://api.github.com/repos/pro-collection/interview-question/issues/245/events","https://github.com/pro-collection/interview-question/issues/245",1650992187,"I_kwDOJGDC6c5iaCQ7",245,"react 中是如何实现下拉菜单场景，点击区域外关闭下拉组件？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[728,729],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":732,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-02T15:32:52Z","2023-09-15T06:29:39Z",{"_162":148,"_163":148,"_164":148},"在 React 中，要实现点击区域外关闭下拉组件，一般可以使用以下几种方法：\n\n1. 在下拉组件的根元素上监听点击事件，当点击区域不在下拉组件内时，触发关闭下拉组件的操作。这可以通过添加全局点击事件，然后在事件处理程序中判断点击区域是否在下拉组件内来实现。具体实现如下：\n\n```jsx\nimport React, { useRef, useEffect } from 'react';\n\nfunction DropdownMenu(props) {\n const menuRef = useRef(null);\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (menuRef.current && !menuRef.current.contains(event.target)) {\n props.onClose();\n }\n }\n\n document.addEventListener('click', handleClickOutside);\n return () => {\n document.removeEventListener('click', handleClickOutside);\n };\n }, [props]);\n\n return (\n

\n {/* 下拉菜单内容 */}\n

\n );\n}\n```\n\n2. 在下拉组件的父元素上监听点击事件，当点击区域不在下拉组件及其父元素内时，触发关闭下拉组件的操作。具体实现如下：\n\n```jsx\nimport React, { useState } from 'react';\n\nfunction Dropdown(props) {\n const [isOpen, setIsOpen] = useState(false);\n\n function toggleDropdown() {\n setIsOpen(!isOpen);\n }\n\n function handleClickOutside(event) {\n if (!event.target.closest('.dropdown')) {\n setIsOpen(false);\n }\n }\n\n return (\n

\n \n {isOpen && setIsOpen(false)} />}\n

\n );\n}\n```\n\n在上述代码中，我们在 `Dropdown` 组件的根元素上添加了点击事件处理程序 `handleClickOutside`，当点击区域不在 `.dropdown` 元素内时，触发关闭下拉组件的操作。由于 `DropdownMenu` 组件位于 `Dropdown` 组件内部，因此当点击下拉菜单时，事件会冒泡到 `Dropdown` 组件，从而不会触发关闭操作。\n\n3. 除了上述方法外，还可以使用 `useRef` 钩子来监听鼠标点击事件。具体实现可以在下拉组件的根元素上使用 `ref` 属性来获取 DOM 元素的引用，然后在组件挂载时使用 `addEventListener` 方法绑定 `mousedown` 事件，最后在事件处理函数中判断鼠标点击的位置是否在下拉组件内，如果不在，则关闭下拉组件。\n\n示例代码如下：\n\n```jsx\nimport { useRef, useState, useEffect } from 'react';\n\nfunction Dropdown() {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef(null);\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [dropdownRef]);\n\n return (\n

\n \n {isOpen && (\n

Option 1
Option 2
Option 3

\n )}\n

\n );\n}\n```\n\n这种方法可以在组件内部处理点击事件，不需要将事件处理函数传递给父组件。但是相对而言代码会比较繁琐，需要手动处理事件绑定和解绑。\n\n",{"_54":738,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/245/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/245/timeline",{"_54":741,"_56":57,"_58":742,"_60":743,"_62":744,"_64":745,"_66":746,"_68":747,"_70":748,"_72":749,"_74":750,"_107":751,"_127":128,"_129":26,"_130":-5,"_131":754,"_133":755,"_155":148,"_149":757,"_151":758,"_154":-5,"_158":159,"_160":759,"_165":-5,"_166":760,"_168":761,"_180":763,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/243","https://api.github.com/repos/pro-collection/interview-question/issues/243/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/243/comments","https://api.github.com/repos/pro-collection/interview-question/issues/243/events","https://github.com/pro-collection/interview-question/issues/243",1650984812,"I_kwDOJGDC6c5iaAds",243,"[webpack] webpack 是如何给 web 应用注入环境变量的，原理是啥",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[752,753],{"_66":352,"_68":353,"_54":354,"_113":355,"_115":356,"_117":26,"_118":357},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":296,"_64":297,"_58":298,"_66":299,"_68":300,"_70":301,"_72":302,"_118":303,"_143":756,"_145":305,"_147":148,"_127":128,"_149":306,"_151":307,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-02T15:11:38Z","2023-04-02T15:11:39Z",{"_162":148,"_163":148,"_164":148},"Webpack 可以通过 DefinePlugin 插件给 web 应用注入环境变量。该插件会在编译过程中替换掉代码中指定的变量，以实现在运行时替换成环境变量的值。\n\n在 webpack 的配置文件中，需要先引入该插件，然后将需要注入的环境变量通过该插件进行配置。例如：\n\n```javascript\nconst webpack = require('webpack');\n\nmodule.exports = {\n // 其他配置\n plugins: [\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: JSON.stringify('production')\n },\n API_URL: JSON.stringify('http://api.example.com')\n })\n ]\n};\n```\n\n上述配置中，定义了两个需要注入的变量，分别是 `process.env.NODE_ENV` 和 `API_URL`。其中，`process.env.NODE_ENV` 是一个常用的环境变量，用来标识当前是开发环境还是生产环境；`API_URL` 是一个自定义的环境变量，用来存储 API 的地址。\n\n在代码中使用这些环境变量时，只需要直接引用即可：\n\n```javascript\nif (process.env.NODE_ENV === 'production') {\n console.log('当前为生产环境');\n}\n\nfetch(API_URL + '/users')\n .then(response => response.json())\n .then(data => console.log(data));\n```\n\nWebpack 在编译时会将这些变量替换成对应的值，例如：\n\n```javascript\nif ('production' === 'production') {\n console.log('当前为生产环境');\n}\n\nfetch('http://api.example.com' + '/users')\n .then(response => response.json())\n .then(data => console.log(data));\n```\n\n通过这种方式，我们就可以在代码中方便地使用环境变量，同时保证了在不同环境下都能正确地使用相应的变量值。",{"_54":762,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/243/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/243/timeline",{"_54":765,"_56":57,"_58":766,"_60":767,"_62":768,"_64":769,"_66":770,"_68":771,"_70":772,"_72":773,"_74":774,"_107":775,"_127":128,"_129":26,"_130":-5,"_131":778,"_133":779,"_155":148,"_149":781,"_151":782,"_154":-5,"_158":159,"_160":783,"_165":-5,"_166":784,"_168":785,"_180":787,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/218","https://api.github.com/repos/pro-collection/interview-question/issues/218/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/218/comments","https://api.github.com/repos/pro-collection/interview-question/issues/218/events","https://github.com/pro-collection/interview-question/issues/218",1644123075,"I_kwDOJGDC6c5h_1PD",218,"对象引用类问题：以下代码的执行结果是什么，并解释原因",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[776,777],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":780,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-28T14:50:37Z","2023-03-28T14:50:38Z",{"_162":148,"_163":148,"_164":148},"### 代码如下，请问执行结果\n```js\nvar a = {n: 1};\nvar b = a;\na.x = a = {n: 2};\n\nconsole.log(a.x) \t\nconsole.log(b.x)\n```\n\n### 执行结果和原因\n\n结果是 `undefined` 和 `{n: 2}`。\n\n这段代码可以分解为以下步骤：\n\n1. 创建一个对象 `a`，属性 `n` 的值为 `1`。\n2. 将变量 `b` 指向 `a`，`b` 现在也引用了这个对象。\n3. 执行赋值语句 `a.x = a = {n: 2}`，其中 `a.x` 引用的是对象 `a` 的 `x` 属性，但是此时 `a` 的值被重新赋值为一个新的对象 `{n: 2}`。\n4. 所以现在 `a` 引用的是 `{n: 2}`，而 `b` 仍然引用原始的对象 `{n: 1}`，且其 `x` 属性被赋值为 `{n: 2}`。\n5. 所以 `console.log(a.x)` 结果为 `undefined`，因为 `a` 引用的对象没有 `x` 属性；而 `console.log(b.x)` 结果为 `{n: 2}`，因为 `b` 引用的对象的 `x` 属性被赋值为 `{n: 2}`。\n",{"_54":786,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/218/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/218/timeline",{"_54":789,"_56":57,"_58":790,"_60":791,"_62":792,"_64":793,"_66":794,"_68":795,"_70":796,"_72":797,"_74":798,"_107":799,"_127":128,"_129":26,"_130":-5,"_131":802,"_133":803,"_155":148,"_149":805,"_151":806,"_154":-5,"_158":159,"_160":807,"_165":-5,"_166":808,"_168":809,"_180":811,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/216","https://api.github.com/repos/pro-collection/interview-question/issues/216/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/216/comments","https://api.github.com/repos/pro-collection/interview-question/issues/216/events","https://github.com/pro-collection/interview-question/issues/216",1644105792,"I_kwDOJGDC6c5h_xBA",216,"实现 (5).add(3).minus(2) 功能",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[800,801],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":804,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-28T14:41:08Z","2023-03-28T14:41:09Z",{"_162":148,"_163":148,"_164":148},"可以通过在 Number 原型上定义 add 和 minus 方法来实现该功能，代码如下：\n\n```javascript\nNumber.prototype.add = function(num) {\n return this + num;\n};\n\nNumber.prototype.minus = function(num) {\n return this - num;\n};\n\nconsole.log((5).add(3).minus(2)); // 输出6\n```\n\n上述代码中，通过在 Number.prototype 上定义 add 和 minus 方法，实现了将数字类型的值转换为 Number 对象，并且可以链式调用这两个方法。最终返回的结果是一个数值类型的值。",{"_54":810,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/216/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/216/timeline",{"_54":813,"_56":57,"_58":814,"_60":815,"_62":816,"_64":817,"_66":818,"_68":819,"_70":820,"_72":821,"_74":822,"_107":823,"_127":128,"_129":26,"_130":-5,"_131":826,"_133":827,"_155":148,"_149":829,"_151":830,"_154":-5,"_158":159,"_160":831,"_165":-5,"_166":832,"_168":833,"_180":835,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/209","https://api.github.com/repos/pro-collection/interview-question/issues/209/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/209/comments","https://api.github.com/repos/pro-collection/interview-question/issues/209/events","https://github.com/pro-collection/interview-question/issues/209",1642284080,"I_kwDOJGDC6c5h40Qw",209,"[Redux] 为什么 Redux 的 reducer 中不能做异步操作？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[824,825],{"_66":430,"_68":431,"_54":432,"_113":433,"_115":434,"_117":26,"_118":435},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":296,"_64":297,"_58":298,"_66":299,"_68":300,"_70":301,"_72":302,"_118":303,"_143":828,"_145":305,"_147":148,"_127":128,"_149":306,"_151":307,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-27T15:06:54Z","2023-03-27T15:06:55Z",{"_162":148,"_163":148,"_164":148},"Redux 的 reducer 是纯函数，它的作用是接收一个旧的状态和一个操作，返回一个新的状态，是一个纯粹的状态转换函数，因此在 reducer 中不能执行异步操作，否则会破坏 reducer 的纯函数特性。如果在 reducer 中执行异步操作，会导致 reducer 不可预测和不可重现，因为异步操作的结果是不确定的，而 reducer 必须保证在相同的输入条件下，产生相同的输出结果。同时，在 reducer 中执行异步操作可能会导致应用的状态不一致或者有延迟的问题。\n\n为了解决这个问题，Redux 提供了中间件的机制，比如 `redux-thunk`、`redux-saga` 等，可以在中间件中进行异步操作，然后再将异步操作的结果传递给 reducer 进行状态更新。这样就可以避免在 reducer 中执行异步操作，保证 reducer 的纯函数特性，同时也可以完成异步操作的需求。",{"_54":834,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/209/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/209/timeline",{"_54":837,"_56":57,"_58":838,"_60":839,"_62":840,"_64":841,"_66":842,"_68":843,"_70":844,"_72":845,"_74":846,"_107":847,"_127":128,"_129":26,"_130":-5,"_131":850,"_133":851,"_155":148,"_149":853,"_151":854,"_154":-5,"_158":159,"_160":855,"_165":-5,"_166":856,"_168":857,"_180":859,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/208","https://api.github.com/repos/pro-collection/interview-question/issues/208/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/208/comments","https://api.github.com/repos/pro-collection/interview-question/issues/208/events","https://github.com/pro-collection/interview-question/issues/208",1642277858,"I_kwDOJGDC6c5h4yvi",208,"使用迭代的方式实现 flatten 函数？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[848,849],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":852,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-27T15:03:15Z","2023-03-27T15:03:48Z",{"_162":148,"_163":148,"_164":148},"可以使用迭代的方式实现 `flatten` 函数，具体思路如下：\n\n1. 创建一个新数组 `result` 来存放结果。\n2. 创建一个栈 `stack`，将原数组作为第一个元素压入栈中。\n3. 当栈不为空时，取出栈顶元素，如果该元素是一个数组，则将其展开后的每个元素压入栈中。\n4. 如果该元素不是一个数组，则将其加入到 `result` 中。\n5. 重复步骤 3 和 4，直到栈为空。\n\n下面是代码实现：\n\n```javascript\nfunction flatten(array) {\n const result = [];\n const stack = [array];\n\n while (stack.length > 0) {\n const item = stack.pop();\n\n if (Array.isArray(item)) {\n for (let i = item.length - 1; i >= 0; i--) {\n stack.push(item[i]);\n }\n } else {\n result.push(item);\n }\n }\n\n return result.reverse();\n}\n```\n\n这里使用了一个技巧，就是在将数组元素压入栈中时，从数组的末尾开始遍历，这样就可以保证压入栈中的顺序和展开后的顺序是一致的，最后再将结果翻转一下即可。",{"_54":858,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/208/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/208/timeline",{"_54":861,"_56":57,"_58":862,"_60":863,"_62":864,"_64":865,"_66":866,"_68":867,"_70":868,"_72":869,"_74":870,"_107":871,"_127":128,"_129":26,"_130":-5,"_131":874,"_133":875,"_155":148,"_149":877,"_151":878,"_154":-5,"_158":159,"_160":879,"_165":-5,"_166":880,"_168":881,"_180":883,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/207","https://api.github.com/repos/pro-collection/interview-question/issues/207/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/207/comments","https://api.github.com/repos/pro-collection/interview-question/issues/207/events","https://github.com/pro-collection/interview-question/issues/207",1642269410,"I_kwDOJGDC6c5h4wri",207,"使用虚拟DOM 一定会比直接操作真实 DOM 快吗？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[872,873],{"_66":352,"_68":353,"_54":354,"_113":355,"_115":356,"_117":26,"_118":357},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":296,"_64":297,"_58":298,"_66":299,"_68":300,"_70":301,"_72":302,"_118":303,"_143":876,"_145":305,"_147":148,"_127":128,"_149":306,"_151":307,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-27T14:59:24Z","2023-03-27T14:59:28Z",{"_162":148,"_163":148,"_164":148},"大家惯有的思维模式下，我们普遍的认为，虚拟DOM一定会比原生DOM要快的多。\n\n但实际上并不是这样。\n\n**仅从React的角度来说 : React的官网可从来都没有说过虚拟DOM会比原生操作DOM更快。**\n\n虚拟DOM和原生操作DOM谁更快这个问题。如果要我来回答的话，**一定是原生DOM比虚拟DOM更快性能更好。**\n\n值得注意的是，**虚拟DOM并不是比原生DOM快，更确切的来说，虚拟DOM是比操作不当的原生DOM快**。实际上，如果对原生DOM的操作得当的话，原生DOM的性能一定优于虚拟DOM。\n\n我们来剖析一下。\n\n### 虚拟DOM为什么而存在\n\n**其最核心的思想是提升开发效率而非提升性能**\n\n使用 React/Vue 这些框架的时候，我们不需要去考虑对DOM的操作，只需要关心数据的改变。我们以前还在使用JQ的时候，数据改变之后我们需要调用`$(\"#id\").append(node)`等操作去手动追加DOM。而在使用React/Vue之后，我们只需要关心数据的改变。至于对DOM的一系列动作，在我们的数据改变之后，React/Vue会为我们代劳。这极大程度的提升了我们的开发效率。也是React/Vue的核心思想和初衷。\n\n至于很多人都说，虚拟DOM会比操作原生DOM更快，这个说法并不全面。比如，**首次渲染或者所有节点都需要进行更新的时候。这个时候采用虚拟DOM会比直接操作原生DOM多一重构建虚拟DOM树的操作。这会更大的占用内存和延长渲染时间。**\n\n#### 举个例子\n\n**首次渲染👇不采用虚拟DOM的步骤**\n\n1. 浏览器接受绘制指令\n2. 创建所有节点\n\n**首次渲染👇采用虚拟DOM的步骤**\n\n1. 浏览器接受绘制指令\n2. 创建虚拟DOM\n3. 创建所有节点\n\n不难发现，在首次渲染的时候，采用虚拟DOM会比不采用虚拟DOM要多一个**创建虚拟DOM**的步骤。\n\n> 注意:虚拟DOM的存在，并不是免费的，比对新旧虚拟DOM树的差异会带来一定的性能开销。\n\n**虚拟DOM的优势在于我们更新节点时候。它会检查哪些节点需要更新。尽量复用已有DOM，减少DOM的删除和重新创建。并且这些操作我们是可以通过自己手动操作javascript底层api实现的。只是我们手动操作会非常耗费我们的时间和精力。这个工作由虚拟DOM代劳，会让我们开发更快速便捷。**\n\n#### 举个例子👇\n\n在采用虚拟DOM的前提下\n\n假设我们有节点A，下辖两个子节点B/C.\n\n然后我们删除了节点C\n\n这个时候会有两棵虚拟DOM树，\n\n一颗是修改前的，A->B/C。\n\n另一颗是修改后的A->B。\n\n`diff算法会去比对两颗树的差异`，然后发现A->B没有更改，那么A->B节点保留，C节点执行删除动作。\n\n那么，A->B两个节点的删除和创建渲染操作就被省略了。\n\n如果不采用虚拟DOM的话。使用JQ那时候的模板.\n\n我们可能会把A->B/C三个节点全部删除.\n\n再全都重新创建。而A->B是完全没有改动的。\n\n他们的删除和创建则完全不必要。\n\n### 框架的意义\n\n我们需要知道:不论是React还是Vue或者是Angular。这些框架本身，都是基于原生的基础上创造的。它们，底层依赖的还是javascript，并不是一门新的语言。在他们的底层逻辑下。我们使用框架所做出的一切行为，都会被框架转化为对原生DOM的操作。**框架，只是一个转化语法的工具。**\n\n既然原生DOM可以创造出这些框架。当然我们使用原生DOM自然是可以写出比这些框架更好的性能。\n\n但是:为什么对原生DOM进行操作的性能明明可以比使用框架更好。为什么大家都在使用框架，而没有人去直接对原生DOM进行操作。\n\n这背后涉及`成本`和`普适性`。\n\n如果我们直接去操作真实DOM,当然，我们可以做到在性能上比虚拟DOM更快。但问题是，技术水准能做到这个地步的人，又有多少人呢。不说比虚拟DOM快。即使是做到和虚拟DOM不分上下的性能，拥有这种水平的前端玩家，也是寥寥无几。**基于这样的客观情况下，框架的出现解决了这个问题。**\n\n框架存在的意义 : 在为我们提供只需要关注数据的前提下。框架本身已经做好了底层原理上的性能优化（包括但不限于,对DOM的调用,算法上的优化）已经是高度封装。这样就可以让我们使用一些简单的较为容易理解的技术去做我们原本做不到的事情。这其实就像调用网上的第三方包，某一个功能，自己写是写不出来，写出来性能也不会很好。但是同样的功能，我们去网上引入其他大神已经封装完成的第三方包。我们就会用，功能就可以实现并且性能上也过得去。\n\n如果让大家直接对DOM进行操作完成比框架更优秀的性能。这绝不是大多数人可以做到的。让大多数可以接受，框架需要做的，就是让大多数人使用尽量使用简单的技术，完成相对困难的操作。这是`普适性`。\n\n并且，如果完成同一个性能效果，需要我们去*精通原生javascript*和*学习框架上的一些简单的API和结构*。明显后者的学习成本更低。如果说使用框架我们所能完成的某一阶段的性能所需要的学习成本是2个月的话。那么学习javascript完成同一阶段的性能可能需要一年。\n\n框架的初衷就是让用户使用尽量简单的技术，完成相对复杂的工作并提升一定的性能 *（这其中包括但不限于:可维护性，可复用性，渲染效率等）* 。这样，即使我们的水平不是很高，使用框架以后。项目在性能上也能过得去。\n\n# 总结\n\n1. 虚拟DOM不一定会比操作原生DOM更快。\n2. 虚拟DOM的优势在于节点进行改动的时候尽量减少开销\n3. React从来没说过虚拟DOM会比原生更快。\n4. 框架的本质是提升开发效率，让我们的注意力更集中于数据\n",{"_54":882,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/207/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/207/timeline",{"_54":885,"_56":57,"_58":886,"_60":887,"_62":888,"_64":889,"_66":890,"_68":891,"_70":892,"_72":893,"_74":894,"_107":895,"_127":128,"_129":26,"_130":-5,"_131":898,"_133":899,"_155":148,"_149":901,"_151":902,"_154":-5,"_158":159,"_160":903,"_165":-5,"_166":904,"_168":905,"_180":907,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/205","https://api.github.com/repos/pro-collection/interview-question/issues/205/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/205/comments","https://api.github.com/repos/pro-collection/interview-question/issues/205/events","https://github.com/pro-collection/interview-question/issues/205",1640927884,"I_kwDOJGDC6c5hzpKM",205,"全局作用域中，用 const 和 let 声明的变量不在 window 上，那到底在哪里？如何去获取？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[896,897],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":262,"_64":263,"_58":264,"_66":265,"_68":266,"_70":185,"_72":267,"_118":268,"_143":900,"_145":270,"_147":148,"_127":128,"_149":271,"_151":272,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T14:10:46Z","2023-03-26T14:11:39Z",{"_162":148,"_163":148,"_164":148},"用 `const` 或 `let` 声明的变量不会挂在在 `window` 对象上，而是在一个称为块级作用域（block scope）的作用域内。这个作用域可以是一个函数、一个代码块（比如 `{}` 之间的语句），或者全局作用域。\n\n在块级作用域中声明的变量无法通过 `window` 对象访问，只能在当前作用域内访问。如果要在全局作用域中访问这个变量，需要显式地将它添加到 `window` 对象上。\n\n以下是一个例子：\n\n```javascript\n{\n const foo = 'bar';\n let baz = 'qux';\n var quux = 'corge';\n}\n\nconsole.log(window.foo); // undefined\nconsole.log(window.baz); // undefined\nconsole.log(window.quux); // 'corge'\n```\n\n在上面的例子中，`foo` 和 `baz` 声明在一个代码块内，因此它们不会挂在在 `window` 对象上。而 `quux` 声明使用了 `var`，因此它会被挂在在 `window` 对象上。\n\n如果我们希望在全局作用域中访问 `foo` 和 `baz`，可以将它们手动添加到 `window` 对象上：\n\n```javascript\n{\n const foo = 'bar';\n let baz = 'qux';\n var quux = 'corge';\n\n window.foo = foo;\n window.baz = baz;\n}\n\nconsole.log(window.foo); // 'bar'\nconsole.log(window.baz); // 'qux'\nconsole.log(window.quux); // 'corge'\n```\n\n但是，在实际编程中，最好尽量避免将变量挂在在 `window` 对象上，以避免命名冲突和污染全局命名空间。",{"_54":906,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/205/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/205/timeline","pagination",{"_910":140,"_162":140},"value","actionData","errors"]