\n\n\n\n```\n\n接着，我们创建一个 `Modal` 组件，它会使用 `ReactDOM.createPortal` 来渲染其子元素到 `#modal-root`：\n\n```javascript\n// Modal.js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nclass Modal extends React.Component {\n render() {\n // 使用 ReactDOM.createPortal 将子元素渲染到 modal-root 中\n return ReactDOM.createPortal(\n // 任何有效的 React 孩子元素\n this.props.children,\n // 一个 DOM 元素\n document.getElementById(\"modal-root\")\n );\n }\n}\n\nexport default Modal;\n```\n\n现在，我们可以在应用程序的任何其他组件中使用这个 `Modal` 组件了，不论它们在 DOM 树中的位置如何：\n\n```javascript\n// App.js\nimport React from \"react\";\nimport Modal from \"./Modal\";\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = { showModal: false };\n }\n\n handleShow = () => {\n this.setState({ showModal: true });\n };\n\n handleClose = () => {\n this.setState({ showModal: false });\n };\n\n render() {\n return (\n

\n \n\n {this.state.showModal ? (\n \n

我是一个模态框!

\n \n

\n \n ) : null}\n

\n );\n }\n}\n\nexport default App;\n```\n\n在以上代码中，无论 `Modal` 组件在 `App` 组件中的位置如何，模态框的渲染位置总是在 `#modal-root` 中，这是一个典型的使用 React Portals 的例子。上述代码中的模态框在视觉上会覆盖整个应用程序的位置，但在组件层次结构中它仍然是 `App` 组件的子组件。\n",{"_58":329,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/731/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/731/timeline",{"_58":332,"_60":61,"_62":333,"_64":334,"_66":335,"_68":336,"_70":337,"_72":338,"_74":339,"_76":340,"_78":341,"_111":342,"_131":132,"_133":24,"_134":-5,"_135":345,"_137":346,"_159":152,"_153":348,"_155":348,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":349,"_170":350,"_176":351,"_178":352,"_190":354,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/725","https://api.github.com/repos/pro-collection/interview-question/issues/725/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/725/comments","https://api.github.com/repos/pro-collection/interview-question/issues/725/events","https://github.com/pro-collection/interview-question/issues/725",2254472153,"I_kwDOJGDC6c6GYIPZ",725,"husky 作用是啥，有哪些重要配置【热度: 192】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[343,344],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":347,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-20T09:32:12Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：husky 作用、husky 配置\n\nHusky 是一个基于 Node 的 Git 钩子管理工具，用于在你的工作流程中强制执行 Git 钩子。Husky 允许你定义脚本，这些脚本会在不同的 Git 生命周期事件触发时自运行，比如在提交、推送或合并前。\n\n使用 Husky 可以：\n\n1. **保证提交质量**：Husky 可以在你提交代码之前运行代码校验，确保代码符合项目规范，提高代码质量。\n2. **维护代码风格**：可以在提交时检查代码风格，确保代码风格一致性。\n3. **自动化流程**：支持在推送前执行代码部署、测试脚本，让整个开发流程自动化。\n4. **预防错误**：例如在允许推送到远程仓库之前检查代码中是否有遗留的更改。\n\nHusky 的一些重要配置如下：\n\n1. **`npm install husky@latest --save-dev`**: 安装 husky。\n2. **`npx husky install`**: 在新建的项目管理下生成 husky 的配置文件。\n3. **`npx husky add .husky/*.sh`**: 添加 Git 钩子脚本，这里的 `*.sh` 是你想触发的钩子点，例如：`pre-commit`、`commit-msg` 等。\n\nHusky 支持的钩子包括：\n\n- `apply-patch-msg`: 应用一个补丁到暂存区并生成提交信息时。\n- `pre-applypatch`: 打补丁前。\n- `post-applypatch`: 打补丁后。\n- `pre-commit`: 提交前，常用于检查代码、分析代码风格等。\n- `prepare-commit-msg`: 提交准备工作完成后，修改提交信息之前运行。\n- `commit-msg`: 检查提交信息有效性。\n- `post-commit`: 提交后。\n- `pre-rebase`: 回滚操作开始前。\n- `post-checkout`: 检出操作后（如切换分支）。\n- `post-merge`: 合并和变基操作后。\n\n记得在 `.husky` 文件夹里配置这些钩子脚本，你可以根据项目需求来写自己的 hook 脚本。比如，设置一个 `.husky/pre-commit` 脚本（可能是一个 shell 脚本和 Node.js 脚本的组合），当你尝试提交代码时，Husky 将会运行这个脚本作为 `pre-commit` 钩子。\n\n在一些场景下的 `.husky/pre-commit` 脚本，你可以指定运行如下：\n\n```bash\n#!/bin/sh\n. \"$(dirname -- \"$0\")/_/husky.sh\"\n\nnpm run lint # 运行 ESLint 检查代码\n./node_modules/.bin/pretty-quick # 格式化代码\n./node_modules/.bin/tsc # 检查 TypeScript\n```\n\n以上脚本将确保代码在提交前通过了 linter 检查，并通过 prettier 快速格式化以及 TypeScript 编译。\n\n使用的时候，请确认你的项目已经有了 Node.js 环境，并且已经安装了 Husky 和相应的代码检查、格式化工具。\n",{"_58":353,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/725/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/725/timeline",{"_58":356,"_60":61,"_62":357,"_64":358,"_66":359,"_68":360,"_70":361,"_72":362,"_74":363,"_76":364,"_78":365,"_111":366,"_131":132,"_133":24,"_134":-5,"_135":369,"_137":370,"_159":152,"_153":383,"_155":383,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":384,"_170":385,"_176":386,"_178":387,"_190":389,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/722","https://api.github.com/repos/pro-collection/interview-question/issues/722/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/722/comments","https://api.github.com/repos/pro-collection/interview-question/issues/722/events","https://github.com/pro-collection/interview-question/issues/722",2254419339,"I_kwDOJGDC6c6GX7WL",722,"documentFragment api 是什么，有哪些使用场景？【热度: 115】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[367,368],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":379,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},510,"2023-03-06T15:00:15Z","2025-09-07T06:08:31Z","2024-04-20T06:56:54Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：documentFragment 概念、documentFragment 使用场景\n\n`DocumentFragment` 是 Web API 中的一部分，它是 `DOM` （文档对象模型）的一个非常轻量级的节点，代表一组 `DOM` 节点的集合。它不是一个真实存在于 `DOM` 中的实体，因此被认为是“没有名字”的节点，或者说它不在文档的主体中渲染，通常用来作为临时的 `DOM` 节点仓库。\n\n对于 `DocumentFragment` 的一部分内容，当它们在 `DocumentFragment` 之外操作时，并不会引起主 DOM 树的直接重排或重绘。然而，一旦你将整个 `DocumentFragment` 插入到 DOM 的一个永久节点上，那么在 `DocumentFragment` 内进行的更改将会触发 DOM 的重新渲染。\n\nDocumentFragment API 有几个关键的特点和用途：\n\n1. **轻量级**：`DocumentFragment` 不会引起布局重排，因为其不是真实渲染的一部分。\n\n2. **节点集合**：可以在 `DocumentFragment` 中节点集合进行分组，这个集合可以一次性插入到 `DOM` 的某一部分中。\n\n3. **性能优化**：通过在一个 `DocumentFragment` 中构建好一大块 `DOM` 树，然后将它整体插入到主 `DOM` 中，从而减少重排次数，提高效率。\n\n4. **事件不冒泡**：因为 `DocumentFragment` 不是真实渲染的一部分，所以它的事件不会冒泡到上层的 DOM 元素，除非它被插入到了 `DOM` 中。\n\n### 使用场景\n\n以下是一些使用 `DocumentFragment` 的常见场景：\n\n- **批量操作**：当你想要一次性添加多个节点到 `DOM` 树中时，使用 `DocumentFragment` 可以将这些节点预先堆放在一个轻量级对象中，然后一次性添加。\n\n- **离屏操作**：如果你需要创建复杂的 `DOM` 结构，可以通过 `DocumentFragment` 在不触发页面重排和重绘的情况下进行。\n\n- **内容填充**：在填充 `DOM` 元素内容之前，可以先创建一个 `DocumentFragment` 完成所有节点的添加和排序，然后把它添加到 `DOM` 树中。\n\n- **避免内存泄漏**：在某些情况下，它可以作为防止因移动节点而造成的内存泄漏的一个办法。\n\n### 示例代码\n\n```javascript\n// 创建 DocumentFragment\nvar fragment = document.createDocumentFragment();\n\n// 创建多个节点或元素\nvar div = document.createElement(\"div\");\nvar p = document.createElement(\"p\");\n\n// 将节点添加到 DocumentFragment 上\nfragment.appendChild(div);\nfragment.appendChild(p);\n\n// 一次性将 DocumentFragment 添加到 DOM 的某个部分\nvar body = document.querySelector(\"body\");\nbody.appendChild(fragment);\n\n// 这时 div 和 p 被添加至 body 元素，而不会触发额外的布局重排。\n```\n\n`DocumentFragment` 提供了一个高效的方式去操作 `DOM` 而不影响页面的渲染性能，在很多需要进行批量 DOM 操作的场合非常有用。\n",{"_58":388,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/722/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/722/timeline",{"_58":391,"_60":61,"_62":392,"_64":393,"_66":394,"_68":395,"_70":396,"_72":397,"_74":398,"_76":399,"_78":400,"_111":401,"_131":132,"_133":24,"_134":-5,"_135":410,"_137":411,"_159":195,"_153":413,"_155":414,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":415,"_170":416,"_176":417,"_178":418,"_190":420,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/687","https://api.github.com/repos/pro-collection/interview-question/issues/687/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/687/comments","https://api.github.com/repos/pro-collection/interview-question/issues/687/events","https://github.com/pro-collection/interview-question/issues/687",2241493620,"I_kwDOJGDC6c6Fmnp0",687,"JS 严格模式作用是啥？【热度: 530】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[402,409],{"_70":403,"_72":404,"_58":405,"_117":406,"_119":407,"_121":24,"_122":408},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":412,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-13T10:22:07Z","2024-04-18T02:17:29Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"JavaScript的严格模式（\"use strict\"）是一种限制JavaScript语法的方式，目的是为了捕捉一些常见的编码错误，同时阻止或者抛出错误对于一些保险不良行为的使用。它通过在脚本或函数的顶部添加一个特殊的声明来启用，声明如下：\n\n```javascript\n\"use strict\";\n```\n\n以下是严格模式的一些主要作用：\n\n1. **消除JavaScript语法的一些静默错误**：\n 在非严格模式下，这些错误不会抛出异常，可能导致开发者难以发现。启用严格模式后，这些错误会被抛出。\n\n2. **修复可能使JavaScript引擎难以优化代码的一些错误**：\n 有些代码模式可能是引擎优化的障碍。严格模式下这些模式会被禁止，有时候能提升代码的性能。\n\n3. **禁止使用某些语法**：\n 这些语法在未来的ECMAScript版本中可能会有其他的用途。比如，未来的ECMAScript版本可能会使用`implements`, `interface`, `let`, `package`, `private`, `protected`, `public`, `static`, 和 `yield` 作为关键词。\n\n4. **为未来新版JS做准备**：\n 有些旧语法或行为在严格模式下已被废弃，确保代码兼容未来语言的演变。\n\n以下是“严格模式”相比于“非严格模式”的一些具体区别：\n\n- 在严格模式下，试图给未声明的变量赋值会抛出错误。\n- 删除不可删除的属性会抛错（如 `delete Object.prototype;`）。\n- 要求函数的参数名唯一。\n- 禁用`with`语句。\n- `eval`在严格模式下有自己的作用域，且不会引入新的变量。\n- 禁止`this`关键字指向全局对象。\n- 不能使用八进制语法（例如，`042`这样的八进制数字会抛错）。\n- 不能给不可写属性赋值，也不能给只读属性赋值（getter-only）。\n- 禁止在非构造函数中使用`delete`删除变量（否则会被忽略而不是抛错）。\n\n总的来说，严格模式使得JavaScript语言有了更严谨的错误检查体系，促使开发者编写出更安全、更有利于维护和运行效率的代码。",{"_58":419,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/687/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/687/timeline",{"_58":422,"_60":61,"_62":423,"_64":424,"_66":425,"_68":426,"_70":427,"_72":428,"_74":429,"_76":430,"_78":431,"_111":432,"_131":132,"_133":24,"_134":-5,"_135":435,"_137":436,"_159":152,"_153":438,"_155":438,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":439,"_170":440,"_176":441,"_178":442,"_190":444,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/678","https://api.github.com/repos/pro-collection/interview-question/issues/678/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/678/comments","https://api.github.com/repos/pro-collection/interview-question/issues/678/events","https://github.com/pro-collection/interview-question/issues/678",2229673640,"I_kwDOJGDC6c6E5h6o",678,"为什么 Vite 速度比 Webpack 快？【热度: 382】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[433,434],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":437,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-07T10:00:17Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：vite 编译速度、vite 速度与 webpack 速度\n\n#### 1、开发模式的差异\n\n在开发环境中，`Webpack` 是先打包再启动开发服务器，而 `Vite` 则是直接启动，然后再按需编译依赖文件。（大家可以启动项目后检查源码 `Sources` 那里看到）\n\n这意味着，当使用 `Webpack` 时，所有的模块都需要在开发前进行打包，这会增加启动时间和构建时间。\n\n而 `Vite` 则采用了不同的策略，它会在请求模块时再进行实时编译，这种按需动态编译的模式极大地缩短了编译时间，特别是在大型项目中，文件数量众多，`Vite` 的优势更为明显。\n\n**Webpack启动**\n\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31fa5a46d4e74c5db56928f1bb2087c4~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1029&h=552&s=47251&e=png&b=fcfcfc)\n\n**Vite启动**\n\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfa5c4618b75419d8b3a9139425972e5~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=892&h=838&s=50064&e=png&b=ffffff)\n\n#### 2、对ES Modules的支持\n\n现代浏览器本身就支持 `ES Modules`，会`主动发起`请求去获取所需文件。Vite充分利用了这一点，将开发环境下的模块文件直接作为浏览器要执行的文件，而不是像 Webpack 那样`先打包`，再交给浏览器执行。这种方式减少了中间环节，提高了效率。\n\n**什么是ES Modules？**\n\n通过使用 `export` 和 `import` 语句，ES Modules 允许在浏览器端导入和导出模块。\n\n当使用 ES Modules 进行开发时，开发者实际上是在构建一个`依赖关系图`，不同依赖项之间通过导入语句进行关联。\n\n主流浏览器（除IE外）均支持ES Modules，并且可以通过在 script 标签中设置 `type=\"module\"`来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，触发DOMContentLoaded事件前。\n\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b03dbc4400c745c8bca371a9ab63f52b~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=2059&h=823&s=194009&e=png&b=f0e6d2)\n\n#### 3、底层语言的差异\n\nWebpack 是基于 `Node.js` 构建的，而 Vite 则是基于 `esbuild` 进行预构建依赖。esbuild 是采用 `Go` 语言编写的，Go 语言是`纳秒`级别的，而 Node.js 是`毫秒`级别的。因此，Vite 在打包速度上相比Webpack 有 `10-100` 倍的提升。\n\n**什么是预构建依赖？**\n\n预构建依赖通常指的是在项目`启动或构建`之前，对项目中所需的依赖项进行预先的`处理或构建`。这样做的好处在于，当项目实际运行时，可以`直接使用`这些已经预构建好的依赖，而无需再进行实时的编译或构建，从而提高了应用程序的运行速度和效率。\n\n#### 4、热更新的处理\n\n在 Webpack 中，当一个模块或其依赖的模块内容改变时，需要`重新编译`这些模块。\n\n而在 Vite 中，当某个模块内容改变时，只需要让浏览器`重新请求`该模块即可，这大大减少了热更新的时间。\n\n#### 总结\n\n总的来说，Vite 之所以比 Webpack 快，主要是因为它采用了`不同的开发模式`、`充分利用了现代浏览器的 ES Modules 支持`、`使用了更高效的底层语言`，`并优化了热更新的处理`。这些特点使得 Vite在大型项目中具有显著的优势，能够快速启动和构建，提高开发效率。\n\n\n#### 参考文档：\nhttps://juejin.cn/post/7344916114204049445\n",{"_58":443,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/678/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/678/timeline",{"_58":446,"_60":61,"_62":447,"_64":448,"_66":449,"_68":450,"_70":451,"_72":452,"_74":453,"_76":454,"_78":455,"_111":456,"_131":132,"_133":24,"_134":-5,"_135":459,"_137":460,"_159":152,"_153":462,"_155":463,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":464,"_170":465,"_176":466,"_178":467,"_190":469,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/627","https://api.github.com/repos/pro-collection/interview-question/issues/627/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/627/comments","https://api.github.com/repos/pro-collection/interview-question/issues/627/events","https://github.com/pro-collection/interview-question/issues/627",1987690997,"I_kwDOJGDC6c52ecH1",627,"[React] 类组件的生命周期，映射的 hooks 哪些 api ?【热度: 314】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[457,458],{"_70":289,"_72":290,"_58":291,"_117":292,"_119":293,"_121":24,"_122":294},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":461,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-10T14:03:34Z","2023-11-10T14:03:35Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：生命周期映射 hooks\n\n下面是 React 类组件的生命周期方法和对应的 Hooks API：\n\n1. `constructor`：`useState` 可以在函数组件中模拟类组件的 `constructor`。在函数组件内部使用 `useState` 声明状态变量，并设置初始值。\n\n2. `componentDidMount`：`useEffect` 用于模拟 `componentDidMount`。通过在 `useEffect` 的回调函数中返回一个清理函数，可以模拟 `componentWillUnmount`。\n\n3. `componentDidUpdate`：`useEffect` 可以在函数组件中模拟 `componentDidUpdate`。通过使用 `useEffect` 的第二个参数，可以指定依赖项的数组，当依赖项发生变化时，`useEffect` 的回调函数会被调用。\n\n4. `componentWillUnmount`：`useEffect` 的清理函数可以模拟 `componentWillUnmount`。在 `useEffect` 的回调函数中返回一个清理函数，它会在组件销毁时执行。\n\n5. `shouldComponentUpdate`：`React.memo` 可以用于函数组件的性能优化，类似于 `shouldComponentUpdate` 的功能。`React.memo` 可以包裹一个组件，并只在组件的 props 发生变化时重新渲染。\n\n6. `getDerivedStateFromProps`：`useState` 可以通过提供 setter 函数，将 props 的值作为 state 的初始值。在组件重新渲染时，`useState` 不会重置 state 的值。\n\n并不是每一个生命周期方法都有与之对应的 Hooks API。\nHooks 是为了解决函数式组件的状态管理和副作用问题而引入的新特性，因此 Hooks 在某种程度上替换了类组件的生命周期方法。\n\n下面是一个使用表格方式对比 React 类组件的生命周期方法和对应的 Hooks API：\n\n| 生命周期方法 | Hooks API |\n|-------------------|-----------------------------------------------|\n| constructor | useState |\n| componentDidMount | useEffect（第二个参数为空数组） |\n| componentDidUpdate | useEffect（包含依赖项的数组） |\n| componentWillUnmount | useEffect 的清理函数 |\n| shouldComponentUpdate | React.memo |\n| getDerivedStateFromProps | useState（通过提供 setter 函数） |\n\n \n\n\n",{"_58":468,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/627/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/627/timeline",{"_58":471,"_60":61,"_62":472,"_64":473,"_66":474,"_68":475,"_70":476,"_72":477,"_74":478,"_76":479,"_78":480,"_111":481,"_131":132,"_133":24,"_134":-5,"_135":484,"_137":485,"_159":152,"_153":487,"_155":488,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":489,"_170":490,"_176":491,"_178":492,"_190":494,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/625","https://api.github.com/repos/pro-collection/interview-question/issues/625/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/625/comments","https://api.github.com/repos/pro-collection/interview-question/issues/625/events","https://github.com/pro-collection/interview-question/issues/625",1985968542,"I_kwDOJGDC6c52X3me",625,"[Webpack] Webpack vs Vite的核心差异【热度: 820】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[482,483],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":486,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-09T16:14:26Z","2023-12-17T09:50:12Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：Webpack vs Vite 差异\n\n#### **构建速度**:\n\n* **Webpack**: Webpack的构建速度相对较慢，尤其在大型项目中，因为它需要分析整个依赖图，进行多次文件扫描和转译。\n* **Vite**: Vite以开发模式下的极速构建著称。它利用ES模块的特性，只构建正在编辑的文件，而不是整个项目。这使得它在开发环境下几乎是即时的。\n\n#### **开发模式**:\n\n* **Webpack**: Webpack通常使用热模块替换（HMR）来实现快速开发模式，但配置相对复杂。\n* **Vite**: Vite的开发模式非常轻量且快速，支持HMR，但无需额外配置，因为它默认支持。\n\n#### **配置复杂度**:\n\n* **Webpack**: Webpack的配置相对复杂，特别是在处理不同类型的资源和加载器时。\n* **Vite**: Vite鼓励零配置，使得项目起步非常简单，但同时也支持自定义配置，使其适用于复杂项目。\n\n#### **插件生态**:\n\n* **Webpack**: Webpack拥有庞大的插件生态系统，适用于各种不同的需求。\n* **Vite**: Vite也有相当数量的插件，但相对较小，因为它的开发模式和构建方式减少了对一些传统插件的需求。\n\n#### **编译方式**:\n\n* **Webpack**: Webpack使用了多种加载器和插件来处理不同类型的资源，如JavaScript、CSS、图片等。\n* **Vite**: Vite利用ES模块原生支持，使用原生浏览器导入来处理模块，不需要大规模的编译和打包。\n\n#### **应用场景**:\n\n* **Webpack**: 适用于复杂的大型项目，特别是需要大量自定义配置和复杂构建管道的项目。\n* **Vite**: 更适用于小到中型项目，或者需要快速开发原型和小型应用的场景。\n\n#### **打包原理**:\n\n* **Webpack**: Webpack的打包原理是将所有资源打包成一个或多个bundle文件，通常是一个JavaScript文件。\n* **Vite**: Vite的打包原理是保持开发时的模块化结构，使用浏览器原生的导入机制，在生产环境中进行代码分割和优化。\n\n#### **优缺点**:\n\n* **Webpack**:\n\n * 优点：灵活、强大、适用于复杂场景、庞大的插件生态。\n * 缺点：构建速度较慢、配置复杂、开发体验不如Vite流畅。\n\n* **Vite**:\n\n * 优点：极快的开发构建速度、零配置启动、原生ES模块支持、适用于小型项目和快速原型开发。\n * 缺点：插件生态相对较小、不太适用于复杂大型项目。\n\n\n#### 参考文档\n- https://juejin.cn/post/7273427487588843581\n",{"_58":493,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/625/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/625/timeline",{"_58":496,"_60":61,"_62":497,"_64":498,"_66":499,"_68":500,"_70":501,"_72":502,"_74":503,"_76":504,"_78":505,"_111":506,"_131":132,"_133":24,"_134":-5,"_135":509,"_137":510,"_159":152,"_153":512,"_155":513,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":514,"_170":515,"_176":516,"_178":517,"_190":519,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/611","https://api.github.com/repos/pro-collection/interview-question/issues/611/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/611/comments","https://api.github.com/repos/pro-collection/interview-question/issues/611/events","https://github.com/pro-collection/interview-question/issues/611",1972516872,"I_kwDOJGDC6c51kjgI",611,"[Webpack] 通过 babel-loader 来编译 tsx 文件，应该如何配置呢？【热度: 221】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[507,508],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":511,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-11-01T14:43:24Z","2023-11-01T14:57:36Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"如果你想使用 `babel-loader` 来编译 TypeScript 文件（`.tsx`），你需要在 `babel.config.js` 和 `webpack.config.js` 两个文件中进行相应的配置。\n\n首先，在 `babel.config.js` 文件中，你需要添加 `@babel/preset-typescript` 预设，以便兼容 TypeScript：\n\n```javascript\nmodule.exports = {\n presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']\n};\n```\n\n接下来，在 `webpack.config.js` 文件中，你需要对 `.tsx` 文件使用 `babel-loader`：\n\n```javascript\nmodule.exports = {\n // ...其他配置项\n module: {\n rules: [\n // ...其他规则\n {\n test: /\\.(ts|tsx)$/,\n exclude: /node_modules/,\n use: 'babel-loader',\n },\n ],\n },\n};\n```\n\n这样，当 webpack 执行构建时，`babel-loader` 将会使用 `babel.config.js` 中配置的预设来编译 `.tsx` 文件。同时，除了 TypeScript 文件，你还可以使用该配置来编译 JavaScript 文件（`.js`）和 React JSX 文件（`.jsx`）。\n\n**追问** \n`'@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'` 这三个插件的作用是什么？\n\n- `@babel/preset-env`：它是 Babel 的一个预设，用于根据目标环境（浏览器、Node.js 等）自动确定需要转译的 JavaScript 特性，并将其转换为目标环境所支持的代码。它将根据你配置的目标环境和浏览器的使用情况，智能地选择需要转译的特性，以减小转译后的代码体积。它也包含了一些插件，例如转换箭头函数、解构赋值、模板字符串等。\n\n- `@babel/preset-typescript`：它是 Babel 的一个预设，用于将 TypeScript 代码转译为 JavaScript 代码，以便在不支持 TypeScript 的环境中运行。它包含了一些插件，例如转换 TypeScript 的类型注解、类成员修饰符、泛型类型等。\n\n- `@babel/preset-react`：它是 Babel 的一个预设，用于将 React 的 JSX 语法转译为普通的 JavaScript 代码，以便在不支持 JSX 的环境中运行。它也包含了一些插件，例如转换 JSX 语法、处理 React 的内置组件等。\n",{"_58":518,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/611/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/611/timeline",{"_58":521,"_60":61,"_62":522,"_64":523,"_66":524,"_68":525,"_70":526,"_72":527,"_74":528,"_76":529,"_78":530,"_111":531,"_131":132,"_133":24,"_134":-5,"_135":539,"_137":540,"_159":152,"_153":542,"_155":543,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":544,"_170":545,"_176":546,"_178":547,"_190":549,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/599","https://api.github.com/repos/pro-collection/interview-question/issues/599/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/599/comments","https://api.github.com/repos/pro-collection/interview-question/issues/599/events","https://github.com/pro-collection/interview-question/issues/599",1955497329,"I_kwDOJGDC6c50joVx",599,"[代码实现] 不使用 setTimeout 来实现 setInterval【热度: 231】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[532,533],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":534,"_72":535,"_58":536,"_117":537,"_119":213,"_121":24,"_122":538},5931045040,"LA_kwDOJGDC6c8AAAABYYSQsA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/%E7%AE%97%E6%B3%95","代码实现/算法","代码实现或者算法实现",[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":541,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-21T13:40:53Z","2023-10-21T14:06:25Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：实现setInterval、requestAnimationFrame实现setInterval、setTimeout实现setInterval\n\n如果不使用 `setTimeout` 来实现 `setInterval`，可以使用 `requestAnimationFrame` 函数和时间戳来实现定时循环。下面是实现的代码示例：\n\n**实现方式1**\n\n```javascript\nfunction mySetInterval(callback, interval) {\n let startTime = Date.now();\n let elapsedTime = 0;\n\n function loop() {\n const currentTime = Date.now();\n const deltaTime = currentTime - startTime;\n\n if (deltaTime >= interval) {\n callback();\n startTime = currentTime;\n }\n\n requestAnimationFrame(loop);\n }\n\n requestAnimationFrame(loop);\n\n return {\n clear: function() {\n startTime = 0;\n elapsedTime = 0;\n }\n };\n}\n```\n\n这个实现中，我们通过 `requestAnimationFrame` 函数来循环执行 `loop` 函数。在 `loop` 函数中，我们获取当前时间戳 `currentTime`，并计算与上一次执行的时间间隔 `deltaTime`\n。如果 `deltaTime` 大于等于指定的间隔时间 `interval`，则执行回调函数 `callback`，并更新 `startTime` 为当前时间，以便下一次判断。\n\n最后，返回一个具有 `clear` 方法的对象，用于清除定时器。调用 `clear` 方法时，将 `startTime` 和 `elapsedTime` 重置为初始值。\n\n**实现方式2**\n\n```js\nconst obj = {\n timer: null,\n setInterval: function(callback, interval) {\n const now = Date.now\n let startTime = now()\n let endTime = startTime\n const self = this\n const loop = function() {\n self.timer = requestAnimationFrame(loop)\n endTime = now()\n if (endTime - startTime >= interval) {\n startTime = endTime = now()\n callback && callback()\n }\n }\n this.timer = requestAnimationFrame(loop)\n return this.timer\n },\n clearInterval: function() {\n cancelAnimationFrame(this.timer)\n }\n}\n\nlet count = 0\nconst timer = obj.setInterval(() => {\n console.log('interval...')\n count++\n if (count >= 3) {\n obj.clearInterval()\n }\n}, 500)\n```\n\n**实现方式3**\n\n使用 `setTimeout` 来实现\n\n```ts\n/**\n * setTimeout 版本\n */\nfunction _setIntervalUseTimeout(\n fn: () => void,\n millisec: number,\n count?: number\n) {\n let timer: number;\n function interval() {\n if (typeof count === 'undefined' || count-- > 0) {\n timer = setTimeout(interval, millisec);\n try {\n fn();\n } catch (e: any) {\n count = 0;\n throw e.toString();\n }\n }\n }\n timer = setTimeout(interval, millisec);\n return {\n clear: () => clearTimeout(timer),\n };\n}\n```\n",{"_58":548,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/599/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/599/timeline",{"_58":551,"_60":61,"_62":552,"_64":553,"_66":554,"_68":555,"_70":556,"_72":557,"_74":558,"_76":559,"_78":560,"_111":561,"_131":132,"_133":24,"_134":-5,"_135":570,"_137":571,"_159":152,"_153":573,"_155":573,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":574,"_170":575,"_176":576,"_178":577,"_190":579,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/598","https://api.github.com/repos/pro-collection/interview-question/issues/598/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/598/comments","https://api.github.com/repos/pro-collection/interview-question/issues/598/events","https://github.com/pro-collection/interview-question/issues/598",1943879451,"I_kwDOJGDC6c5z3T8b",598,"PM2 部署 nodejs 有哪些优势？【热度: 199】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[562,569],{"_70":563,"_72":564,"_58":565,"_117":566,"_119":567,"_121":24,"_122":568},5232525911,"LA_kwDOJGDC6c8AAAABN-ICVw","https://api.github.com/repos/pro-collection/interview-question/labels/Nodejs","Nodejs","AC3F88","Nodejs 研究",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":572,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-15T12:58:28Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：PM2 Nodejs\n\nPM2部署Node.js应用程序有以下几个优势：\n\n1. 进程管理和监控：PM2可以自动监控Node.js应用程序的运行状态，并在进程崩溃或无响应时自动重启进程。它还提供了实时的日志输出和监控面板，方便查看和分析应用程序的运行情况。\n\n2. 无缝部署和热重载：使用PM2可以实现无缝部署Node.js应用程序，无需手动停止和启动进程。通过使用PM2的热重载功能，可以在不中断服务的情况下重新加载应用程序代码，实现零停机更新。\n\n3. 环境管理和配置：PM2可以通过环境变量来管理应用程序的配置，如端口号、数据库连接等。它还支持在不同的环境（如开发、测试、生产）之间切换配置，方便应用程序的部署和管理。\n\n4. 高可用性和负载均衡：PM2支持启动多个进程，并自动在多个CPU核心间平衡负载。这样可以提高应用程序的并发处理能力和性能，确保应用的高可用性和稳定性。\n\n5. 集中化管理：PM2提供了命令行工具和Web界面，可以集中管理和操作所有的Node.js应用程序。通过PM2，可以方便地查看和管理进程、查看日志、监控性能指标等，提升管理效率。\n\n综上所述，PM2提供了完善的进程管理和监控功能，以及便捷的部署和配置管理方式，可以大大简化Node.js应用程序的部署和运维工作，提高应用的可用性和性能。\n\n参考文档： https://zhuanlan.zhihu.com/p/627009546\n",{"_58":578,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/598/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/598/timeline",{"_58":581,"_60":61,"_62":582,"_64":583,"_66":584,"_68":585,"_70":586,"_72":587,"_74":588,"_76":589,"_78":590,"_111":591,"_131":132,"_133":24,"_134":-5,"_135":600,"_137":601,"_159":152,"_153":603,"_155":604,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":605,"_170":606,"_176":607,"_178":608,"_190":610,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/597","https://api.github.com/repos/pro-collection/interview-question/issues/597/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/597/comments","https://api.github.com/repos/pro-collection/interview-question/issues/597/events","https://github.com/pro-collection/interview-question/issues/597",1943867605,"I_kwDOJGDC6c5z3RDV",597,"http1.1 的 keep-alive 和 http2 的多路复用有什么区别？【热度: 87】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[592,599],{"_70":593,"_72":594,"_58":595,"_117":596,"_119":597,"_121":24,"_122":598},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":602,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-15T12:22:18Z","2023-10-15T12:22:19Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：http1.1 keep-alive、http2 多路复用\n\nHTTP/1.1 的 keep-alive 和 HTTP/2 的多路复用是两种不同的技术机制，它们都旨在提高 HTTP 协议的性能和效率，但具有不同的实现方式和特点。\n\n1. HTTP/1.1 的 keep-alive：\n - 在 HTTP/1.1 中，默认情况下，每个请求都需要建立一个新的 TCP 连接，请求完成后即关闭连接。\n - 为了减少这种连接建立和关闭的开销，HTTP/1.1 引入了 keep-alive 机制，允许在一个 TCP 连接上发送多个 HTTP 请求和响应。\n - keep-alive 通过在响应头中添加 `Connection: keep-alive` 字段来启用。\n - 使用 keep-alive 可以减少连接建立和关闭的开销，提高性能。\n\n2. HTTP/2 的多路复用：\n - HTTP/2 使用二进制协议而不是文本协议，通过在一个 TCP 连接上同时发送多个请求和响应，实现了多路复用。\n - 在 HTTP/2 中，请求和响应被切分为多个帧，每个帧都有一个帧头，可以根据帧头中的流标识符将帧重新组装成完整的请求或响应。\n - 多路复用允许多个请求和响应同时在一个 TCP 连接上进行传输，避免了 HTTP/1.1 中的队头阻塞问题。\n - 多路复用提高了并发性能，减少了延迟，提升了 Web 页面的加载速度。\n\n总结：\nHTTP/1.1 的 keep-alive 通过在一个 TCP 连接上发送多个请求和响应来减少连接建立和关闭的开销，提高性能。而 HTTP/2 的多路复用则通过在一个 TCP 连接上同时发送多个请求和响应，实现了并发传输，提高了并发性能和加载速度。\n",{"_58":609,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/597/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/597/timeline",{"_58":612,"_60":61,"_62":613,"_64":614,"_66":615,"_68":616,"_70":617,"_72":618,"_74":619,"_76":620,"_78":621,"_111":622,"_131":132,"_133":24,"_134":-5,"_135":625,"_137":626,"_159":152,"_153":628,"_155":628,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":629,"_170":630,"_176":631,"_178":632,"_190":634,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/596","https://api.github.com/repos/pro-collection/interview-question/issues/596/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/596/comments","https://api.github.com/repos/pro-collection/interview-question/issues/596/events","https://github.com/pro-collection/interview-question/issues/596",1943866882,"I_kwDOJGDC6c5z3Q4C",596,"为何 http2 非常快速的就过度到了 HTTP3 ？【热度: 945】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[623,624],{"_70":593,"_72":594,"_58":595,"_117":596,"_119":597,"_121":24,"_122":598},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":627,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-15T12:20:09Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：http3\n\nHTTP/2 被广泛采用后，HTTP/3 的出现是为了解决一些 HTTP/2 存在的问题以及提升性能。\n\nHTTP/2 在性能方面确实有很大的改进，通过多路复用和头部压缩等特性，可以提高页面加载的速度和效率。然而，HTTP/2 仍然使用了基于 TCP 的传输层协议。TCP 的一些特性，如拥塞控制和传输层阻塞，可能造成延迟和性能下降。\n\nHTTP/3 则引入了一种全新的传输层协议，即基于 UDP 的 QUIC（Quick UDP Internet Connections）。QUIC 具有更低的延迟和更好的拥塞控制，通过在应用层实现了可靠性和安全性，避免了在传输层和应用层之间的不必要的交互。\n\n另外，HTTP/3 还支持多路复用、头部压缩等 HTTP/2 的特性。这意味着在 HTTP/3 中，仍然可以享受到 HTTP/2 带来的性能优势，同时还能更好地解决一些 HTTP/2 存在的问题。\n\n综上所述，HTTP/3 之所以被广泛采用是因为它在 HTTP/2 的基础上进一步提升了性能，并解决了一些 HTTP/2 存在的问题，提供了更快速和更可靠的页面加载体验。\n",{"_58":633,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/596/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/596/timeline",{"_58":636,"_60":61,"_62":637,"_64":638,"_66":639,"_68":640,"_70":641,"_72":642,"_74":643,"_76":644,"_78":645,"_111":646,"_131":132,"_133":24,"_134":-5,"_135":649,"_137":650,"_159":152,"_153":652,"_155":653,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":654,"_170":655,"_176":656,"_178":657,"_190":659,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/592","https://api.github.com/repos/pro-collection/interview-question/issues/592/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/592/comments","https://api.github.com/repos/pro-collection/interview-question/issues/592/events","https://github.com/pro-collection/interview-question/issues/592",1927299328,"I_kwDOJGDC6c5y4EEA",592,"在 webpack 中，通常用于 css 提取的工具是什么？【热度: 269】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[647,648],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":651,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-05T03:10:58Z","2023-10-05T03:16:15Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：mini-css-extract-plugin作用、mini-css-extract-plugin使用\r\n\r\n**概念**\r\n\r\n在 webpack 中，通常使用 `mini-css-extract-plugin` 来提取 CSS。它是一个独立的插件，可以将 CSS 从 JavaScript 文件中提取出来，生成独立的 CSS 文件。\r\n使用 `mini-css-extract-plugin` 可以优化代码分离和缓存，以及提高加载速度。\r\n\r\n通过配置 webpack 的插件选项，可以将 `mini-css-extract-plugin` 添加到 webpack 构建流程中。在配置中，需要将该插件实例化，并指定输出的 CSS 文件名和路径。\r\n一旦配置完成并运行 webpack 构建，`mini-css-extract-plugin` 就会将 CSS 提取到独立的文件中，而不是将其嵌入到 JavaScript 文件中。\r\n\r\n示例代码如下：\r\n\r\n```javascript\r\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\r\n\r\nmodule.exports = {\r\n // ...其他配置\r\n module: {\r\n rules: [\r\n // ...其他规则\r\n {\r\n test: /\\.css$/,\r\n use: [\r\n MiniCssExtractPlugin.loader,\r\n 'css-loader',\r\n ],\r\n },\r\n ],\r\n },\r\n plugins: [\r\n new MiniCssExtractPlugin({\r\n filename: '[name].css',\r\n chunkFilename: '[id].css',\r\n }),\r\n ],\r\n};\r\n```\r\n\r\n在上述示例中，`MiniCssExtractPlugin.loader` 是用于提取 CSS 的 loader。`css-loader` 用于处理 CSS 文件的导入和解析。\r\n`MiniCssExtractPlugin`则是插件实例，用于配置输出的 CSS 文件名。\r\n\r\n\r\n**基本API使用**\r\n\r\n下面是 `MiniCssExtractPlugin` 的常用参数及其说明：\r\n\r\n| 参数名 | 类型 | 默认值 | 描述 |\r\n| -------------------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------- |\r\n| `filename` | `string` | `[name].css` | 输出的 CSS 文件名，可以包含 `[name]`、`[id]`、`[contenthash]` 等占位符变量，用于生成唯一的文件名。 |\r\n| `chunkFilename` | `string` | `undefined` | 输出的 CSS 文件名的 chunk 文件名，可以包含 `[name]`、`[id]`、`[contenthash]` 等占位符变量。 |\r\n| `ignoreOrder` | `boolean` | `false` | 是否忽略 CSS 导入顺序。 |\r\n| `insert` | `function` | `string` | `head` | 用于指定 CSS 文件的插入位置。可以是字符串（`head`、`body`）或自定义函数。 |\r\n| `publicPath` | `string` | `undefined` | 设置在 CSS 文件中使用的公共路径。 |\r\n| `attributes` | `object` | `{}` | 附加到 `link` 标签的自定义属性。 |\r\n| `chunkLoadTimeout` | `number` | `120000` | 加载 CSS chunk 的超时时间（毫秒）。 |\r\n| `esModule` | `boolean` | `true` | 是否使用 ES modules 规范导出 CSS 模块。 |\r\n| `experimentalUseImportModule` | `boolean` | `false` | 是否在导出 CSS 模块时使用 `import()` 函数。**此选项需要 webpack 5+ 才能使用。** |\r\n| `hmr` | `boolean` | `undefined` | 是否启用模块热替换（Hot Module Replacement）。**此选项需要 webpack 5+ 才能使用。** |\r\n| `ignoreOrder` | `boolean` | `false` | 是否忽略 CSS 导入顺序。 |\r\n| `minimize` | `boolean` | `object` | `true` | 是否对提取的 CSS 进行压缩。可以通过传入一个对象来设置压缩的选项。使用 `cssnano` 进行 CSS 压缩。 |\r\n| `sourceMap` | `boolean` | `false` | 是否生成 CSS 的 Source Map。 |\r\n| `moduleFilename` | `function` | `(getAssetPath => `${path.relative(options.context, getAssetPath('css'))}`)` | 用于自定义生成的 CSS 文件路径和文件名的函数。 |\r\n| `hot` | `boolean` | `undefined` | 是否启用热模块替换（Hot Module Replacement）。**此选项需要 webpack 4.46.0+ 才能使用。** |\r\n\r\n",{"_58":658,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/592/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/592/timeline",{"_58":661,"_60":61,"_62":662,"_64":663,"_66":664,"_68":665,"_70":666,"_72":667,"_74":668,"_76":669,"_78":670,"_111":671,"_131":132,"_133":24,"_134":-5,"_135":674,"_137":675,"_159":152,"_153":677,"_155":678,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":679,"_170":680,"_176":681,"_178":682,"_190":684,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/591","https://api.github.com/repos/pro-collection/interview-question/issues/591/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/591/comments","https://api.github.com/repos/pro-collection/interview-question/issues/591/events","https://github.com/pro-collection/interview-question/issues/591",1925865579,"I_kwDOJGDC6c5yymBr",591,"[React] useLayoutEffect 和 useEffect 有什么区别?【热度: 313】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[672,673],{"_70":289,"_72":290,"_58":291,"_117":292,"_119":293,"_121":24,"_122":294},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":676,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-04T10:13:59Z","2023-10-04T10:14:27Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：useLayoutEffect 和 useEffect 区别\n\nuseLayoutEffect 和 useEffect 的主要区别在于它们执行的时机。\n\n- **useLayoutEffect**:\n useLayoutEffect 是在 DOM 更新完成但在浏览器绘制之前同步执行的钩子函数。它会在 DOM 更新之后立即执行，阻塞浏览器的绘制过程。这使得它更适合于需要立即获取最新 DOM 布局信息的操作，如测量元素尺寸或位置等。使用 useLayoutEffect 可以在更新后同步触发副作用，从而保证 DOM 的一致性。\n\n- **useEffect**:\n useEffect 是在组件渲染完毕后异步执行的钩子函数。它会在浏览器完成绘制后延迟执行，不会阻塞浏览器的绘制过程。这使得它更适合于处理副作用操作，如发送网络请求、订阅事件等。使用 useEffect 可以将副作用操作放到组件渲染完成后执行，以避免阻塞浏览器绘制。\n\n总结：\n- useLayoutEffect 是同步执行的钩子函数，在 DOM 更新后立即执行，可能会阻塞浏览器的绘制过程；\n- useEffect 是异步执行的钩子函数，在浏览器完成绘制后延迟执行，不会阻塞浏览器的绘制过程。\n\n通常情况下，应优先使用 useEffect，因为它不会阻塞浏览器的渲染，并且能够满足大多数的副作用操作需求。只有在需要获取最新的 DOM 布局信息并立即触发副作用时，才需要使用 useLayoutEffect。\n",{"_58":683,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/591/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/591/timeline",{"_58":686,"_60":61,"_62":687,"_64":688,"_66":689,"_68":690,"_70":691,"_72":692,"_74":693,"_76":694,"_78":695,"_111":696,"_131":132,"_133":24,"_134":-5,"_135":699,"_137":700,"_159":152,"_153":702,"_155":703,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":704,"_170":705,"_176":706,"_178":707,"_190":709,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/590","https://api.github.com/repos/pro-collection/interview-question/issues/590/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/590/comments","https://api.github.com/repos/pro-collection/interview-question/issues/590/events","https://github.com/pro-collection/interview-question/issues/590",1925857753,"I_kwDOJGDC6c5yykHZ",590,"[React] 如何避免不必要的渲染?【热度: 632】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[697,698],{"_70":289,"_72":290,"_58":291,"_117":292,"_119":293,"_121":24,"_122":294},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":701,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-04T10:09:10Z","2023-10-04T10:09:11Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：react 渲染优化\n\n在 React 中，有几种方法可以避免不必要的渲染，以提高性能和优化应用程序的渲染过程：\n\n1. 使用 PureComponent 或 shouldComponentUpdate 方法：继承 PureComponent 类或在自定义组件中实现 shouldComponentUpdate 方法，以检查组件的 props 和 state 是否发生变化。如果没有变化，则阻止组件的重新渲染。这种方式适用于简单的组件，并且可以自动执行浅比较。\n\n2. 使用 React.memo 高阶组件：使用 React.memo 包装函数组件，以缓存组件的渲染结果，并仅在其 props 发生变化时重新渲染。这种方式适用于函数组件，并且可以自动执行浅比较。\n\n3. 避免在 render 方法中创建新对象：由于对象的引用发生变化，React 将会认为组件的 props 或 state 发生了变化，从而触发重新渲染。因此，应尽量避免在 render 方法中创建新的对象，尤其是在大型数据结构中。\n\n4. 使用 key 属性唯一标识列表项：在渲染列表时，为每个列表项指定唯一的 key 属性。这样，当列表项重新排序、添加或删除时，React 可以更准确地确定哪些列表项需要重新渲染，而不是重新渲染整个列表。\n\n5. 使用 useCallback 和 useMemo 避免不必要的函数和计算：使用 useCallback 缓存函数引用，以确保只有在其依赖项发生变化时才重新创建函数。使用 useMemo 缓存计算结果，以确保只有在其依赖项发生变化时才重新计算结果。这些钩子函数可以帮助避免不必要的函数创建和计算过程，从而提高性能。\n\n6. 使用 React.lazy 和 Suspense 实现按需加载组件：使用 React.lazy 函数和 Suspense 组件可以实现按需加载组件，只在需要时才加载组件代码。这可以减少初始渲染时的资源负载。\n",{"_58":708,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/590/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/590/timeline",{"_58":711,"_60":61,"_62":712,"_64":713,"_66":714,"_68":715,"_70":716,"_72":717,"_74":718,"_76":719,"_78":720,"_111":721,"_131":132,"_133":24,"_134":-5,"_135":730,"_137":731,"_159":152,"_153":733,"_155":734,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":735,"_170":736,"_176":737,"_178":738,"_190":740,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/589","https://api.github.com/repos/pro-collection/interview-question/issues/589/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/589/comments","https://api.github.com/repos/pro-collection/interview-question/issues/589/events","https://github.com/pro-collection/interview-question/issues/589",1925851660,"I_kwDOJGDC6c5yyioM",589,"css module 是什么？【热度: 346】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[722,729],{"_70":723,"_72":724,"_58":725,"_117":726,"_119":727,"_121":24,"_122":728},5232524505,"LA_kwDOJGDC6c8AAAABN-H82Q","https://api.github.com/repos/pro-collection/interview-question/labels/CSS","CSS","A46719","CSS 相关问题",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":732,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-04T10:05:31Z","2023-10-04T10:05:32Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：css module 概念、css module 作用\n\nCSS Modules 是一种用于组织和管理 CSS 的技术。它通过在编译时为每个 CSS 类名生成唯一的标识符，并将它们作为 JavaScript 对象的属性导出。这样，可以确保每个类名在整个应用程序中的唯一性，避免样式冲突。\n\n使用 CSS Modules，可以将 CSS 文件与组件文件绑定在一起，这样每个组件都有自己的 CSS 作用域，样式只会应用于特定的组件，不会影响其他组件。这种隔离性和局部作用域有助于降低样式冲突和维护 CSS 的复杂性。\n\nCSS Modules 还提供了一些其他功能，例如:\n\n1. 局部作用域: CSS Modules 允许在组件中定义局部样式，这些样式仅适用于该组件。这样，可以避免全局样式造成的副作用，并使组件更加可重用。\n\n2. 类名和样式的映射: 使用 CSS Modules，可以通过导入生成的样式对象，将类名映射到组件中的类名，并将其应用于相应的元素。这样可以方便地将样式与组件关联起来，并跟踪样式的变化。\n\n3. 继承和组合: CSS Modules 支持继承和组合样式。可以通过使用类名组合和继承规则，将多个样式应用于同一个元素或组件。\n\n总结来说，CSS Modules 提供了一种更可靠和可维护的方式来管理 CSS，通过实现局部作用域和唯一类名标识符，帮助开发者避免样式冲突和提高样式的可重用性。\n",{"_58":739,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/589/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/589/timeline",{"_58":742,"_60":61,"_62":743,"_64":744,"_66":745,"_68":746,"_70":747,"_72":748,"_74":749,"_76":750,"_78":751,"_111":752,"_131":132,"_133":24,"_134":-5,"_135":755,"_137":756,"_159":152,"_153":758,"_155":759,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":760,"_170":761,"_176":762,"_178":763,"_190":765,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/588","https://api.github.com/repos/pro-collection/interview-question/issues/588/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/588/comments","https://api.github.com/repos/pro-collection/interview-question/issues/588/events","https://github.com/pro-collection/interview-question/issues/588",1925847236,"I_kwDOJGDC6c5yyhjE",588,"全局样式命名冲突和样式覆盖问题怎么解决？【热度: 772】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[753,754],{"_70":723,"_72":724,"_58":725,"_117":726,"_119":727,"_121":24,"_122":728},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":757,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-04T10:02:59Z","2023-10-04T10:03:00Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：全局样式命名冲突\n\n在前端开发过程中，有几种常见的方法可以解决全局样式命名冲突和样式覆盖问题：\n\n1. 使用命名空间（Namespacing）：给样式类名添加前缀或命名空间，以确保每个组件的样式类名不会冲突。例如，在一个项目中，可以为每个组件的样式类名都添加一个唯一的前缀，例如`.componentA-button`和`.componentB-button`，这样可以避免命名冲突。\n\n2. 使用BEM命名规范：BEM（块、元素、修饰符）是一种常用的命名规范，可以将样式类名分成块（block）、元素（element）和修饰符（modifier）三个部分，以确保样式的唯一性和可读性。例如，`.button`表示一个块，`.button__icon`表示一个元素，`.button--disabled`表示一个修饰符。\n\n3. 使用CSS预处理器：CSS预处理器（如Sass、Less）可以提供变量、嵌套规则和模块化等功能，可以更方便地管理样式并避免命名冲突。例如，可以使用变量来定义颜色和尺寸，使用嵌套规则来组织样式，并将样式拆分成多个模块。\n\n4. 使用CSS模块：CSS模块提供了在组件级别上限定样式作用域的能力，从而避免了全局样式的冲突和覆盖。每个组件的样式定义在组件内部，使用唯一的类名，确保样式的隔离性和唯一性。\n\n5. 使用CSS-in-JS解决方案：CSS-in-JS是一种将CSS样式直接写入JavaScript代码中的方法，通过将样式与组件绑定，可以避免全局样式的冲突问题。一些常见的CSS-in-JS解决方案包括Styled Components、Emotion和CSS Modules with React等。\n",{"_58":764,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/588/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/588/timeline",{"_58":767,"_60":61,"_62":768,"_64":769,"_66":770,"_68":771,"_70":772,"_72":773,"_74":774,"_76":775,"_78":776,"_111":777,"_131":132,"_133":24,"_134":-5,"_135":780,"_137":781,"_159":152,"_153":783,"_155":784,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":785,"_170":786,"_176":787,"_178":788,"_190":790,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/583","https://api.github.com/repos/pro-collection/interview-question/issues/583/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/583/comments","https://api.github.com/repos/pro-collection/interview-question/issues/583/events","https://github.com/pro-collection/interview-question/issues/583",1920790790,"I_kwDOJGDC6c5yfPEG",583,"[React] 高阶组件理解多少？【热度: 655】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[778,779],{"_70":289,"_72":290,"_58":291,"_117":292,"_119":293,"_121":24,"_122":294},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":782,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-01T14:17:34Z","2023-10-01T14:17:48Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：什么是React高阶组件、React高阶组件满足的条件、React高阶组件使用场景\n\n**什么是高阶组件**\n\nReact高阶组件（Higher-Order Component，HOC）是一种用于复用组件逻辑的设计模式。它本质上是一个函数，接受一个组件作为参数，并返回一个新的增强过的组件。\n\n通过使用高阶组件，我们可以将一些通用的功能逻辑抽象出来，并将其应用到多个组件中，从而避免代码重复和逻辑分散的问题。\n\n**React高阶组件需要满足以下条件**：\n\n1. 接受一个组件作为参数：高阶组件函数应该接受一个组件作为参数，并返回一个新的增强过的组件。\n\n2. 返回一个新的组件：高阶组件函数应该在内部创建一个新的组件，并将其返回作为结果。这个新组件可以是一个类组件或函数组件。\n\n3. 传递props：高阶组件应该将传递给它的props传递给原始组件，可以通过使用展开运算符或手动传递props进行传递。\n\n4. 可以修改props：高阶组件可以对传递给原始组件的props进行处理、转换或增加额外的props。\n\n5. 可以访问组件生命周期方法和状态：高阶组件可以在新组件中访问组件的生命周期方法和状态，并根据需要执行逻辑。\n\n**使用场景**\n\nReact高阶组件有以下几个常见的使用场景：\n\n1. 代码复用：当多个组件之间有相同的逻辑和功能时，可以将这些逻辑和功能抽象成一个高阶组件，并在多个组件中使用该高阶组件进行代码复用。\n\n```jsx\nconst withLogging = (WrappedComponent) => {\n return (props) => {\n useEffect(() => {\n console.log('Component is mounted');\n }, []);\n\n return ;\n }\n}\n\nconst MyComponent = withLogging(MyOriginalComponent);\n```\n\n2. 条件渲染：高阶组件可以根据一些条件来决定是否渲染原始组件或其他组件。这对于实现权限控制、用户认证等场景非常有用。\n\n```jsx\nconst withAuthorization = (WrappedComponent) => {\n return (props) => {\n if (props.isAuthenticated) {\n return ;\n } else {\n return

