\n \n \n

\n );\n}\n\nconst Child = React.forwardRef((props, ref) => {\n const doSomething = () => {\n console.log('Doing something...');\n }\n\n // 将ref引用绑定到组件的实例\n React.useImperativeHandle(ref, () => ({\n doSomething\n }));\n\n return

Child Component

;\n});\n```\n\n2. 获取DOM元素：通过ref可以获取组件渲染后的DOM元素，并进行操作。\n\n```jsx\nimport React, { useRef } from 'react';\n\nfunction MyComponent() {\n const inputRef = useRef(null);\n\n const handleClick = () => {\n inputRef.current.focus();\n }\n\n return (\n

\n \n \n

\n );\n}\n```\n\n3. 动态引用：通过ref可以在函数组件中动态地引用不同的组件或DOM元素。\n\n```jsx\nimport React, { useRef } from 'react';\n\nfunction MyComponent() {\n const ref = useRef(null);\n const condition = true;\n\n const handleClick = () => {\n ref.current.doSomething();\n }\n\n return (\n

\n {condition ? (\n \n ) : (\n \n )}\n \n

\n );\n}\n```\n\n这些例子展示了一些使用React的ref的常见场景，但实际上，ref的用途非常灵活，可以根据具体需求进行扩展和应用。\n",{"_54":332,"_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/477/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/477/timeline",{"_54":335,"_56":57,"_58":336,"_60":337,"_62":338,"_64":339,"_66":340,"_68":341,"_70":342,"_72":343,"_74":344,"_107":345,"_127":128,"_129":26,"_130":-5,"_131":348,"_133":349,"_155":148,"_149":351,"_151":352,"_154":-5,"_158":159,"_160":353,"_165":-5,"_166":354,"_168":355,"_180":357,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/435","https://api.github.com/repos/pro-collection/interview-question/issues/435/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/435/comments","https://api.github.com/repos/pro-collection/interview-question/issues/435/events","https://github.com/pro-collection/interview-question/issues/435",1748160079,"I_kwDOJGDC6c5oMs5P",435,"什么是伪数组、什么是类数组【热度: 1,510】",{"_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},[346,347],{"_66":223,"_68":224,"_54":225,"_113":226,"_115":227,"_117":26,"_118":228},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":232,"_64":233,"_58":234,"_66":235,"_68":236,"_70":237,"_72":238,"_118":239,"_143":350,"_145":241,"_147":148,"_127":128,"_149":242,"_151":243,"_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-06-08T15:31:01Z","2023-06-08T15:31:15Z",{"_162":148,"_163":148,"_164":148},"**关键词**：伪数组、类数组\n\n伪数组（Array-like）和类数组（Array-like Object）都是描述一种类似数组的对象结构，它们在外观和行为上类似于数组，但实际上不是真正的数组。\n\n伪数组（Array-like）：\n- 伪数组是指具有类似数组的结构，但不具备数组的方法和属性的对象。\n- 伪数组对象通常拥有一个 length 属性，用于表示其元素的个数。\n- 伪数组对象可以通过索引访问元素，类似于数组的下标访问。\n- 伪数组对象不具备数组的方法，如 push、pop、slice 等。\n\n类数组（Array-like Object）：\n- 类数组是指具有类似数组的结构，但不是由 Array 构造函数创建的对象。\n- 类数组对象通常拥有一个 length 属性，用于表示其元素的个数。\n- 类数组对象可以通过索引访问元素，类似于数组的下标访问。\n- 类数组对象不具备数组的方法，如 push、pop、slice 等。\n\n示例：\n```javascript\n// 伪数组\nconst arrayLike = { 0: 'apple', 1: 'banana', length: 2 };\nconsole.log(arrayLike[0]); // 'apple'\nconsole.log(arrayLike.length); // 2\nconsole.log(arrayLike.push); // undefined\n\n// 类数组\nconst arrayLikeObject = document.querySelectorAll('div');\nconsole.log(arrayLikeObject[0]); // DOM元素\nconsole.log(arrayLikeObject.length); // 元素数量\nconsole.log(arrayLikeObject.push); // undefined\n```\n\n需要注意的是，伪数组和类数组虽然具有类似数组的结构，但它们没有继承自 Array 的方法和属性，因此无法直接使用数组的方法。如果需要使用数组的方法，可以将伪数组或类数组对象转换为真正的数组，例如通过 `Array.from()`、`Array.prototype.slice.call()` 或展开运算符 `...` 等方法进行转换。\n",{"_54":356,"_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/435/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/435/timeline",{"_54":359,"_56":57,"_58":360,"_60":361,"_62":362,"_64":363,"_66":364,"_68":365,"_70":366,"_72":367,"_74":368,"_107":369,"_127":128,"_129":26,"_130":-5,"_131":372,"_133":373,"_155":148,"_149":375,"_151":376,"_154":-5,"_158":159,"_160":377,"_165":-5,"_166":378,"_168":379,"_180":381,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/402","https://api.github.com/repos/pro-collection/interview-question/issues/402/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/402/comments","https://api.github.com/repos/pro-collection/interview-question/issues/402/events","https://github.com/pro-collection/interview-question/issues/402",1738467522,"I_kwDOJGDC6c5nnujC",402,"使用 ajax 封装一个上传文件的函数【热度: 206】",{"_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},[370,371],{"_66":288,"_68":289,"_54":290,"_113":291,"_115":292,"_117":26,"_118":293},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":232,"_64":233,"_58":234,"_66":235,"_68":236,"_70":237,"_72":238,"_118":239,"_143":374,"_145":241,"_147":148,"_127":128,"_149":242,"_151":243,"_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-06-02T16:13:21Z","2023-06-02T16:13:22Z",{"_162":148,"_163":148,"_164":148},"**关键词**：ajax 上传文件、ajax 上传文件函数、ajax 上传文件封装\n\n下面是一个使用 AJAX 封装的上传文件函数的示例代码：\n\n```javascript\nfunction uploadFile(file, url, progressCallback, successCallback, errorCallback) {\n const xhr = new XMLHttpRequest();\n const formData = new FormData();\n\n // 将文件添加到 FormData 对象\n formData.append('file', file);\n\n xhr.open('POST', url, true);\n\n // 监听上传进度\n xhr.upload.addEventListener('progress', function(event) {\n if (event.lengthComputable) {\n const progress = Math.round((event.loaded / event.total) * 100);\n // 调用进度回调函数\n progressCallback(progress);\n }\n });\n\n xhr.onreadystatechange = function() {\n if (xhr.readyState === XMLHttpRequest.DONE) {\n if (xhr.status === 200) {\n // 上传成功\n // 解析响应数据\n const response = JSON.parse(xhr.responseText);\n // 调用成功回调函数\n successCallback(response);\n } else {\n // 上传失败\n // 创建错误对象\n const error = new Error(`File upload failed with status ${xhr.status}`);\n // 调用错误回调函数\n errorCallback(error);\n }\n }\n };\n\n // 发送请求\n xhr.send(formData);\n}\n\n// 使用示例\nconst fileInput = document.getElementById('file-input');\nconst uploadButton = document.getElementById('upload-button');\nconst progressElement = document.getElementById('progress');\nconst statusElement = document.getElementById('status');\n\nuploadButton.addEventListener('click', function() {\n const file = fileInput.files[0];\n const url = 'https://api.example.com/upload';\n \n uploadFile(\n file,\n url,\n function(progress) {\n // 更新进度\n progressElement.textContent = `Upload Progress: ${progress}%`;\n },\n function(response) {\n // 上传成功\n statusElement.textContent = 'Upload Successful';\n console.log('Response:', response);\n },\n function(error) {\n // 上传失败\n statusElement.textContent = 'Upload Failed';\n console.error('Error:', error);\n }\n );\n});\n```\n\n在上述示例代码中，定义了一个 `uploadFile` 函数用于上传文件。该函数接收文件对象、上传 URL、进度回调函数、成功回调函数和错误回调函数作为参数。\n\n函数内部通过创建 `XMLHttpRequest` 对象，将文件添加到 `FormData` 对象，并使用 `POST` 方法发送请求到指定的 URL。同时，通过监听 `upload` 事件来获取上传进度，并调用进度回调函数进行更新。在请求的状态改变时，根据响应状态码判断上传成功与否，并调用相应的回调函数。\n\n使用示例中，通过监听按钮点击事件，获取选择的文件对象，并调用 `uploadFile` 函数进行文件上传。在回调函数中更新进度和状态信息，并处理成功和失败的情况。\n",{"_54":380,"_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/402/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/402/timeline",{"_54":383,"_56":57,"_58":384,"_60":385,"_62":386,"_64":387,"_66":388,"_68":389,"_70":390,"_72":391,"_74":392,"_107":393,"_127":128,"_129":26,"_130":-5,"_131":396,"_133":397,"_155":148,"_149":399,"_151":400,"_154":-5,"_158":159,"_160":401,"_165":-5,"_166":402,"_168":403,"_180":405,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/389","https://api.github.com/repos/pro-collection/interview-question/issues/389/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/389/comments","https://api.github.com/repos/pro-collection/interview-question/issues/389/events","https://github.com/pro-collection/interview-question/issues/389",1732536550,"I_kwDOJGDC6c5nRGjm",389,"JS 作用域链链接多少?【热度: 882】",{"_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},[394,395],{"_66":223,"_68":224,"_54":225,"_113":226,"_115":227,"_117":26,"_118":228},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":232,"_64":233,"_58":234,"_66":235,"_68":236,"_70":237,"_72":238,"_118":239,"_143":398,"_145":241,"_147":148,"_127":128,"_149":242,"_151":243,"_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-05-30T15:48:36Z","2023-05-30T15:48:37Z",{"_162":148,"_163":148,"_164":148},"**关键词**：JS 作用域链链、JS 作用域链链应用\n\n### 概念\n\nJavaScript 作用域链（Scope Chain）是指变量和函数的可访问性和查找规则。它是由多个执行上下文（Execution Context）的变量对象（Variable Object）按照它们被创建的顺序组成的链式结构。\n\n在 JavaScript 中，每个函数都会创建一个新的执行上下文，并将其添加到作用域链的最前端。当访问一个变量时，JavaScript 引擎会先从当前执行上下文的变量对象开始查找，如果找不到，则沿着作用域链依次向上查找，直到全局执行上下文的变量对象。\n\n作用域链的创建过程如下：\n1. 在函数定义时，会创建一个变量对象（VO）来存储函数的变量和函数声明。这个变量对象包含了当前函数的作用域中的变量和函数。\n2. 在函数执行时，会创建一个执行上下文（Execution Context），并将其添加到作用域链的最前端。执行上下文中的变量对象称为活动对象（Active Object）。\n3. 当访问一个变量时，JavaScript 引擎首先会在活动对象中查找，如果找不到，则沿着作用域链依次向上查找，直到全局执行上下文的变量对象。\n4. 如果在作用域链的任何一个环节找到了变量，则停止查找并返回变量的值；如果未找到，则抛出引用错误（ReferenceError）。\n\n作用域链的特点：\n1. 作用域链是一个静态的概念，它在函数定义时就确定了，不会随着函数的调用而改变。\n2. 作用域链是由多个执行上下文的变量对象按照它们被创建的顺序组成的。\n3. 作用域链的最后一个变量对象是全局执行上下文的变量对象，它是作用域链的终点。\n4. 内部函数可以访问外部函数的变量，因为内部函数的作用域链包含了外部函数的变量对象。\n\n\n### 有哪些应用场景\n\n作用域链在 JavaScript 中具有广泛的应用场景。下面列举了一些常见的应用场景：\n\n1. 变量查找：作用域链决定了变量的访问顺序，当访问一个变量时，会按照作用域链的顺序依次查找变量，直到找到匹配的变量或到达全局作用域。\n\n2. 闭包：闭包是指函数能够访问和操作它的外部函数中定义的变量。通过作用域链，内部函数可以访问外部函数的变量，实现了闭包的特性。闭包在许多场景中用于创建私有变量和实现函数封装。\n\n3. 垃圾回收：JavaScript 的垃圾回收机制通过作用域链来判断变量的生命周期。当变量不再被引用时，垃圾回收器可以回收它所占用的内存空间。\n\n4. 函数作为参数传递：在 JavaScript 中，可以将函数作为参数传递给其他函数。在传递过程中，作用域链决定了内部函数对外部函数变量的访问权限，实现了回调函数和高阶函数的功能。\n\n5. 面向对象编程：JavaScript 中的对象和原型链是基于作用域链实现的。通过原型链，对象可以访问和继承其原型对象的属性和方法。\n\n6. 模块化开发：作用域链可以用于实现模块化开发，通过定义私有变量和公共接口，控制模块内部变量的可访问性，避免变量冲突和全局污染。\n\n7. 作用域链的动态改变：在 JavaScript 中，可以通过闭包和动态作用域的特性来改变作用域链。例如，使用 eval() 函数或 with 语句可以改变当前的作用域链。\n\n总之，作用域链在 JavaScript 中扮演了重要的角色，涵盖了变量的访问、闭包、垃圾回收、模块化开发等多个方面。深入理解作用域链对于编写高质量的 JavaScript 代码和理解其底层工作原理非常重要。\n",{"_54":404,"_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/389/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/389/timeline",{"_54":407,"_56":57,"_58":408,"_60":409,"_62":410,"_64":411,"_66":412,"_68":413,"_70":414,"_72":415,"_74":416,"_107":417,"_127":128,"_129":26,"_130":-5,"_131":420,"_133":421,"_155":148,"_149":423,"_151":424,"_154":-5,"_158":159,"_160":425,"_165":-5,"_166":426,"_168":427,"_180":429,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/373","https://api.github.com/repos/pro-collection/interview-question/issues/373/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/373/comments","https://api.github.com/repos/pro-collection/interview-question/issues/373/events","https://github.com/pro-collection/interview-question/issues/373",1722310035,"I_kwDOJGDC6c5mqF2T",373,"Babel Polyfill 了解多少【热度: 200】",{"_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},[418,419],{"_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":422,"_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-05-23T15:27:13Z","2023-05-23T15:27:14Z",{"_162":148,"_163":148,"_164":148},"**关键词**：Babel Polyfill 原理、Babel Polyfill 作用、Babel Polyfill 使用、Babel Polyfill 按需加载\n\n### Babel Polyfill 作用是啥\n\nBabel Polyfill 的作用是在旧版本浏览器中提供对新的JavaScript特性和API的支持。当使用Babel进行代码转换时，它只会转换语法，而不会转换新的API和全局对象（如Promise、Map、Set等）。\n\n旧版本的浏览器可能不支持这些新的API和全局对象，因此在运行使用这些特性的代码时会抛出错误。为了解决这个问题，可以使用Babel Polyfill来填充缺失的功能，以确保代码在旧版本浏览器中正常运行。\n\nBabel Polyfill通过修改全局对象和原型链，添加缺失的方法和属性，使得代码能够在不支持这些功能的浏览器中运行。它会检测当前环境的特性支持情况，并根据需要自动加载所需的Polyfill代码。\n\n使用Babel Polyfill可以让开发人员在编写代码时不必过多考虑浏览器的兼容性，而专注于使用最新的JavaScript特性和API。它提供了一种简单方便的方式来填充浏览器的功能差异，确保代码在各种浏览器环境中具有一致的行为。\n\n\n### 如何使用\n\n要使用 Babel Polyfill，需要按照以下步骤进行设置：\n\n1. 安装依赖：首先，确保你的项目已经安装了 Babel 相关的依赖包。这包括 `@babel/core`、`@babel/preset-env` 和 `@babel/polyfill`。你可以使用 npm 或者 yarn 进行安装：\n\n```shell\nnpm install --save-dev @babel/core @babel/preset-env @babel/polyfill\n```\n\n2. 配置 Babel：在项目根目录下创建一个 `.babelrc` 文件，并添加以下配置：\n\n```json\n{\n \"presets\": [\"@babel/preset-env\"]\n}\n```\n\n这样的配置将告诉 Babel 使用 `@babel/preset-env` 预设来进行转换。\n\n3. 导入 Polyfill：在你的入口文件（通常是项目的主 JavaScript 文件）中导入 Babel Polyfill。你可以使用 import 语句或者 require 来导入 Polyfill：\n\n使用 import（适用于 ES6 模块）：\n\n```javascript\nimport '@babel/polyfill';\n```\n\n使用 require（适用于 CommonJS 模块）：\n\n```javascript\nrequire('@babel/polyfill');\n```\n\n导入 Polyfill 的位置很重要，通常应该在你的应用程序代码之前导入，以确保 Polyfill 在应用程序代码之前被加载和执行。\n\n4. 配置目标浏览器：为了让 Babel Polyfill 根据目标浏览器进行特性填充，你可以在 `.babelrc` 文件中的 `@babel/preset-env` 配置中指定目标浏览器的选项。例如，你可以在配置中添加 `targets` 属性：\n\n```json\n{\n \"presets\": [\n [\n \"@babel/preset-env\",\n {\n \"targets\": {\n \"browsers\": [\"last 2 versions\", \"ie >= 11\"]\n }\n }\n ]\n ]\n}\n```\n\n这样，Polyfill 将根据所选的目标浏览器填充相应的功能。\n\n完成以上步骤后，Babel Polyfill 将根据配置在目标浏览器中填充所需的功能，以确保你的代码在旧版本浏览器中正常运行。请注意，Polyfill 会增加你的应用程序的大小，因此请考虑仅填充所需的功能，以减小文件大小并优化性能。\n\n\n### 按需加载 Polyfill\n\nBabel Polyfill 默认会填充所有缺失的功能，但如果你只需要按需加载特定功能，可以使用 core-js 库的按需加载特性。下面是按需加载 Babel Polyfill 的步骤：\n\n1. 安装依赖：确保你的项目已经安装了必要的依赖。除了之前提到的 Babel 相关依赖外，你还需要安装 `core-js`。\n\n```shell\nnpm install --save-dev @babel/core @babel/preset-env core-js\n```\n\n2. 配置 Babel：在 `.babelrc` 文件中，添加以下配置：\n\n```json\n{\n \"presets\": [\n [\n \"@babel/preset-env\",\n {\n \"useBuiltIns\": \"usage\",\n \"corejs\": 3\n }\n ]\n ]\n}\n```\n\n`useBuiltIns` 选项设置为 `\"usage\"` 表示按需加载特性，而 `\"corejs\": 3` 指定了使用的 `core-js` 版本。\n\n3. 导入 Polyfill：在需要使用特定功能的文件中，按需导入所需的 Polyfill。例如，如果你需要填充 `Promise` 和 `Array.prototype.includes`，你可以按如下方式导入：\n\n```javascript\nimport 'core-js/features/promise';\nimport 'core-js/features/array/includes';\n```\n\n这样只会加载和填充所需的功能，而不会加载整个 Polyfill 库。你可以根据具体的功能需求进行按需导入。\n\n请注意，使用按需加载的方式可以减小应用程序的文件大小，并且只填充需要的功能，但需要确保在使用相关功能之前已经导入了相应的 Polyfill。\n\n\n\n",{"_54":428,"_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/373/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/373/timeline",{"_54":431,"_56":57,"_58":432,"_60":433,"_62":434,"_64":435,"_66":436,"_68":437,"_70":438,"_72":439,"_74":440,"_107":441,"_127":128,"_129":26,"_130":-5,"_131":444,"_133":445,"_155":148,"_149":447,"_151":447,"_154":-5,"_158":159,"_160":448,"_165":-5,"_166":449,"_168":450,"_180":452,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/372","https://api.github.com/repos/pro-collection/interview-question/issues/372/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/372/comments","https://api.github.com/repos/pro-collection/interview-question/issues/372/events","https://github.com/pro-collection/interview-question/issues/372",1722271208,"I_kwDOJGDC6c5mp8Xo",372,"幽灵依赖是什么",{"_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},[442,443],{"_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":446,"_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-05-23T15:04:38Z",{"_162":148,"_163":148,"_164":148},"### 幽灵依赖是什么\n\n\"幽灵依赖\"（Ghost Dependency）是指在项目的`node_modules`目录中存在但未被实际使用的依赖包。\n\n在使用 npm 或者其他包管理工具安装依赖包时，有时会出现安装了一些不需要的或者不正确的依赖包的情况。这些依赖包在项目中没有被显式地引用或使用，但仍然存在于`node_modules`目录中，占用了项目的存储空间。\n\n幽灵依赖可能会产生以下问题：\n\n1. 占用存储空间：未使用的依赖包会增加项目的体积，占用存储空间。对于大型项目或频繁部署的项目来说，这可能会造成不必要的存储资源浪费。\n\n2. 增加构建时间：未使用的依赖包可能会增加构建过程中的解析和处理时间，导致构建过程变慢。这会影响开发人员的开发效率和项目的部署速度。\n\n3. 潜在的安全风险：未使用的依赖包可能包含漏洞或安全风险，但由于没有使用，可能没有及时更新或修复这些问题，增加了项目的安全隐患。\n\n为了解决幽灵依赖的问题，可以采取以下措施：\n\n1. 定期检查依赖：定期检查项目的依赖，识别和删除未使用的依赖包。可以使用工具如`npm-check-unused`、`depcheck`等来帮助检测和清理未使用的依赖。\n\n2. 精简依赖：审查项目的依赖关系，仅安装和保留必要的依赖包。避免过度依赖，只安装项目所需的模块，减少项目体积和构建时间。\n\n3. 更新依赖包：确保项目中使用的依赖包都是最新版本，并及时更新已知的安全漏洞和问题。这可以通过定期检查依赖包的更新和使用工具如`npm audit`来实现。\n\n通过处理幽灵依赖，可以提高项目的整洁性、性能和安全性，并减少不必要的开销和风险。\n\n\n### pnpm 是如何解决幽灵依赖问题的\n\npnpm 是一个基于 npm 的包管理工具，它采用了一种称为\"快速硬链接（Fast Hard Links）\"的机制来解决幽灵依赖问题。\n\n传统的 npm 或 yarn 安装依赖时，每个项目都会在`node_modules`目录下创建依赖包的副本。这导致了大量的重复文件，尤其是对于多个项目都使用同一依赖包时。\n\n而 pnpm 通过使用快速硬链接机制，在全局的存储位置（默认为`~/.pnpm-store`）只保存一份依赖包，而不是为每个项目都复制一份。这样就避免了幽灵依赖问题，减少了存储空间的占用。\n\n当使用 pnpm 安装依赖时，它会在项目的`node_modules`目录下创建一个`.modules.yaml`文件，记录项目所需的依赖包和版本信息。实际的依赖包文件通过硬链接指向全局存储位置中的依赖包。这意味着不同项目之间可以共享相同的依赖包，但每个项目都拥有自己的依赖版本。\n\n通过这种方式，pnpm 解决了幽灵依赖的问题，同时减少了存储空间的使用。它还具有一些其他的优点，如更快的安装速度、更少的网络传输和更好的缓存利用率。\n\n需要注意的是，pnpm 仍然会将项目中的所有依赖安装在`node_modules`目录下，但它使用硬链接的方式避免了重复文件的复制，从而解决了幽灵依赖问题。\n",{"_54":451,"_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/372/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/372/timeline",{"_54":454,"_56":57,"_58":455,"_60":456,"_62":457,"_64":458,"_66":459,"_68":460,"_70":461,"_72":462,"_74":463,"_107":464,"_127":128,"_129":26,"_130":-5,"_131":467,"_133":468,"_155":148,"_149":470,"_151":471,"_154":-5,"_158":159,"_160":472,"_165":-5,"_166":473,"_168":474,"_180":476,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/343","https://api.github.com/repos/pro-collection/interview-question/issues/343/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/343/comments","https://api.github.com/repos/pro-collection/interview-question/issues/343/events","https://github.com/pro-collection/interview-question/issues/343",1698631800,"I_kwDOJGDC6c5lPxB4",343,"[React] createElement 和 cloneElement 有什么区别【热度: 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},[465,466],{"_66":318,"_68":319,"_54":320,"_113":321,"_115":322,"_117":26,"_118":323},{"_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":469,"_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-05-06T13:27:11Z","2023-05-06T13:27:12Z",{"_162":148,"_163":148,"_164":148},"**关键词**：createElement cloneElement\n\n### `createElement` 和 `cloneElement` 有什么区别?\n\nReact 中的 `createElement` 和 `cloneElement` 都可以用来创建元素，但它们用法有所不同。\n\n`createElement` 用于在 React 中动态地创建一个新的元素，并返回一个 React 元素对象。它的用法如下：\n\n```jsx\nReact.createElement(type, [props], [...children]);\n```\n\n其中，`type` 是指要创建的元素的类型，可以是一个 HTML 标签名（如 `div`、`span` 等），也可以是一个 React 组件类（如自定义的组件），`props` 是一个包含该元素需要设置的属性信息的对象，`children` 是一个包含其子元素的数组。`createElement` 会以这些参数为基础创建并返回一个 React 元素对象，React 将使用它来构建真正的 DOM 元素。\n\n`cloneElement` 用于复制一个已有的元素，并返回一个新的 React 元素，同时可以修改它的一些属性。它的用法如下：\n\n```jsx\nReact.cloneElement(element, [props], [...children]);\n```\n\n其中，`element` 是指要复制的 React 元素对象，`props` 是一个包含需要覆盖或添加的属性的对象，`children` 是一个包含其修改后的子元素的数组。`cloneElement` 会以这些参数为基础复制该元素，并返回一个新的 React 元素对象。\n\n在实际使用中，`createElement` 通常用于创建新的元素（如动态生成列表），而 `cloneElement` 更适用于用于修改已有的元素，例如在一个组件内部使用 `cloneElement` 来修改传递进来的子组件的属性。\n\n\n### `cloneElement` 有哪些应用场景\n\nReact 中的 `cloneElement` 主要适用于以下场景：\n\n1. 修改 props\n\n`cloneElement` 可以用于复制一个已有的元素并覆盖或添加一些新的属性。例如，可以复制一个带有默认属性的组件并传递新的属性，达到修改属性的目的。\n\n```jsx\n// 假设有这样一个组件\nfunction MyComponent(props) {\n // ...\n}\n\n// 在另一个组件中使用 cloneElement 修改 MyComponent 的 props\nfunction AnotherComponent() {\n return React.cloneElement(, { color: 'red' });\n}\n```\n\n2. 渲染列表\n\n在渲染列表时，可以使用 `Array.map()` 生成一系列的元素数组，也可以使用 `React.Children.map()` 遍历子元素并返回一系列的元素数组，同时使用 `cloneElement` 复制元素并传入新的 key 和 props。\n\n```jsx\n// 使用 Children.map() 遍历子元素并复制元素\nfunction MyList({ children, color }) {\n return (\n

