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",{"_54":615,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/583/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/583/timeline",{"_54":618,"_56":57,"_58":619,"_60":620,"_62":621,"_64":622,"_66":623,"_68":624,"_70":625,"_72":626,"_74":627,"_107":628,"_127":128,"_129":26,"_130":-5,"_131":631,"_133":632,"_155":148,"_149":634,"_151":635,"_154":-5,"_157":158,"_159":636,"_164":-5,"_165":637,"_167":638,"_179":640,"_181":-5,"_182":-5,"_183":184},"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】",{"_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},[629,630],{"_66":291,"_68":292,"_54":293,"_113":294,"_115":295,"_117":26,"_118":296},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":633,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_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-10-01T14:08:02Z","2023-10-01T14:08:03Z",{"_161":148,"_162":148,"_163":148},"**关键词**：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",{"_54":639,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/582/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/582/timeline",{"_54":642,"_56":57,"_58":643,"_60":644,"_62":645,"_64":646,"_66":647,"_68":648,"_70":649,"_72":650,"_74":651,"_107":652,"_127":128,"_129":26,"_130":-5,"_131":655,"_133":656,"_155":148,"_149":658,"_151":659,"_154":-5,"_157":158,"_159":660,"_164":-5,"_165":661,"_167":662,"_179":664,"_181":-5,"_182":-5,"_183":184},"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】",{"_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},[653,654],{"_66":291,"_68":292,"_54":293,"_113":294,"_115":295,"_117":26,"_118":296},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":657,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_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-10-01T14:03:45Z","2023-10-01T14:03:46Z",{"_161":148,"_162":148,"_163":148},"**关键词**：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",{"_54":663,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/581/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/581/timeline",{"_54":666,"_56":57,"_58":667,"_60":668,"_62":669,"_64":670,"_66":671,"_68":672,"_70":673,"_72":674,"_74":675,"_107":676,"_127":128,"_129":26,"_130":-5,"_131":679,"_133":680,"_155":148,"_149":682,"_151":683,"_154":-5,"_157":158,"_159":684,"_164":-5,"_165":685,"_167":686,"_179":688,"_181":-5,"_182":-5,"_183":184},"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】",{"_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},[677,678],{"_66":198,"_68":199,"_54":200,"_113":201,"_115":202,"_117":26,"_118":203},{"_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":681,"_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-09-06T15:24:10Z","2023-09-06T15:24:11Z",{"_161":148,"_162":148,"_163":148},"**关键词**：白屏处理办法\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",{"_54":687,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/549/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/549/timeline",{"_54":690,"_56":57,"_58":691,"_60":692,"_62":693,"_64":694,"_66":695,"_68":696,"_70":697,"_72":698,"_74":699,"_107":700,"_127":128,"_129":26,"_130":-5,"_131":703,"_133":704,"_155":148,"_149":706,"_151":707,"_154":-5,"_157":158,"_159":708,"_164":-5,"_165":709,"_167":710,"_179":712,"_181":-5,"_182":-5,"_183":184},"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】",{"_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},[701,702],{"_66":198,"_68":199,"_54":200,"_113":201,"_115":202,"_117":26,"_118":203},{"_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":705,"_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-09-06T15:16:59Z","2023-09-06T15:23:59Z",{"_161":148,"_162":148,"_163":148},"**关键词**：网页卡顿、网页卡顿处理办法\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",{"_54":711,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/548/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/548/timeline",{"_54":714,"_56":57,"_58":715,"_60":716,"_62":717,"_64":718,"_66":719,"_68":720,"_70":721,"_72":722,"_74":723,"_107":724,"_127":128,"_129":26,"_130":-5,"_131":727,"_133":728,"_155":148,"_149":730,"_151":731,"_154":-5,"_157":158,"_159":732,"_164":-5,"_165":733,"_167":734,"_179":736,"_181":-5,"_182":-5,"_183":184},"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】",{"_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},[725,726],{"_66":427,"_68":428,"_54":429,"_113":430,"_115":431,"_117":26,"_118":432},{"_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":729,"_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-08-22T16:51:09Z","2023-08-22T16:51:22Z",{"_161":148,"_162":148,"_163":148},"**关键词**：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",{"_54":735,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/529/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/529/timeline",{"_54":738,"_56":57,"_58":739,"_60":740,"_62":741,"_64":742,"_66":743,"_68":744,"_70":745,"_72":746,"_74":747,"_107":748,"_127":128,"_129":26,"_130":-5,"_131":751,"_133":752,"_155":148,"_149":754,"_151":755,"_154":-5,"_157":158,"_159":756,"_164":-5,"_165":757,"_167":758,"_179":760,"_181":-5,"_182":-5,"_183":184},"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】",{"_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},[749,750],{"_66":427,"_68":428,"_54":429,"_113":430,"_115":431,"_117":26,"_118":432},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":753,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_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-08-22T16:40:50Z","2023-08-22T16:41:19Z",{"_161":148,"_162":148,"_163":148},"**关键词**：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",{"_54":759,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/528/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/528/timeline",{"_54":762,"_56":57,"_58":763,"_60":764,"_62":765,"_64":766,"_66":767,"_68":768,"_70":769,"_72":770,"_74":771,"_107":772,"_127":128,"_129":26,"_130":-5,"_131":775,"_133":776,"_155":148,"_149":778,"_151":778,"_154":-5,"_157":158,"_159":779,"_164":-5,"_165":780,"_167":781,"_179":783,"_181":-5,"_182":-5,"_183":184},"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】",{"_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},[773,774],{"_66":291,"_68":292,"_54":293,"_113":294,"_115":295,"_117":26,"_118":296},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":777,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_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-08-22T16:08:58Z",{"_161":148,"_162":148,"_163":148},"**关键词**：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",{"_54":782,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/525/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/525/timeline",{"_54":785,"_56":57,"_58":786,"_60":787,"_62":788,"_64":789,"_66":790,"_68":791,"_70":792,"_72":793,"_74":794,"_107":795,"_127":128,"_129":26,"_130":-5,"_131":798,"_133":799,"_155":148,"_149":801,"_151":802,"_154":-5,"_157":158,"_159":803,"_164":-5,"_165":804,"_167":805,"_179":807,"_181":-5,"_182":-5,"_183":184},"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】",{"_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},[796,797],{"_66":291,"_68":292,"_54":293,"_113":294,"_115":295,"_117":26,"_118":296},{"_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":800,"_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-08-22T15:58:51Z","2023-08-22T15:58:52Z",{"_161":148,"_162":148,"_163":148},"**关键词**：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",{"_54":806,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/524/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/524/timeline",{"_54":809,"_56":57,"_58":810,"_60":811,"_62":812,"_64":813,"_66":814,"_68":815,"_70":816,"_72":817,"_74":818,"_107":819,"_127":128,"_129":26,"_130":-5,"_131":822,"_133":823,"_155":148,"_149":825,"_151":826,"_154":-5,"_157":158,"_159":827,"_164":-5,"_165":828,"_167":829,"_179":831,"_181":-5,"_182":-5,"_183":184},"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】",{"_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},[820,821],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},{"_66":370,"_68":371,"_54":372,"_113":373,"_115":116,"_117":26,"_118":374},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":824,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_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-08-20T14:41:49Z","2023-09-06T15:51:38Z",{"_161":148,"_162":148,"_163":148},"**关键词**：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",{"_54":830,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/521/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/521/timeline",{"_54":833,"_56":57,"_58":834,"_60":835,"_62":836,"_64":837,"_66":838,"_68":839,"_70":840,"_72":841,"_74":842,"_107":843,"_127":128,"_129":26,"_130":-5,"_131":846,"_133":847,"_155":148,"_149":849,"_151":850,"_154":-5,"_157":158,"_159":851,"_164":-5,"_165":852,"_167":853,"_179":855,"_181":-5,"_182":-5,"_183":184},"https://api.github.com/repos/pro-collection/interview-question/issues/520","https://api.github.com/repos/pro-collection/interview-question/issues/520/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/520/comments","https://api.github.com/repos/pro-collection/interview-question/issues/520/events","https://github.com/pro-collection/interview-question/issues/520",1858139484,"I_kwDOJGDC6c5uwPVc",520,"for...of、for...in、for 循环，三者有什么区别【热度: 1,652】",{"_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},[844,845],{"_66":238,"_68":239,"_54":240,"_113":241,"_115":242,"_117":26,"_118":243},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":848,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_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-08-20T14:14:16Z","2023-08-20T14:14:29Z",{"_161":148,"_162":148,"_163":148},"**关键词**：for...in遍历、for...of遍历\n\n以下是 `for...of`、`for...in` 和 `for` 循环的区别对比表格：\n\n| 特性 | for...of 循环 | for...in 循环 | for 循环 |\n|------------------|----------------------------------------------------------------|-----------------------------------------------------------|------------------------------------------------------------|\n| 遍历对象类型 | 可以遍历可迭代对象（如数组、字符串、Set、Map、Generator 等） | 可以遍历对象的可枚举属性 | 不适用于直接遍历对象，适用于遍历数组或固定个数的循环 |\n| 遍历数组 | 遍历数组的元素 | 遍历数组的索引 | 遍历数组的索引或值 |\n| 遍历字符串 | 遍历字符串的字符 | 遍历字符串的索引 | 遍历字符串的索引或字符 |\n| 遍历 Set | 遍历 Set 的值 | 不适用 | 不适用 |\n| 遍历 Map | 遍历 Map 的键值对 | 不适用 | 不适用 |\n| 遍历对象 | 不适用 | 遍历对象的可枚举属性及其对应的值 | 不适用 |\n| 遍历 Generator | 遍历 Generator 生成的值 | 不适用 | 不适用 |\n| 遍历可迭代对象 | 遍历可迭代对象的元素 | 不适用 | 不适用 |\n| 适用范围 | 适用于需要遍历可迭代对象的场景 | 适用于需要遍历对象的可枚举属性的场景 | 适用于需要手动控制循环次数的场景 |\n| 遍历顺序 | 按照可迭代对象的顺序进行遍历 | 不保证顺序 | 按照循环次数进行遍历 |\n\n需要注意的是，`for...of` 循环只能用于可迭代对象，并且会遍历对象的迭代器方法（即 `Symbol.iterator`），而 `for...in` 循环会遍历对象的所有可枚举属性，包括原型链上的属性。\n\n对于遍历数组的场景，可以使用 `for...of` 循环遍历数组的元素，也可以使用 `for` 循环遍历数组的索引或值。具体选择哪种方式取决于遍历的目的和需求。\n\n以下是一个使用不同循环方式遍历数组的示例：\n\n```javascript\nvar arr = [1, 2, 3];\n\nconsole.log(\"for...of 循环:\");\nfor (var element of arr) {\n console.log(element);\n}\n\nconsole.log(\"for...in 循环:\");\nfor (var index in arr) {\n console.log(arr[index]);\n}\n\nconsole.log(\"for 循环:\");\nfor (var i = 0; i < arr.length; i++) {\n console.log(arr[i]);\n}\n```\n\n输出结果为：\n\n```\nfor...of 循环:\n1\n2\n3\nfor...in 循环:\n1\n2\n3\nfor 循环:\n1\n2\n3\n```\n",{"_54":854,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/520/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/520/timeline",{"_54":857,"_56":57,"_58":858,"_60":859,"_62":860,"_64":861,"_66":862,"_68":863,"_70":864,"_72":865,"_74":866,"_107":867,"_127":128,"_129":26,"_130":-5,"_131":870,"_133":871,"_155":148,"_149":884,"_151":884,"_154":-5,"_157":158,"_159":885,"_164":-5,"_165":886,"_167":887,"_179":889,"_181":-5,"_182":-5,"_183":184},"https://api.github.com/repos/pro-collection/interview-question/issues/482","https://api.github.com/repos/pro-collection/interview-question/issues/482/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/482/comments","https://api.github.com/repos/pro-collection/interview-question/issues/482/events","https://github.com/pro-collection/interview-question/issues/482",1816981194,"I_kwDOJGDC6c5sTO7K",482,"如何搭建一套灰度系统？【热度: 1,226】",{"_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},[868,869],{"_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":872,"_64":873,"_58":874,"_66":875,"_68":876,"_70":877,"_72":878,"_118":879,"_143":880,"_145":881,"_147":148,"_127":128,"_149":882,"_151":883,"_153":-5,"_154":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/4","https://github.com/pro-collection/interview-question/milestone/4","https://api.github.com/repos/pro-collection/interview-question/milestones/4/labels",9124550,"MI_kwDOJGDC6c4AizrG",4,"资深","资深级别面试问题",{"_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},48,"2023-03-06T15:00:45Z","2024-10-07T08:15:55Z","2023-07-23T04:18:11Z",{"_161":148,"_162":148,"_163":148},"**关键词**：灰度上线\n\n这个是一个非常复杂的话题，没法直接给出答案，进提供一些实现的思路：\n\n**什么是灰度**\n\n灰度系统可以把流量划分成多份，一份走新版本代码，一份走老版本代码。\n\n而且灰度系统支持设置流量的比例，比如可以把走新版本代码的流程设置为 5%，没啥问题再放到 10%，50%，最后放到 100% 全量。\n\n这样可以把出现问题的影响降到最低。\n\n而且灰度系统不止这一个用途，比如产品不确定某些改动是不是要的，就要做 AB 实验，也就是要把流量分成两份，一份走 A 版本代码，一份走 B 版本代码。\n\n\n**实现思路**\n\n1. 后端支持：灰度上线需要后端的支持，通过后端的灰度发布控制，可以将不同版本的前端应用分配给不同用户。\n\n2. 搭建网关层：支持一部分用户分发到 A 版本，一部分用户分发到 B 版本（通常使用 nginx 搭建）。\n \n3. 版本管控机制：使用版本控制系统（如Git、package.version、hash version 等）来管理不同版本的前端应用代码。在灰度上线时，可以根据需要切换到特定的版本。\n\n4. 动态路由：通过动态路由配置，将用户请求导向不同版本的前端应用。例如，可以使用Nginx或其他反向代理服务器来实现动态路由。\n\n5. 流量染色：使用Cookie或Session来控制用户的灰度版本访问。可以通过设置不同的Cookie值或Session标记，将用户分配到不同的灰度版本。\n\n6. 更复杂的漏量配置：例如要根据部门、权限、角色等方式来开放灰度；可以使用让用户访问应用的时候，查询其权限和角色，根据权限和角色来分发不同的页面路由。\n\n\n**参考文档**\n\n- [基于 Nginx 实现一个灰度上线系统](https://juejin.cn/post/7250914419579944997)\n",{"_54":888,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/482/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/482/timeline",{"_54":891,"_56":57,"_58":892,"_60":893,"_62":894,"_64":895,"_66":896,"_68":897,"_70":898,"_72":899,"_74":900,"_107":901,"_127":128,"_129":26,"_130":-5,"_131":904,"_133":905,"_155":148,"_149":907,"_151":908,"_154":-5,"_157":158,"_159":909,"_164":-5,"_165":910,"_167":911,"_179":913,"_181":-5,"_182":-5,"_183":184},"https://api.github.com/repos/pro-collection/interview-question/issues/465","https://api.github.com/repos/pro-collection/interview-question/issues/465/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/465/comments","https://api.github.com/repos/pro-collection/interview-question/issues/465/events","https://github.com/pro-collection/interview-question/issues/465",1766444043,"I_kwDOJGDC6c5pScwL",465,"[react] 如何合理使用 useContext【热度: 1,326】",{"_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},[902,903],{"_66":291,"_68":292,"_54":293,"_113":294,"_115":295,"_117":26,"_118":296},{"_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":906,"_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-06-21T00:56:59Z","2023-06-21T01:00:37Z",{"_161":148,"_162":148,"_163":148},"**关键词**：合理使用 context 的层级、避免滥用 context、避免context引起重复渲染、优化context重复渲染\n\n### 如何合理使用 useContext\n\nuseContext 是 React 中提供的一种跨组件传递数据的方式，可以让我们在不同层级的组件之间共享数据，避免了繁琐的 props 传递过程。使用 useContext 可以大大简化组件之间的通信方式，提高代码可维护性和可读性。\n\n下面是一些使用 useContext 的最佳实践：\n\n1. 合理使用 context 的层级\n\ncontext 可以跨组件传递数据，但是过多的 context 层级会使代码变得复杂、难以维护，而且会影响性能。因此，应该尽量避免嵌套过多 context 的层级，保持简单的组件结构。\n\n2. 将 context 统一定义在一个文件中\n\n为了方便管理和使用，我们应该将 context 的定义统一放在一个文件中，这样能够避免重复代码，也能方便其他组件引用。\n\n3. 使用 context.Provider 提供数据\n\n使用 context.Provider 来提供数据，将数据传递给子组件。在 Provider 中可以设置 value 属性来传递数据。\n\n4. 使用 useContext 获取数据\n\n使用 useContext hook 来获取 context 中的数据。useContext 接收一个 context 对象作为参数，返回 context 的当前值。这样就可以在组件中直接使用 context 中的数据。\n\n5. 避免滥用 useContext\n\n虽然 useContext 可以方便地跨组件传递数据，但是滥用 useContext 也会使代码变得难以维护。因此，在使用 useContext 时，应该优先考虑组件通信是否真的需要使用\nuseContext。只有在需要跨越多级组件传递数据时，才应该使用 useContext 解决问题。\n\n### 如何避免使用 context 的时候，引起整个挂载节点树的重新渲染？\n\n使用 context 时，如果 context 中的值发生了变化，会触发整个组件树的重新渲染。这可能会导致性能问题，特别是在组件树较大或者数据变化频繁的情况下。\n\n为了避免这种情况，可以采用以下方法：\n\n1. 对 context 值进行优化\n\n如果 context 中的值是一个对象或者数组，可以考虑使用 useMemo 或者 useCallback 对其进行优化。这样可以确保只有在值发生变化时才会触发重新渲染。\n\n2. 将 context 的值进行拆分\n\n如果 context 中的值包含多个独立的部分，可以考虑将其进行拆分，将不需要更新的部分放入另一个 context 中。这样可以避免因为一个值的变化而导致整个组件树的重新渲染。\n\n3. 使用 shouldComponentUpdate 或者 React.memo 进行优化\n\n对于一些需要频繁更新的组件，可以使用 shouldComponentUpdate 或者 React.memo 进行优化。这样可以在值发生变化时，只重新渲染需要更新的部分。\n\n4. 使用其他数据管理方案\n\n如果 context 不能满足需求，可以考虑使用其他数据管理方案，如 Redux 或者 MobX。这些方案可以更好地控制数据更新，避免不必要的渲染。\n\n**如果 context 中的值是一个对象或者数组，可以考虑使用 useMemo 或者 useCallback 对其进行优化**\n\n代码举例：以下是一个使用 useMemo 对 context 值进行优化的示例代码：\n\n```tsx\nimport React, { useMemo, createContext } from 'react';\n\n// 创建一个 Context\nconst MyContext = createContext();\n\n// 创建一个 Provider\nconst MyProvider = ({ children }) => {\n // 定义一个复杂的数据对象\n const data = useMemo(() => {\n // 这里可以是一些复杂的计算逻辑\n return {\n name: \"Alice\",\n age: 18,\n hobbies: [\"Reading\", \"Traveling\", \"Sports\"],\n friends: [\n { name: \"Bob\", age: 20 },\n { name: \"Charlie\", age: 22 },\n { name: \"David\", age: 24 }\n ]\n };\n }, []);\n\n return (\n // 将 data 作为 value 传入 context.Provider\n \n {children}\n \n );\n};\n\n// 在 Consumer 中使用 context\nconst MyConsumer = () => {\n return (\n \n {data => (\n

Name: {data.name}

Age: {data.age}

Hobbies: {data.hobbies.join(\", \")}

Friends:\n

\n {friend.name} ({friend.age})\n

\n )}\n \n );\n};\n\n// 使用 MyProvider 包裹需要使用 context 的组件\nconst App = () => {\n return (\n \n \n \n );\n};\n\nexport default App;\n```\n\n在上面的示例中，我们使用了 useMemo 对复杂的数据对象进行了缓存。这样，当 context 中的值变化时，只会重新计算数据对象的值，而不是重新创建一个新的对象。这样可以有效地减少不必要的渲染。\n",{"_54":912,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/465/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/465/timeline",{"_54":915,"_56":57,"_58":916,"_60":917,"_62":918,"_64":919,"_66":920,"_68":921,"_70":922,"_72":923,"_74":924,"_107":925,"_127":128,"_129":26,"_130":-5,"_131":928,"_133":929,"_155":148,"_149":931,"_151":932,"_154":-5,"_157":158,"_159":933,"_164":-5,"_165":934,"_167":935,"_179":937,"_181":-5,"_182":-5,"_183":184},"https://api.github.com/repos/pro-collection/interview-question/issues/457","https://api.github.com/repos/pro-collection/interview-question/issues/457/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/457/comments","https://api.github.com/repos/pro-collection/interview-question/issues/457/events","https://github.com/pro-collection/interview-question/issues/457",1755218558,"I_kwDOJGDC6c5onoJ-",457,"JS里的类就是构造函数的语法糖，这个说法是否正确【热度: 541】",{"_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},[926,927],{"_66":238,"_68":239,"_54":240,"_113":241,"_115":242,"_117":26,"_118":243},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":930,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_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-13T15:58:17Z","2023-06-13T15:58:18Z",{"_161":148,"_162":148,"_163":148},"**关键词**：JS构造函数、JS类的语法糖\n\n这个说法是正确的。\n\n在 JavaScript 中，类实际上是构造函数的语法糖，也就是说，通过类的语法创建的对象和通过构造函数创建的对象是一样的。\n\n例如，下面是一个通过构造函数创建对象的示例：\n\n```javascript\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\n\nPerson.prototype.sayHello = function() {\n console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n};\n\nconst person1 = new Person(\"Alice\", 30);\nperson1.sayHello(); // 输出：Hello, my name is Alice and I am 30 years old.\n```\n\n而使用类的语法创建对象的示例代码如下：\n\n```javascript\nclass Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n \n sayHello() {\n console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n }\n}\n\nconst person2 = new Person(\"Bob\", 25);\nperson2.sayHello(); // 输出：Hello, my name is Bob and I am 25 years old.\n```\n\n可以看到，使用类的语法创建对象时，实际上是在创建一个与构造函数相同的对象。在类中，类名即为构造函数的名称，类中的构造函数即为类的构造函数，类中的方法即为构造函数的原型方法。\n\n在 JavaScript 中，类实际上是构造函数的语法糖，可以通过以下几个方面来体现：\n\n1. 类的名称即为构造函数的名称，在类中通过 `constructor` 方法来初始化对象：\n\n```javascript\nclass Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n\n sayHello() {\n console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n }\n}\n\nconst person = new Person(\"Tom\", 20);\nconsole.log(person instanceof Person); // true\n```\n\n这里定义的 Person 类实际上就是一个构造函数，通过 `new` 关键字创建的对象也是一个 Person 类型的对象。\n\n2. 在类中定义的方法即为构造函数的原型方法：\n\n```javascript\nclass Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n\n sayHello() {\n console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n }\n}\n\nconst person = new Person(\"Tom\", 20);\nperson.sayHello(); // 输出：Hello, my name is Tom and I am 20 years old.\n```\n\n可以看到，在类中定义的 `sayHello` 方法实际上就是 Person 构造函数的原型方法。\n\n3. 子类继承父类时，使用 `super()` 方法调用父类的构造函数：\n\n```javascript\nclass Animal {\n constructor(name) {\n this.name = name;\n }\n\n speak() {\n console.log(this.name + ' makes a noise.');\n }\n}\n\nclass Dog extends Animal {\n constructor(name, breed) {\n super(name);\n this.breed = breed;\n }\n\n speak() {\n console.log(this.name + ' barks.');\n }\n}\n\nconst dog = new Dog('Max', 'Labrador');\ndog.speak(); // 输出：Max barks.\n```\n\n这里定义了一个 Animal 类和一个继承自 Animal 类的 Dog 类，Dog 类在构造函数中通过 `super()` 方法调用了父类 Animal 的构造函数，实现了继承功能。可以看到，这里使用的 `super()` 方法也体现了类是构造函数的语法糖。\n\n综上所述，JavaScript 中的类实际上是构造函数的语法糖，通过类的语法创建的对象和通过构造函数创建的对象是一样的。\n\n\n\n",{"_54":936,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/457/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/457/timeline",{"_54":939,"_56":57,"_58":940,"_60":941,"_62":942,"_64":943,"_66":944,"_68":945,"_70":946,"_72":947,"_74":948,"_107":949,"_127":128,"_129":26,"_130":-5,"_131":952,"_133":953,"_155":955,"_149":956,"_151":957,"_154":-5,"_157":158,"_159":958,"_164":-5,"_165":959,"_167":960,"_179":962,"_181":-5,"_182":-5,"_183":184},"https://api.github.com/repos/pro-collection/interview-question/issues/438","https://api.github.com/repos/pro-collection/interview-question/issues/438/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/438/comments","https://api.github.com/repos/pro-collection/interview-question/issues/438/events","https://github.com/pro-collection/interview-question/issues/438",1748179206,"I_kwDOJGDC6c5oMxkG",438,"为什么函数的 arguments 参数是类数组而不是数组？【热度: 669】",{"_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},[950,951],{"_66":238,"_68":239,"_54":240,"_113":241,"_115":242,"_117":26,"_118":243},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":954,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_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},5,"2023-06-08T15:42:57Z","2025-02-21T15:34:45Z",{"_161":148,"_162":148,"_163":148},"**关键词**：arguments 参数、arguments 参数遍历\r\n\r\n在 JavaScript 中，函数的 `arguments` 参数被设计为类数组对象，而不是真正的数组。这是因为 `arguments` 对象包含了函数调用时传入的所有参数，包括未命名的参数。它提供了一种方便的方式来访问和操作这些参数。\r\n\r\n要遍历类数组对象，可以使用以下方法：\r\n\r\n1. 使用 for 循环和索引：通过使用普通的 for 循环和索引来遍历类数组对象。\r\n```javascript\r\nfunction sum() {\r\n for (let i = 0; i < arguments.length; i++) {\r\n console.log(arguments[i]);\r\n }\r\n}\r\n\r\nsum(1, 2, 3); // 输出：1 2 3\r\n```\r\n\r\n2. 使用 for...of 循环：`arguments` 是特殊的类数组，因为他实现了`[Symbol.iterator]`迭代器，故可以使用 for...of 循环\r\n```javascript\r\nfunction sum() {\r\n for (let arg of arguments) {\r\n console.log(arg);\r\n }\r\n}\r\n\r\nsum(1, 2, 3); // 输出：1 2 3\r\n```\r\n\r\n3. 将类数组对象转换为真正的数组后遍历：可以使用上述提到的类数组转换方法将类数组对象转换为真正的数组，然后使用数组的遍历方法进行遍历，如 `forEach()`、`map()` 等。\r\n```javascript\r\nfunction sum() {\r\n const args = Array.from(arguments);\r\n args.forEach(arg => {\r\n console.log(arg);\r\n });\r\n}\r\n\r\nsum(1, 2, 3); // 输出：1 2 3\r\n```\r\n\r\n这些方法都可以用于遍历类数组对象，根据需求选择适合的方式进行操作。\r\n",{"_54":961,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/438/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/438/timeline",{"_54":964,"_56":57,"_58":965,"_60":966,"_62":967,"_64":968,"_66":969,"_68":970,"_70":971,"_72":972,"_74":973,"_107":974,"_127":128,"_129":26,"_130":-5,"_131":977,"_133":978,"_155":148,"_149":980,"_151":981,"_154":-5,"_157":158,"_159":982,"_164":-5,"_165":983,"_167":984,"_179":986,"_181":-5,"_182":-5,"_183":184},"https://api.github.com/repos/pro-collection/interview-question/issues/411","https://api.github.com/repos/pro-collection/interview-question/issues/411/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/411/comments","https://api.github.com/repos/pro-collection/interview-question/issues/411/events","https://github.com/pro-collection/interview-question/issues/411",1740404569,"I_kwDOJGDC6c5nvHdZ",411,"什么是文档的预解析【热度: 1,133】",{"_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},[975,976],{"_66":427,"_68":428,"_54":429,"_113":430,"_115":431,"_117":26,"_118":432},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":207,"_64":208,"_58":209,"_66":210,"_68":211,"_70":212,"_72":213,"_118":214,"_143":979,"_145":216,"_147":148,"_127":128,"_149":217,"_151":218,"_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-04T14:28:06Z","2023-06-04T14:28:07Z",{"_161":148,"_162":148,"_163":148},"**关键词**：文档预解析\n\n文档的预解析（Document Preloading）是浏览器在解析 HTML 文档时的一个优化技术，用于提前获取页面所需的外部资源，如样式表、脚本、字体等。通过在解析过程中预先获取这些资源，可以加快页面加载速度和渲染时间。\n\n浏览器在解析 HTML 文档时，会遇到外部资源的引用，比如 `` 标签引入的样式表和 `