Unauthorized

;\n }\n }\n}\n\nconst MyComponent = withAuthorization(MyOriginalComponent);\n```\n\n3. Props 改变：高阶组件可以监听原始组件的props的变化，并在变化时执行一些逻辑。这对于实现数据的深拷贝、数据的格式化等场景非常有用。\n\n```jsx\nconst withDeepCopy = (WrappedComponent) => {\n return (props) => {\n const prevPropsRef = useRef(props);\n\n useEffect(() => {\n if (prevPropsRef.current.data !== props.data) {\n const copiedData = JSON.parse(JSON.stringify(props.data));\n // Do something with copiedData...\n }\n\n prevPropsRef.current = props;\n }, [props.data]);\n\n return ;\n }\n}\n\nconst MyComponent = withDeepCopy(MyOriginalComponent);\n```\n\n4. 功能增强：高阶组件可以对原始组件的功能进行增强，例如增加表单校验、日志记录、性能优化等。\n\n```jsx\nconst withFormValidation = (WrappedComponent) => {\n return (props) => {\n const [isValid, setValid] = useState(false);\n\n const validateForm = () => {\n // Perform form validation logic...\n setValid(true);\n }\n\n return (\n

\n \n {isValid ?

Form is valid

Form is invalid

}\n

\n );\n }\n}\n\nconst MyComponent = withFormValidation(MyOriginalComponent);\n```\n\n5. 渲染劫持：高阶组件可以在原始组件渲染之前或之后执行一些逻辑，例如在渲染之前进行数据加载，或在渲染之后进行动画效果的添加等。\n\n```jsx\nconst withDataFetching = (WrappedComponent) => {\n return (props) => {\n const [data, setData] = useState(null);\n\n useEffect(() => {\n // Fetch data...\n axios.get('/api/data')\n .then(response => {\n setData(response.data);\n })\n .catch(error => {\n console.error('Error fetching data:', error);\n });\n }, []);\n\n if (data === null) {\n return

;\n } else {\n return ;\n }\n }\n}\n\nconst MyComponent = withDataFetching(MyOriginalComponent);\n```\n\n总的来说，React高阶组件提供了一种灵活的方式来对组件进行组合和功能增强，可以在不修改原始组件的情况下对其进行扩展和定制。\n",{"_58":789,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/583/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/583/timeline",{"_58":792,"_60":61,"_62":793,"_64":794,"_66":795,"_68":796,"_70":797,"_72":798,"_74":799,"_76":800,"_78":801,"_111":802,"_131":132,"_133":24,"_134":-5,"_135":805,"_137":806,"_159":152,"_153":808,"_155":809,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":810,"_170":811,"_176":812,"_178":813,"_190":815,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/582","https://api.github.com/repos/pro-collection/interview-question/issues/582/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/582/comments","https://api.github.com/repos/pro-collection/interview-question/issues/582/events","https://github.com/pro-collection/interview-question/issues/582",1920786138,"I_kwDOJGDC6c5yfN7a",582,"[React] Class Components 和 Function Components 有区别？【热度: 229】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[803,804],{"_70":289,"_72":290,"_58":291,"_117":292,"_119":293,"_121":24,"_122":294},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":807,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-01T14:08:02Z","2023-10-01T14:08:03Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：Class Components 和 Function Components、Class Components 和 Function Components 区别、Class Components 和 Function Components 差异\n\n**概要对比**\n\nClass组件是使用ES6的类语法定义的组件，它是继承自React.Component的一个子类。Class组件有自己的状态和生命周期方法，可以通过`this.state`来管理状态，并通过`this.setState()`来更新状态。\n\n```jsx\nclass Counter extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n }\n\n increment = () => {\n this.setState({ count: this.state.count + 1 });\n };\n\n render() {\n return (\n

Count: {this.state.count}

\n \n

\n );\n }\n}\n```\n\n函数组件是使用函数来定义的组件，在React 16.8版本引入的Hooks之后，函数组件可以拥有自己的状态和副作用，可以使用`useState`和其他Hooks来管理状态。\n\n```jsx\nimport React, { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n const increment = () => {\n setCount(count + 1);\n };\n\n return (\n

Count: {count}

\n \n

\n );\n}\n```\n\n函数组件通常比Class组件更简洁和易于理解，尤其是在处理简单的逻辑和状态时。然而，Class组件仍然在一些特定情况下有它们的优势，例如需要使用生命周期方法、引入Ref或者需要更多的精确控制和性能优化时。\n\n**细节对比**\n\n| 方面 | Class组件 | 函数组件 |\n| --- | --- | --- |\n| 语法 | 使用ES6类语法定义组件 | 使用函数语法定义组件 |\n| 继承 | 继承自React.Component类 | 无需继承任何类 |\n| 状态管理 | 可通过this.state和this.setState来管理状态 | 可使用useState Hook来管理状态 |\n| 生命周期方法 | 可使用生命周期方法，如componentDidMount、componentDidUpdate等 | 可使用Effect Hook来处理副作用 |\n| Props | 可通过this.props来访问父组件传递的props | 可通过函数参数来访问父组件传递的props |\n| 状态更新 | 使用this.setState来更新状态 | 使用对应的Hook来更新状态 |\n| 内部引用 | 可以通过Ref引用组件实例或DOM元素 | 可以使用Ref Hook引用组件实例或DOM元素 |\n| 性能优化 | 可以使用shouldComponentUpdate来控制组件是否重新渲染 | 可以使用React.memo或useMemo Hook来控制组件是否重新渲染 |\n| 访问上下文 | 可以使用this.context来访问上下文 | 可以使用useContext Hook来访问上下文 |\n\n需要注意的是，这只是一些常见的区别，并不是所有的区别。在实际开发中，具体的区别可能还会根据需求和使用的React版本而有所变化。\n",{"_58":814,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/582/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/582/timeline",{"_58":817,"_60":61,"_62":818,"_64":819,"_66":820,"_68":821,"_70":822,"_72":823,"_74":824,"_76":825,"_78":826,"_111":827,"_131":132,"_133":24,"_134":-5,"_135":830,"_137":831,"_159":152,"_153":833,"_155":834,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":835,"_170":836,"_176":837,"_178":838,"_190":840,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/581","https://api.github.com/repos/pro-collection/interview-question/issues/581/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/581/comments","https://api.github.com/repos/pro-collection/interview-question/issues/581/events","https://github.com/pro-collection/interview-question/issues/581",1920783992,"I_kwDOJGDC6c5yfNZ4",581,"[React] 构建组件的方式有哪些【热度: 482】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[828,829],{"_70":289,"_72":290,"_58":291,"_117":292,"_119":293,"_121":24,"_122":294},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":832,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-10-01T14:03:45Z","2023-10-01T14:03:46Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：React构建组件方式\n\n1. Class Components（类组件）：使用ES6的类语法来定义组件。类组件继承自`React.Component`，并通过`render`方法返回需要渲染的React元素。\n\n```jsx\nclass MyComponent extends React.Component {\n render() {\n return

Hello

;\n }\n}\n```\n\n2. Function Components（函数组件）：使用函数来定义组件，函数接收`props`作为参数，并返回需要渲染的React元素。\n\n```jsx\nfunction MyComponent(props) {\n return

Hello

;\n}\n```\n\n3. Higher-Order Components（高阶组件）：高阶组件是一个函数，接收一个组件作为参数，并返回一个新的增强组件。它用于在不修改原始组件的情况下，添加额外的功能或逻辑。\n\n```jsx\nfunction withLogger(WrappedComponent) {\n return class extends React.Component {\n componentDidMount() {\n console.log('Component did mount!');\n }\n\n render() {\n return ;\n }\n };\n}\n\nconst EnhancedComponent = withLogger(MyComponent);\n```\n\n4. Function as Children（函数作为子组件）：将函数作为子组件传递给父组件，并通过父组件的props传递数据给子组件。\n\n```jsx\nfunction MyComponent(props) {\n return

{props.children('Hello')}

;\n}\n\n\n {(message) =>

{message}

}\n\n```\n\n这些是React中常见的构建组件的方式。每种方式都适用于不同的场景，你可以根据自己的需求选择合适的方式来构建组件。\n\n\n5. `React.cloneElement`：`React.cloneElement`是一个函数，用于克隆并返回一个新的React元素。它可以用于修改现有元素的props，或者在将父组件的props传递给子组件时进行一些额外的操作。\n\n```jsx\nconst parentElement =

Hello

;\nconst clonedElement = React.cloneElement(parentElement, { className: 'greeting' });\n\n// Result:

Hello

\n```\n\n6. `React.createElement`：`React.createElement`是一个函数，用于创建并返回一个新的React元素。它接收一个类型（组件、HTML标签等）、props和子元素，并返回一个React元素。\n\n```jsx\nconst element = React.createElement('div', { className: 'greeting' }, 'Hello');\n\n// Result:

Hello

\n```\n\n`React.createElement`和`React.cloneElement`通常在一些特殊的场景下使用，例如在高阶组件中对组件进行包装或修改。它们不是常规的组件构建方式，但是在某些情况下是非常有用的。非常抱歉之前的遗漏，希望这次能够更全面地回答您的问题。\n",{"_58":839,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/581/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/581/timeline",{"_58":842,"_60":61,"_62":843,"_64":844,"_66":845,"_68":846,"_70":847,"_72":848,"_74":849,"_76":850,"_78":851,"_111":852,"_131":132,"_133":24,"_134":-5,"_135":855,"_137":856,"_159":152,"_153":858,"_155":859,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":860,"_170":861,"_176":862,"_178":863,"_190":865,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/549","https://api.github.com/repos/pro-collection/interview-question/issues/549/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/549/comments","https://api.github.com/repos/pro-collection/interview-question/issues/549/events","https://github.com/pro-collection/interview-question/issues/549",1884256790,"I_kwDOJGDC6c5wT3oW",549,"用户访问页面白屏了，原因是啥，如何排查？【热度: 609】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[853,854],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":857,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-09-06T15:24:10Z","2023-09-06T15:24:11Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：白屏处理办法\n\n用户访问页面白屏可能由多种原因引起，以下是一些可能的原因和排查步骤：\n\n1. 网络问题：用户的网络连接可能存在问题，无法正确加载页面内容。可以要求用户检查网络连接，或者自己尝试在不同网络环境下测试页面的加载情况。\n\n2. 服务端问题：服务器未正确响应用户请求，导致页面无法加载。可以检查服务器的状态、日志和错误信息，查看是否有任何异常。同时，可以确认服务器上的相关服务是否正常运行。\n\n3. 前端代码问题：页面的前端代码可能存在错误或异常，导致页面无法正常渲染。可以检查浏览器的开发者工具，查看是否有任何错误信息或警告。同时，可以尝试将页面的JavaScript、CSS和HTML代码分离出来进行单独测试，以确定具体的问题所在。\n\n4. 浏览器兼容性问题：不同浏览器对于某些代码的支持可能不一致，导致页面在某些浏览器中无法正常加载。可以尝试在不同浏览器中测试页面的加载情况，同时使用浏览器的开发者工具检查是否有任何错误或警告。\n\n5. 第三方资源加载问题：页面可能依赖于某些第三方资源（如外部脚本、样式表等），如果这些资源无法加载，可能导致页面白屏。可以检查网络请求是否正常，是否有任何资源加载失败的情况。\n\n6. 缓存问题：浏览器可能在缓存中保存了旧版本的页面或资源，导致新版本无法加载。可以尝试清除浏览器缓存，或者通过添加随机参数或修改文件名的方式强制浏览器重新加载页面和资源。\n \n7. 其他可能原因：页面白屏问题还可能由于安全策略（如CSP、CORS等）限制、跨域问题、DNS解析问题等引起。可以使用浏览器的开发者工具检查网络请求和错误信息，查找可能的问题。\n\n在排查问题时，可以根据具体情况逐步进行排查，并结合浏览器的开发者工具、服务器日志等工具来辅助定位问题所在，并且可以与用户进行进一步沟通以获取更多信息。如果问题无法解决，可以寻求专业的技术支持或咨询。\n",{"_58":864,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/549/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/549/timeline",{"_58":867,"_60":61,"_62":868,"_64":869,"_66":870,"_68":871,"_70":872,"_72":873,"_74":874,"_76":875,"_78":876,"_111":877,"_131":132,"_133":24,"_134":-5,"_135":880,"_137":881,"_159":152,"_153":883,"_155":884,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":885,"_170":886,"_176":887,"_178":888,"_190":890,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/548","https://api.github.com/repos/pro-collection/interview-question/issues/548/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/548/comments","https://api.github.com/repos/pro-collection/interview-question/issues/548/events","https://github.com/pro-collection/interview-question/issues/548",1884244048,"I_kwDOJGDC6c5wT0hQ",548,"如果用户反馈说感觉网页很卡顿，这个时候该如何排查问题?【热度: 768】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[878,879],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":882,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-09-06T15:16:59Z","2023-09-06T15:23:59Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：网页卡顿、网页卡顿处理办法\n\n排查网页卡顿问题时，可以按照以下步骤进行处理：\n\n1. 验证用户反馈：首先，确认用户反馈的卡顿问题是否普遍存在，还是个别用户的特殊情况。可以与其他用户进行沟通或观察其他设备上的表现。\n\n2. 检查网络连接：检查用户的网络连接是否稳定。卡顿问题可能由于网络延迟或不稳定导致。可以要求用户进行网络速度测试，或者与用户确认网络连接是否正常。\n\n3. 检查服务器性能：确认服务器是否能够处理用户的请求。可以检查服务器的负载情况、处理请求的时间以及资源使用情况。如果服务器负载过高，可能导致网页卡顿。\n\n4. 检查前端代码：检查网页的前端代码是否存在问题。主要看是否有内存泄露、long task 等情况； \n关于内存泄露和 long task 可以看下面两个文档：\n- [JS 内存泄露问题该如何排查？](https://github.com/pro-collection/interview-question/issues/76)\n- [Long Tasks 了解多少？](https://github.com/pro-collection/interview-question/issues/255)\n\n5. 优化网页性能：对于前端代码存在性能问题的情况，可以尝试优化网页性能。例如，压缩和合并CSS和JavaScript文件、减少网络请求次数、使用缓存等方法来提高页面加载速度。 \n可以参考下面文档文档：\n- [从哪些方面可以对网站性能优化？](https://github.com/pro-collection/interview-question/issues/89)\n\n6. 做好性能监控：持续监测网页的性能，并定期更新网页的代码和设计，以提升用户体验。 \n- [`[性能]` 衡量页面性能的指标有哪些？](https://github.com/pro-collection/interview-question/issues/515)\n\n\n",{"_58":889,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/548/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/548/timeline",{"_58":892,"_60":61,"_62":893,"_64":894,"_66":895,"_68":896,"_70":897,"_72":898,"_74":899,"_76":900,"_78":901,"_111":902,"_131":132,"_133":24,"_134":-5,"_135":905,"_137":906,"_159":152,"_153":908,"_155":909,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":910,"_170":911,"_176":912,"_178":913,"_190":915,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/529","https://api.github.com/repos/pro-collection/interview-question/issues/529/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/529/comments","https://api.github.com/repos/pro-collection/interview-question/issues/529/events","https://github.com/pro-collection/interview-question/issues/529",1861850103,"I_kwDOJGDC6c5u-ZP3",529,"http2 多路复用是什么, 原理是什么【热度: 353】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[903,904],{"_70":593,"_72":594,"_58":595,"_117":596,"_119":597,"_121":24,"_122":598},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":907,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-22T16:51:09Z","2023-08-22T16:51:22Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：http2多路复用、http2多路复用原理、http2帧和流、http2流的优先级、http2头部压缩\n\n多路复用是指在HTTP/2中，多个请求/响应可以同时在同一个TCP连接上进行传输和处理的机制。\n\n在HTTP/1.1中，每个请求都需要建立一个独立的TCP连接，导致连接的建立和关闭开销很大。而在HTTP/2中，多个请求可以通过同一个TCP连接同时进行，避免了建立和关闭连接的开销。\n\n多路复用的实现原理主要包括以下几个方面：\n\n1. **帧和流**：在HTTP/2中，通信的最小单位是帧（frames），每个帧包含了一个特定类型的数据，例如请求头、响应头、请求体、响应体等。帧属于一个或多个流（stream），每个流都有唯一的标识符。多个流可以同时在同一个TCP连接上进行传输。\n\n2. **流的优先级**：在HTTP/2中，每个流都可以设置优先级，用于指定处理请求的顺序。服务器可以根据流的优先级来决定响应的优先级，从而更好地利用带宽资源。\n\n3. **头部压缩**：为了减少头部信息的传输开销，HTTP/2使用了一种称为HPACK的压缩算法。HPACK对头部信息进行压缩，并在通信双方之间维护一个共享的头部表，用于存储已经发送或接收过的头部信息。这样就可以减少重复的头部信息传输，提高传输效率。\n\n通过上述机制，HTTP/2实现了多路复用。多个请求/响应可以同时在同一个TCP连接上进行传输，提高了传输效率，减少了连接建立和关闭的开销。\n",{"_58":914,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/529/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/529/timeline",{"_58":917,"_60":61,"_62":918,"_64":919,"_66":920,"_68":921,"_70":922,"_72":923,"_74":924,"_76":925,"_78":926,"_111":927,"_131":132,"_133":24,"_134":-5,"_135":930,"_137":931,"_159":152,"_153":933,"_155":934,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":935,"_170":936,"_176":937,"_178":938,"_190":940,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/528","https://api.github.com/repos/pro-collection/interview-question/issues/528/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/528/comments","https://api.github.com/repos/pro-collection/interview-question/issues/528/events","https://github.com/pro-collection/interview-question/issues/528",1861835830,"I_kwDOJGDC6c5u-Vw2",528,"HTTP/1.0、HTTP/1.1、HTTP/2和HTTP/3之间的主要区别【热度: 1,447】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[928,929],{"_70":593,"_72":594,"_58":595,"_117":596,"_119":597,"_121":24,"_122":598},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":932,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-22T16:40:50Z","2023-08-22T16:41:19Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：HTTP各版本之间区别\r\n\r\n下面是一个表格，展示了HTTP/1.0、HTTP/1.1、HTTP/2和HTTP/3之间的主要区别：\r\n\r\n| 特点 | HTTP/1.0 | HTTP/1.1 | HTTP/2 | HTTP/3 |\r\n|----------------|-------------------------------|-------------------------------|-------------------------------|-------------------------------|\r\n| 并发请求 | 不支持并发请求 | 支持有限的并发请求 | 引入多路复用(Multiplexing)，支持更高级别的并发请求 | 引入QUIC协议，通过多路复用和UDP传输支持更高级别的并发请求 |\r\n| 请求头压缩 | 不支持 | 不支持 | 引入HPACK算法对请求头进行压缩 | 引入QPACK算法对请求头进行压缩 |\r\n| 二进制传输 | 不支持 | 不支持 | 使用二进制格式传输数据 | 使用二进制格式传输数据 |\r\n| 流控制 | 不支持 | 不支持 | 支持流控制，可以控制每个流的数据传输速率 | 支持流控制，可以控制每个流的数据传输速率 |\r\n| 服务器推送 | 不支持 | 不支持 | 引入服务器推送机制，服务器可以主动推送资源给客户端 | 引入服务器推送机制，服务器可以主动推送资源给客户端 |\r\n| 连接复用 | 不支持 | 支持持久连接 | 支持多路复用，多个请求可以通过单个连接并行处理 | 支持多路复用，多个请求可以通过单个连接并行处理 |\r\n| 安全性 | 不支持 | 引入HTTPS协议，支持加密传输 | 引入HTTPS协议，支持加密传输 | 引入HTTPS协议，支持加密传输 |\r\n| 可靠性 | 不支持 | 不支持 | 支持头部压缩、流控制和服务器推送，提升传输的可靠性 | 引入QUIC协议，通过UDP传输提升传输的可靠性 |\r\n| 开发复杂性 | 简单 | 对开发者较友好 | 引入了新的概念和协议，对开发者相对复杂 | 依赖QUIC协议，对开发者相对复杂 |\r\n| 缓存机制 | 支持简单的请求响应缓存 | 引入了更强大的缓存控制机制，如ETag、Cache-Control等 | 引入了新的缓存机制，如Server Push、Priority等 | 类似HTTP/2，但通过QUIC对底层的传输进行了优化 |\r\n| 底层协议 | 基于TCP | 基于TCP | 基于TCP或基于TLS的加密传输 | 基于QUIC（Quick UDP Internet Connections） |\r\n| 连接管理 | 每个请求/响应都需要建立和关闭连接 | 引入了持久连接，通过keep-alive头部保持连接 | 通过单个连接并行处理多个请求/响应 | 通过QUIC的连接复用和多路复用进行处理 |\r\n| 传输效率 | 每个请求/响应都需要耗费时间来建立和关闭连接，浪费带宽 | 连接复用有助于减少建立连接的开销，并提高传输效率 | 通过多路复用、头部压缩等机制提高传输效率 | 通过QUIC的特性如连接复用、多路复用等提高传输效率 |\r\n| 对丢包和延迟的影响 | 对丢包和延迟的恢复较慢。一个请求阻塞可能导致后续请求也受到影响 | 对丢包和延迟的恢复较快。使用流的方式可以并行处理请求 | 对丢包和延迟的恢复较快。使用流的方式可以并行处理请求 | 对丢包和延迟的恢复较快，QUIC通过UDP传输有利于降低延迟和丢包的影响 |\r\n| 适用场景 | 简单的Web页面和静态资源 | 大多数Web应用程序 | 复杂的Web应用程序，需要更高的传输效率 | 复杂的Web应用程序，需要更高的传输效率和减少延迟 |\r\n",{"_58":939,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/528/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/528/timeline",{"_58":942,"_60":61,"_62":943,"_64":944,"_66":945,"_68":946,"_70":947,"_72":948,"_74":949,"_76":950,"_78":951,"_111":952,"_131":132,"_133":24,"_134":-5,"_135":955,"_137":956,"_159":152,"_153":958,"_155":958,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":959,"_170":960,"_176":961,"_178":962,"_190":964,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/525","https://api.github.com/repos/pro-collection/interview-question/issues/525/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/525/comments","https://api.github.com/repos/pro-collection/interview-question/issues/525/events","https://github.com/pro-collection/interview-question/issues/525",1861775803,"I_kwDOJGDC6c5u-HG7",525,"[Vue] 异常处理机制有哪些【热度: 435】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[953,954],{"_70":289,"_72":290,"_58":291,"_117":292,"_119":293,"_121":24,"_122":294},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":957,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-22T16:08:58Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：vue错误捕获、vue错误边界、vue异常处理、vue errorHandler\n\nVue的错误处理机制主要包括以下几个方面：\n\n1. `Error Capturing（错误捕获）`：Vue提供了全局错误处理的钩子函数`errorCaptured`，可以在组件层级中捕获子组件产生的错误。通过在父组件中使用`errorCaptured`钩子函数，可以捕获子组件中的错误，并对其进行处理或展示错误信息。\n\n2. `Error Boundary（错误边界）`：Vue 2.x中没有内置的错误边界机制，但你可以通过自定义组件来实现。错误边界是一种特殊的组件，它可以捕获并处理其子组件中的错误。错误边界组件使用`errorCaptured`钩子函数来捕获子组件中的错误，并使用`v-if`或`v-show`等指令来显示错误信息或替代内容。\n\n3.` 异常处理`：在Vue组件的生命周期钩子函数中，可以使用`try-catch`语句捕获并处理可能出现的异常。例如，在`mounted`钩子函数中进行接口请求，可以使用`try-catch`来捕获请求过程中的异常，并进行相应的处理。\n\n4. `错误提示和日志记录`：在开发环境中，Vue会在浏览器的控制台中输出错误信息，以方便开发者进行调试。在生产环境中，可以使用日志记录工具（如Sentry）来记录错误信息，以便及时发现和解决问题。\n\n\n**代码举例**\n\n以下是使用代码举例说明以上四种Vue错误处理方式的示例：\n\n1. Error Capturing（错误捕获）：\n\n```javascript\n// ParentComponent.vue\n\n\n\n```\n\n2. Error Boundary（错误边界）：\n\n```javascript\n// ErrorBoundary.vue\n\n\n\n\n// ParentComponent.vue\n\n```\n\n3. 异常处理：\n\n```javascript\n// ChildComponent.vue\n\n\n\n```\n\n4. 错误提示和日志记录：\n\n```javascript\n// main.js\nimport Vue from 'vue';\nimport * as Sentry from '@sentry/browser';\n\nVue.config.errorHandler = (err) => {\n console.error(err); // 错误提示\n Sentry.captureException(err); // 错误日志记录\n};\n\nnew Vue({\n // ...\n}).$mount('#app');\n```\n\n上述代码中，`Error Capturing`通过在父组件中的`errorCaptured`钩子函数中捕获子组件的错误，并展示在父组件中。`Error Boundary`通过自定义错误边界组件，在子组件发生错误时展示错误信息或替代内容。`异常处理`通过在子组件的生命周期钩子函数中使用`try-catch`语句来捕获异常并进行处理。`错误提示和日志记录`通过在`Vue.config.errorHandler`中定义全局的错误处理函数，将错误信息输出到控制台，并使用Sentry等工具记录错误日志。\n\n这些示例展示了不同的错误处理方式，可以根据实际需求选择合适的方式来处理Vue应用中的错误。\n",{"_58":963,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/525/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/525/timeline",{"_58":966,"_60":61,"_62":967,"_64":968,"_66":969,"_68":970,"_70":971,"_72":972,"_74":973,"_76":974,"_78":975,"_111":976,"_131":132,"_133":24,"_134":-5,"_135":979,"_137":980,"_159":152,"_153":982,"_155":983,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":984,"_170":985,"_176":986,"_178":987,"_190":989,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/524","https://api.github.com/repos/pro-collection/interview-question/issues/524/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/524/comments","https://api.github.com/repos/pro-collection/interview-question/issues/524/events","https://github.com/pro-collection/interview-question/issues/524",1861758703,"I_kwDOJGDC6c5u-C7v",524,"[Vue] vue3 的 diff 算法是什么，简单介绍一下【热度: 693】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[977,978],{"_70":289,"_72":290,"_58":291,"_117":292,"_119":293,"_121":24,"_122":294},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":981,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-22T15:58:51Z","2023-08-22T15:58:52Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：vue3 diff 算法、逐层比较和双端比较\n\nVue3的diff算法是一种用于比较虚拟DOM树之间差异的算法。它用于确定需要更新的部分，以便最小化对实际DOM的操作，从而提高性能。\n\nVue3的diff算法采用了一种称为\"逐层比较\"的策略，即从根节点开始逐层比较虚拟DOM树的节点。具体的比较过程如下：\n\n1. 对比两棵虚拟DOM树的根节点，判断它们是否相同。如果不相同，则直接替换整个根节点及其子节点，无需进一步比较。\n2. 如果根节点相同，则对比它们的子节点。这里采用了一种称为\"双端比较\"的策略，即同时从两棵树的头部和尾部开始比较子节点。\n3. 从头部开始，依次对比两棵树的相同位置的子节点。如果两个子节点相同，则继续比较它们的子节点。\n4. 如果两个子节点不同，根据一些启发式规则（如节点类型、key值等），判断是否需要替换、删除或插入子节点。\n5. 继续比较下一个位置的子节点，直到两棵树的所有子节点都被比较完。\n\n通过逐层比较和双端比较的策略，Vue3的diff算法能够高效地找到虚拟DOM树之间的差异，并只对需要更新的部分进行操作，从而减少了对实际DOM的操作次数，提高了性能。\n\n值得注意的是，Vue3还引入了一种称为\"静态标记\"的优化策略，用于在编译阶段将一些静态节点标记出来，从而在diff算法中更快地跳过这些静态节点的比较，进一步提升性能。这一优化策略在处理大型列表、静态内容等场景下特别有效。\n",{"_58":988,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/524/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/524/timeline",{"_58":991,"_60":61,"_62":992,"_64":993,"_66":994,"_68":995,"_70":996,"_72":997,"_74":998,"_76":999,"_78":1000,"_111":1001,"_131":132,"_133":24,"_134":-5,"_135":1004,"_137":1005,"_159":152,"_153":1007,"_155":1008,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1009,"_170":1010,"_176":1011,"_178":1012,"_190":1014,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/521","https://api.github.com/repos/pro-collection/interview-question/issues/521/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/521/comments","https://api.github.com/repos/pro-collection/interview-question/issues/521/events","https://github.com/pro-collection/interview-question/issues/521",1858148109,"I_kwDOJGDC6c5uwRcN",521,"[代码实现] 实现一个可以用for...of遍历的对象【热度: 653】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[1002,1003],{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},{"_70":534,"_72":535,"_58":536,"_117":537,"_119":213,"_121":24,"_122":538},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":1006,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-08-20T14:41:49Z","2023-09-06T15:51:38Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：for...in遍历、for...of遍历\n\n普通对象因为没有迭代器，所以无法使用for...of遍历，一般使用for...in或者Object.keys()来遍历\n\n但是如果我们手动给对象设置一个迭代器，对象也是可以使用for...of来遍历的;\n\n```js\nvar obj = {\n a:1,\n b:2,\n c:3\n}\n\nobj.__proto__[Symbol.iterator] = function* objectIterator() {\n for (let key in this) {\n if (obj.hasOwnProperty(key)) {\n yield [key, this[key]]\n }\n }\n}\n\nfor(let v of obj){\n console.log(v);\n}\n//['a',1]\n//['b',2]\n//['c',3]\n```\n",{"_58":1013,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/521/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/521/timeline","pagination",{"_1017":376,"_167":1018},"value",4,"actionData","errors"]