\n {React.Children.map(children, (child, index) =>\n React.cloneElement(child, { key: index, color })\n )}\n \n );\n}\n\n// 在组件中使用 MyList 渲染列表元素\nfunction MyPage() {\n return (\n \n

Item 1

Item 2

Item 3

\n \n );\n}\n```\n\n3. 修改子元素\n\n使用 `cloneElement` 也可以在一个组件内部修改传递进来的子组件的属性，例如修改按钮的样式。\n\n```jsx\nfunction ButtonGroup({ children, style }) {\n return (\n

\n {React.Children.map(children, (child) =>\n React.cloneElement(child, { style: { color: 'red' } })\n )}\n

\n );\n}\n\nfunction MyPage() {\n return (\n \n \n \n \n );\n}\n```\n\n总之，`cloneElement` 可以方便地复制已有的 React 元素并修改其属性，适用于许多场景，例如修改 props、渲染列表和修改子元素等。\n\n",{"_54":475,"_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/343/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/343/timeline",{"_54":478,"_56":57,"_58":479,"_60":480,"_62":481,"_64":482,"_66":483,"_68":484,"_70":485,"_72":486,"_74":487,"_107":488,"_127":128,"_129":26,"_130":-5,"_131":497,"_133":498,"_155":148,"_149":510,"_151":511,"_154":-5,"_158":159,"_160":512,"_165":-5,"_166":513,"_168":514,"_180":516,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/342","https://api.github.com/repos/pro-collection/interview-question/issues/342/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/342/comments","https://api.github.com/repos/pro-collection/interview-question/issues/342/events","https://github.com/pro-collection/interview-question/issues/342",1698604203,"I_kwDOJGDC6c5lPqSr",342,"Grid 布局了解多少？【热度: 653】",{"_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},[489,496],{"_66":490,"_68":491,"_54":492,"_113":493,"_115":494,"_117":26,"_118":495},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":499,"_64":500,"_58":501,"_66":502,"_68":503,"_70":185,"_72":504,"_118":505,"_143":506,"_145":507,"_147":148,"_127":128,"_149":508,"_151":509,"_153":-5,"_154":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_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},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2023-05-06T12:10:32Z","2023-05-06T12:10:33Z",{"_162":148,"_163":148,"_164":148},"**关键词**：Grid 布局、Grid 属性\n\n### 什么是 grid 布局\n\nCSS Grid 布局是 CSS 中的一种新的布局系统，旨在通过网格（grid）和行（row）、列（column）的概念来创建灵活的、高效的、响应式网页布局。CSS Grid 布局可以将一个元素的内容划分为多个网格，根据需要，可以在这些网格中定位元素。与传统的基于盒子模型的布局方式不同，CSS Grid 布局以一种更直观、更高效的方式来处理布局问题。\n\n可以通过 CSS Grid 属性来定义网格和元素的位置，包括大小、间距、对齐方式等等。CSS Grid 布局还支持类似 Flexbox 的弹性布局，例如自适应尺寸、重叠和层叠等特性。最重要的是，因为 CSS Grid 布局与内容的结构分离，所以它能够为设计响应式布局提供出色的支持，而不需要在内容标记中添加过多的 CSS 或者 JavaScript。\n\n\n### grid 布局有哪些 api\n\nCSS Grid 布局提供了一系列的 API 来实现网格布局，以下是常用的几个属性：\n\n1. `display: grid;`：设置一个元素为网格容器\n2. `grid-template-columns`：定义网格中每一列的大小和数量\n3. `grid-template-rows`：定义网格中每一行的大小和数量\n4. `grid-template-areas`：为网格中的区域命名，以便将子元素分配到特定的区域\n5. `grid-column-gap` 和 `grid-row-gap`：定义网格中行和列之间的间距\n6. `grid-area`：定义元素应该在网格中的哪个区域，比如指定其所在的行、列和跨越的行列数量\n7. `grid-column-start` 和 `grid-column-end`：定义元素开始和结束的列位置，类似地，`grid-row-start` 和 `grid-row-end` 定义元素开始和结束的行位置\n8. `grid-column` 和 `grid-row`：简写属性，组合了 `grid-column-start` 、`grid-column-end` 、`grid-row-start` 和 `grid-row-end`，用于同时设置元素在网格中的列和行位置。\n\n这些属性可以帮助我们在网格容器中定义网格，并指定子元素在网格中的位置和大小。还有其他的属性可以进一步调整子元素的位置和大小，如 `justify-self` 和 `align-self` 用于调整子元素的水平和垂直对齐方式，`grid-auto-columns` 和 `grid-auto-rows` 用于指定未被显式指定的网格单元格的大小等等。\n\n\n### 如何使用 grid 布局\n\nCSS Grid 布局可以通过以下步骤来使用：\n\n1. 在父级元素上声明 `display: grid` 属性，将其转换为网格容器。\n2. 使用 `grid-template-columns` 和 `grid-template-rows` 属性来定义行和列的网格大小和数量，或者使用 `grid-template-areas` 属性来定义网格中的区域。\n3. 使用 `gap` 属性来定义行和列之间的间距。\n4. 将子元素放到网格容器中，并使用 `grid-column` 和 `grid-row` 属性来指定子元素在网格中的位置，也可以通过 `grid-area` 属性来指定子元素在网格中的区域。\n5. 可以使用其他属性来进一步改变子元素的位置和大小，比如 `justify-self` 和 `align-self` 等属性来设置元素的对齐方式和位置。\n\n下面是一个简单的使用 Grid 布局的示例，创建一个 3x3 网格：\n\n```html\n

\n```\n\n```css\n.grid-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 1fr);\n gap: 10px;\n}\n\n.grid-item {\n background-color: #ddd;\n padding: 20px;\n font-size: 30px;\n text-align: center;\n}\n\n.item1 {\n grid-column: 1 / span 2;\n grid-row: 1;\n}\n\n.item2 {\n grid-column: 3;\n grid-row: 1 / span 2;\n}\n\n.item3 {\n grid-column: 1;\n grid-row: 2 / span 2;\n}\n\n.item4 {\n grid-column: 2;\n grid-row: 2;\n}\n\n.item5 {\n grid-column: 3;\n grid-row: 3;\n}\n\n.item6 {\n grid-column: 2 / span 2;\n grid-row: 4;\n}\n\n.item7 {\n grid-column: 1;\n grid-row: 5;\n}\n\n.item8 {\n grid-column: 2;\n grid-row: 5;\n}\n\n.item9 {\n grid-column: 3;\n grid-row: 5;\n}\n```\n\n在这个示例中，我们创建了一个包含 9 个子元素的网格容器。通过设置网格容器的 `grid-template-columns` 和 `grid-template-rows` 属性，我们定义了一个 3x3 的网格，并通过 `gap` 属性设置了行和列的间距。然后，我们使用 `grid-column` 和 `grid-row` 属性来指定每个子元素在网格中的位置，或使用 `grid-area` 属性来指定子元素在网格中的区域。通过这些属性的值，我们可以指定每个子元素跨越多少行和多少列，或者指定一个子元素占据网格中的多个区域。\n",{"_54":515,"_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/342/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/342/timeline",{"_54":518,"_56":57,"_58":519,"_60":520,"_62":521,"_64":522,"_66":523,"_68":524,"_70":525,"_72":526,"_74":527,"_107":528,"_127":128,"_129":26,"_130":-5,"_131":531,"_133":532,"_155":148,"_149":534,"_151":535,"_154":-5,"_158":159,"_160":536,"_165":-5,"_166":537,"_168":538,"_180":540,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/302","https://api.github.com/repos/pro-collection/interview-question/issues/302/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/302/comments","https://api.github.com/repos/pro-collection/interview-question/issues/302/events","https://github.com/pro-collection/interview-question/issues/302",1680037895,"I_kwDOJGDC6c5kI1gH",302,"[React] Hooks 有哪些？【热度: 2,594】",{"_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},[529,530],{"_66":318,"_68":319,"_54":320,"_113":321,"_115":322,"_117":26,"_118":323},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":232,"_64":233,"_58":234,"_66":235,"_68":236,"_70":237,"_72":238,"_118":239,"_143":533,"_145":241,"_147":148,"_127":128,"_149":242,"_151":243,"_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-23T14:00:05Z","2023-10-02T03:40:53Z",{"_162":148,"_163":148,"_164":148},"### react 16.8 hooks\r\n\r\n- useState\r\n- useEffect\r\n- useContext\r\n- useReducer\r\n- useMemo\r\n- useCallback\r\n- useRef\r\n- useImperativeHandle\r\n- useLayoutEffect\r\n- useDebugValue\r\n\r\n\r\n### React v18中的hooks\r\n- useSyncExternalStore\r\n- useTransition\r\n- useDeferredValue\r\n- useInsertionEffect\r\n- useId\r\n\r\n\r\n### 简单介绍一下 react 18 新增的 hooks\r\n\r\n### useSyncExternalStore\r\n\r\n`useSyncExternalStore`:是一个推荐用于**读取和订阅外部数据源**的 `hook`，其方式与选择性的 `hydration` 和时间切片等并发渲染功能兼容\r\n\r\n```javascript\r\nconst state = useSyncExternalStore(\r\n subscribe,\r\n getSnapshot[, getServerSnapshot]\r\n)\r\n\r\n```\r\n\r\n* `subscribe`: 订阅函数，用于注册一个回调函数，**当存储值发生更改时被调用**。此外， `useSyncExternalStore` 会通过带有记忆性的 `getSnapshot` 来判别数据是否发生变化，如果发生变化，那么会**强制更新数据**。\r\n* `getSnapshot`: 返回当前存储值的函数。必须返回缓存的值。如果 `getSnapshot` 连续多次调用，则必须返回相同的确切值，除非中间有存储值更新。\r\n* `getServerSnapshot`：返回服务端(hydration模式下)渲染期间使用的存储值的函数\r\n\r\n---\r\n\r\n#### useTransition\r\n\r\n> `useTransition`：\r\n>\r\n> * 返回一个**状态值**表示过渡任务的等待状态，\r\n> * 以及一个启动该过渡任务的函数。\r\n\r\n**过渡任务** 在一些场景中，如：`输入框`、`tab切换`、`按钮`等，这些任务需要视图上立刻做出响应，这些任务可以称之为**立即更新的任务**\r\n\r\n但有的时候，更新任务并不是那么紧急，或者来说要去请求数据等，导致新的状态不能立马更新，需要用一个`loading...`的等待状态，这类任务就是过度任务\r\n\r\n```javascript\r\nconst [isPending, startTransition] = useTransition();\r\n\r\n```\r\n\r\n* `isPending`：**过渡状态的标志**，为`true`时是等待状态\r\n* `startTransition`：可以**将里面的任务变成过渡任务**\r\n\r\n---\r\n\r\n#### useDeferredValue\r\n\r\n> `useDeferredValue`：接受一个值，并返回该值的新副本，该副本将**推迟**到更紧急地更新之后。\r\n\r\n如果当前渲染是一个紧急更新的结果，比如用户输入，`React` 将**返回之前的值**，然后**在紧急渲染完成后渲染新的值**。\r\n\r\n也就是说`useDeferredValue`可以让状态滞后派生。\r\n\r\n```javascript\r\nconst deferredValue = useDeferredValue(value);\r\n\r\n```\r\n\r\n* `value`：可变的值，如`useState`创建的值\r\n* `deferredValue`: 延时状态\r\n\r\n> **useTransition和useDeferredValue做个对比**\r\n>\r\n> * 相同点：`useDeferredValue` 和 `useTransition` 一样，都是**过渡更新任务**\r\n> * 不同点：`useTransition` 给的是一个**状态**，而`useDeferredValue`给的是一个**值**\r\n\r\n---\r\n\r\n#### useInsertionEffect\r\n\r\n`useInsertionEffect`：与 `useLayoutEffect` 一样，但它在所有 DOM 突变之前**同步触发**\r\n\r\n在执行顺序上 `useInsertionEffect` > `useLayoutEffect` > `useEffect`\r\n\r\n> `seInsertionEffect` 应仅限于 `css-in-js` 库作者使用。 \r\n> 优先考虑使用 `useEffect` 或 `useLayoutEffect` 来替代。\r\n\r\n---\r\n\r\n#### useId\r\n\r\n`useId` ：是一个**用于生成横跨服务端和客户端的稳定的唯一 ID** 的同时避免`hydration`不匹配的 hook。\r\n\r\n---\r\n\r\n\r\n### 参考文档\r\n- https://juejin.cn/post/7118937685653192735\r\n",{"_54":539,"_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/302/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/302/timeline",{"_54":542,"_56":57,"_58":543,"_60":544,"_62":545,"_64":546,"_66":547,"_68":548,"_70":549,"_72":550,"_74":551,"_107":552,"_127":128,"_129":26,"_130":-5,"_131":561,"_133":562,"_155":148,"_149":564,"_151":565,"_154":-5,"_158":159,"_160":566,"_165":-5,"_166":567,"_168":568,"_180":570,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/250","https://api.github.com/repos/pro-collection/interview-question/issues/250/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/250/comments","https://api.github.com/repos/pro-collection/interview-question/issues/250/events","https://github.com/pro-collection/interview-question/issues/250",1651183235,"I_kwDOJGDC6c5iaw6D",250,"如何解决页面请求接口大规模并发问题",{"_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},[553,560],{"_66":554,"_68":555,"_54":556,"_113":557,"_115":558,"_117":26,"_118":559},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",{"_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":563,"_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-03T01:31:39Z","2023-04-03T01:31:40Z",{"_162":148,"_163":148,"_164":148},"如何解决页面请求接口大规模并发问题，不仅仅是包含了接口并发，还有前端资源下载的请求并发。\n\n应该说这是一个话题讨论了；\n\n**个人认为可以从以下几个方面来考虑如何解决这个并发问题:** \n\n1. 后端优化：可以对接口进行优化，采用缓存技术，对数据进行预处理，减少数据库操作等。使用集群技术，将请求分散到不同的服务器上，提高并发量。另外可以使用反向代理、负载均衡等技术，分担服务器压力。\n\n2. 做 BFF 聚合：把所有首屏需要依赖的接口，利用服务中间层给聚合为一个接口。\n\n3. CDN加速：使用CDN缓存技术可以有效减少服务器请求压力，提高网站访问速度。CDN缓存可以将接口的数据存储在缓存服务器中，减少对原始服务器的访问，加速数据传输速度。\n\n4. 使用 WebSocket：使用 WebSocket 可以建立一个持久的连接，避免反复连接请求。WebSocket 可以实现双向通信，大幅降低服务器响应时间。\n\n5. 使用 HTTP2 及其以上版本，使用多路复用。\n\n6. 使用浏览器缓存技术：强缓存、协商缓存、离线缓存、Service Worker 缓存等方向。\n\n7. 聚合一定量的静态资源：比如提取页面公用复用部分代码打包到一个文件里面、对图片进行雪碧图处理，多个图片只下载一个图片。\n\n8. 采用微前端工程架构：只是对当前访问页面的静态资源进行下载，而不是下载整站静态资源。\n\n9. 使用服务端渲染技术：从服务端把页面首屏直接渲染好返回，就可以避免掉首屏需要的数据再做额外加载和执行。\n",{"_54":569,"_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/250/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/250/timeline",{"_54":572,"_56":57,"_58":573,"_60":574,"_62":575,"_64":576,"_66":577,"_68":578,"_70":579,"_72":580,"_74":581,"_107":582,"_127":128,"_129":26,"_130":-5,"_131":585,"_133":586,"_155":185,"_149":588,"_151":589,"_154":-5,"_158":159,"_160":590,"_165":-5,"_166":591,"_168":592,"_180":594,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/249","https://api.github.com/repos/pro-collection/interview-question/issues/249/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/249/comments","https://api.github.com/repos/pro-collection/interview-question/issues/249/events","https://github.com/pro-collection/interview-question/issues/249",1651174324,"I_kwDOJGDC6c5iauu0",249,"[webpack] 如果解决重复引用 node_modules 里面的不同版本的包(包重复问题)",{"_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},[583,584],{"_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":587,"_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-03T01:18:02Z","2023-04-26T15:20:48Z",{"_162":148,"_163":148,"_164":148},"解决重复引用 `node_modules` 中不同版本的包的问题，可以通过以下几种方式：\n\n**1.使用 npm 或者 yarn 的工具进行依赖的版本控制，尽量避免引用不同版本的同一个依赖库**。在 package.json 文件中使用 \"^\"、\"~\"、\">=\" 等方式指定依赖版本，可以有效减少不同版本的包冲突问题。\n\n**2.使用 webpack 的 resolve.alias 配置选项**，将需要共享的模块指定到一个目录下，然后在其它模块中使用别名引用该模块。例如，将需要共享的模块指定到 src/shared 目录下，然后在其它模块中使用别名 @shared 引用该模块，这样就可以保证在不同模块中引用相同的依赖库。\n假设我们在项目中同时依赖了两个库：`lodash` 和 `lodash-es`，并且它们分别被安装在了不同的目录下，如下所示：\n\n```\nCopy codenode_modules/\n├── lodash/\n└── lodash-es/\n```\n\n我们需要在项目中同时引用这两个库，但是如果我们在代码中分别使用 `import _ from 'lodash'` 和 `import _ from 'lodash-es'`，那么 webpack 会将它们打包成两个独立的模块，导致代码体积变大。\n\n为了解决这个问题，我们可以通过 `resolve.alias` 配置项将它们指向同一个模块。具体做法是在 webpack 配置文件中添加以下内容：\n\n```js\nmodule.exports = {\n // ...\n resolve: {\n alias: {\n 'lodash-es': 'lodash'\n }\n }\n}\n```\n\n这样一来，当我们在代码中使用 `import _ from 'lodash-es'` 时，webpack 会自动将它解析成对 `lodash` 的引用，从而避免了重复打包的问题。\n\n**3.使用 webpack 的 ProvidePlugin 插件**，将需要共享的模块注入到全局作用域中，这样就可以在不同模块中共享相同的依赖库。例如，在 webpack 配置文件中添加以下代码：\n\n```javascript\nconst webpack = require('webpack');\n\nmodule.exports = {\n // ...\n plugins: [\n new webpack.ProvidePlugin({\n $: 'jquery',\n jQuery: 'jquery',\n 'window.jQuery': 'jquery',\n }),\n ],\n};\n```\n\n这样在不同模块中就可以使用 $、jQuery、window.jQuery 全局变量引用 jquery 依赖库，避免了重复引用不同版本的 jquery 包的问题。\n\n**4.使用 webpack 的 resolve.modules 配置选项**，将 node\\_modules 目录移动到项目根目录之外，然后在 resolve.modules 中添加该目录的绝对路径，这样就可以解决不同模块中引用相同依赖库不同版本的问题。例如，在 webpack 配置文件中添加以下代码：\n\n```javascript\nconst path = require('path');\n\nmodule.exports = {\n // ...\n resolve: {\n modules: [\n path.resolve(__dirname, 'src'),\n 'node_modules',\n ],\n },\n};\n```\n\n这样 webpack 在查找依赖库的时候，会先在项目根目录下的 src 目录中查找，如果没有找到再去 node\\_modules 目录中查找，避免了不同模块中引用相同依赖库不同版本的问题。\n",{"_54":593,"_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/249/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/249/timeline",{"_54":596,"_56":57,"_58":597,"_60":598,"_62":599,"_64":600,"_66":601,"_68":602,"_70":603,"_72":604,"_74":605,"_107":606,"_127":128,"_129":26,"_130":-5,"_131":609,"_133":610,"_155":148,"_149":612,"_151":613,"_154":-5,"_158":159,"_160":614,"_165":-5,"_166":615,"_168":616,"_180":618,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/16","https://api.github.com/repos/pro-collection/interview-question/issues/16/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/16/comments","https://api.github.com/repos/pro-collection/interview-question/issues/16/events","https://github.com/pro-collection/interview-question/issues/16",1611650963,"I_kwDOJGDC6c5gD9eT",16,"跨域通信的常见方式有哪些?",{"_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},[607,608],{"_66":288,"_68":289,"_54":290,"_113":291,"_115":292,"_117":26,"_118":293},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":232,"_64":233,"_58":234,"_66":235,"_68":236,"_70":237,"_72":238,"_118":239,"_143":611,"_145":241,"_147":148,"_127":128,"_149":242,"_151":243,"_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-06T15:20:00Z","2023-07-28T15:27:14Z",{"_162":148,"_163":148,"_164":148},"## 常见方式\r\n\r\n**JSONP**\r\nJSONP是通过动态创建script标签的方式，利用script标签可以跨域请求资源的特性来实现的，本质是利用了script标签没有跨域限制的特性，可以在请求的url后加一个callback参数，后端接收到请求后，将需要传递的数据作为参数传递到callback函数中，前端定义该函数来接收数据，从而实现跨域通信。\r\n[#27 ](https://github.com/yanlele/interview-question/issues/27)\r\n\r\n\r\n**CORS**\r\nCORS是一种现代浏览器支持的跨域解决方案，CORS全称为跨域资源共享（Cross-Origin Resource Sharing），其本质是在服务端设置允许跨域访问的响应头，浏览器通过判断响应头中是否允许跨域访问来决定是否允许跨域访问。\r\n[#28 ](https://github.com/yanlele/interview-question/issues/28)\r\n\r\n**postMessage**\r\npostMessage是HTML5引入的一种新的跨域通信方式，主要是用于在不同窗口之间进行通信，包括不同域名、协议、端口等情况，通过调用window.postMessage()方法，在两个窗口之间发送消息，接收方通过监听message事件来接收消息，从而实现跨域通信。\r\n[#29 ](https://github.com/yanlele/interview-question/issues/29)\r\n\r\n\r\n**WebSocket**\r\nWebSocket是一种新的网络协议，可以实现客户端和服务器之间的实时双向通信，同时也可以跨域通信，WebSocket协议建立在TCP协议之上，通过HTTP协议发起握手请求，握手成功后，客户端和服务器就可以通过WebSocket协议进行实时通信了。\r\n[#30](https://github.com/yanlele/interview-question/issues/20) \r\n\r\n\r\n**代理转发**\r\n代理转发是一种常用的跨域通信方式，主要是通过在同一域名下设置代理服务器，在代理服务器上实现跨域访问，再将结果返回给前端页面，从而实现跨域通信。\r\n\r\n",{"_54":617,"_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/16/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/16/timeline","pagination",{"_621":237,"_162":237},"value","actionData","errors"]