` Action\n- React DOM：新型 hook：`useFormStatus`\n- 新型 hook：`useOptimistic`\n- 新型 API：`use`\n\n### React 服务器组件\n\n- 服务器组件\n- Server Action（服务器操作）\n",{"_58":455,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/753/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/753/timeline",{"_58":458,"_60":61,"_62":459,"_64":460,"_66":461,"_68":462,"_70":463,"_72":464,"_74":465,"_76":466,"_78":467,"_111":468,"_131":132,"_133":24,"_134":471,"_136":472,"_158":151,"_152":474,"_154":475,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":476,"_169":477,"_175":478,"_177":479,"_189":481,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/752","https://api.github.com/repos/pro-collection/interview-question/issues/752/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/752/comments","https://api.github.com/repos/pro-collection/interview-question/issues/752/events","https://github.com/pro-collection/interview-question/issues/752",2290033874,"I_kwDOJGDC6c6IfyTS",752,"webpack 的主要配置项有哪些【热度: 766】",{"_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},[469,470],{"_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":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":473,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-05-10T16:23:24Z","2024-05-10T16:23:25Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：webpack 主要配置项\n\nWebpack 是一个现代 JavaScript 应用程序的静态模块打包器。配置文件名通常为 `webpack.config.js`，它提供了一种配置 Webpack 的方式。下面是一些主要的 Webpack 配置选项：\n\n1. **entry**: 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。可以指定一个或多个入口起点。\n\n2. **output**: output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 `./dist`。\n\n3. **module**: module 属性用于决定如何处理项目中的不同类型的模块。\n\n - **rules**: 配置模块的读取和解析规则，通常用来配置 loader。\n\n4. **resolve**: 配置模块如何解析。\n\n - **extensions**: 自动解析确定的扩展，此选项能够使用户在引入模块时不带扩展。\n\n5. **plugins**: 插件是用来扩展 webpack 功能的。它们会在构建流程中的特定时机注入运行逻辑来改变构建结果或做你想要的事情。\n\n6. **devServer**: 通过来自 `webpack-dev-server` 的这些选项能够对开发服务器的行为进行控制。\n\n7. **devtool**: 此选项控制是否生成，以及如何生成 source map。\n\n8. **mode**: 通过设置 `development` 或 `production` 之中的一个，来为流程提供相应模式下的内置优化。\n\n9. **optimization**: 包含一组可用来调整构建输出的选项。\n\n - **splitChunks**: 配置模块的拆分，可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。\n - **runtimeChunk**: 为每个 entry 创建一个运行时文件。\n\n10. **performance**: 允许 webpack 根据某些参数，控制资产和入口起点的最大大小。\n\n11. **externals**: 防止将某些 import 包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖。\n\n每个项目的具体需求不同，Webpack 的配置也会有所不同。这些选项提供了强大的配置能力和灵活性，可以用来定制 Webpack 的打包、加载和转换行为。\n",{"_58":480,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/752/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/752/timeline",{"_58":483,"_60":61,"_62":484,"_64":485,"_66":486,"_68":487,"_70":488,"_72":489,"_74":490,"_76":491,"_78":492,"_111":493,"_131":132,"_133":24,"_134":496,"_136":497,"_158":151,"_152":499,"_154":500,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":501,"_169":502,"_175":503,"_177":504,"_189":506,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/751","https://api.github.com/repos/pro-collection/interview-question/issues/751/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/751/comments","https://api.github.com/repos/pro-collection/interview-question/issues/751/events","https://github.com/pro-collection/interview-question/issues/751",2290001931,"I_kwDOJGDC6c6IfqgL",751,"CSS 在2023 迎来重大更新，更新内容是什么【热度: 548】",{"_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},[494,495],{"_70":359,"_72":360,"_58":361,"_117":362,"_119":363,"_121":24,"_122":364},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":498,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-05-10T16:04:00Z","2024-05-10T16:04:01Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：CSS 2023 年重大更新\n\n新特性非常多，总结在下面\n\n详情请看文档：https://juejin.cn/post/7320288231111016498\n\n### 架构基础\n\n- 级联层\n- 嵌套\n- 作用域\n- 选择器 :is() 和 :where()\n- 选择器 :has()\n- 复杂的第 n-. 选择\n- CSS 三角函数\n- 子网格 subgrid\n\n### 排版\n\n- 首字下沉\n- 均衡和美观\n\n### 颜色\n\n- 高清色彩空间\n- color-mix() 函数\n- 相对颜色语法\n- 响应浅色或深色模式的 light-dark() 函数\n\n### 响应式设计\n\n- 容器查询之尺寸查询\n- 容器查询之样式查询\n- 容器查询之状态查询\n- 更新媒体查询\n- 脚本媒体查询\n- 降低透明度的媒体查询\n- 媒体查询范围\n\n### 交互动画\n\n- 视图过渡\n- 滚动驱动动效\n- 离散属性动画\n- @starting-style\n- overlay\n- 锚点定位\n- 动画合成\n- 缓动函数 linear()\n- Scrollend 事件\n- 滚动捕捉\n",{"_58":505,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/751/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/751/timeline",{"_58":508,"_60":61,"_62":509,"_64":510,"_66":511,"_68":512,"_70":513,"_72":514,"_74":515,"_76":516,"_78":517,"_111":518,"_131":132,"_133":24,"_134":521,"_136":522,"_158":151,"_152":524,"_154":524,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":525,"_169":526,"_175":527,"_177":528,"_189":530,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/750","https://api.github.com/repos/pro-collection/interview-question/issues/750/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/750/comments","https://api.github.com/repos/pro-collection/interview-question/issues/750/events","https://github.com/pro-collection/interview-question/issues/750",2289964308,"I_kwDOJGDC6c6IfhUU",750,"[webpack] optimize 配置中，分割代码配置 splitChunks 怎么使用【热度: 546】",{"_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},[519,520],{"_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":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":523,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-05-10T15:39:25Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：webpack 分割代码\n\n在 webpack 中，`splitChunks`选项是`optimization`对象的一个属性，可以用来定义如何分割代码块。默认情况下，webpack 会将所有来自`node_modules`的模块分割到一个叫做`vendors`的 chunk 中，并且将共享或来自异步请求的模块分割成不同的 chunks。通过配置`splitChunks`选项，你可以控制这些行为，创建更细致的代码分割策略。以下是如何使用`splitChunks`来优化你的 bundle。\n\n### 基本配置\n\n```javascript\nmodule.exports = {\n //...\n optimization: {\n splitChunks: {\n chunks: \"all\", // 分割所有类型的chunks：初始和动态加载的chunk\n },\n },\n};\n```\n\n在这个配置中，`chunks: 'all'`指示 webpack 对同步和异步引入的模块都进行分割。webpack 会根据内部的一些默认标准（如模块大小、请求的 chunks 数目等）来决定是否分割一个模块。\n\n### 基础属性配置\n\n下面的表格详细描述了 `splitChunks` 配置选项及其作用：\n\n| 配置选项 | 类型 | 默认值 | 说明 |\n| -------------------------------- | ------------------------------- | -------------- | -------------------------------------------------------------------------------------------- |\n| `chunks` | `'all'`, `'async'`, `'initial'` | `'async'` | 设置优化哪些类型的 chunk。 |\n| `minSize` | Number | `20000` (20kb) | 生成 chunk 的最小体积（以字节为单位）。 |\n| `maxSize` | Number | `0` | 尝试将 chunk 分割成不大于指定体积的块。此选项正在实验中，并可能在将来的 webpack 版本中更改。 |\n| `minChunks` | Number | `1` | 模块被分享到的最少 chunk 数。 |\n| `maxAsyncRequests` | Number | `5` | 按需加载时的最大并行请求数。 |\n| `maxInitialRequests` | Number | `3` | 一个入口点的最大并行请求数。 |\n| `automaticNameDelimiter` | String | `'~'` | 用于生成名称的分隔符。 |\n| `name` | Boolean or String or Function | `true` | 分割块的名称。 |\n| `cacheGroups` | Object | - | 一个对象，它定义了对于.cacheGroups 的子选项，用来控制缓存组聚合和生成的 chunks。 |\n| `cacheGroups.test` | RegExp or Function | - | 控制哪些模块被这个缓存组捕捉。 |\n| `cacheGroups.priority` | Number | `0` | 缓存组点击时的优先级，数值越大，优先级越高。 |\n| `cacheGroups.reuseExistingChunk` | Boolean | `true` | 如果当前块包含已从主 bundle 分割的模块，则重用它。 |\n| `cacheGroups.filename` | String or Function | - | 允许为生成的 chunk 自定义文件名。 |\n\n以下是针对上述表格中提及的某些属性的进一步说明：\n\n- `chunks`选项指定是对哪些 chunks 应用这些优化措施。它可以是三个值之一：'all'会影响所有的 chunks，这使得在异步和非异步 chunks 之间共享模块成为可能；'async' 仅仅影响被异步加载的 chunks；'initial' 仅影响初始加载的 chunks。\n\n- `minSize`和`maxSize`用于控制 webpack 试图以多大的 chunk 为目标。`minSize`可以避免 chunks 过小，而`maxSize`可以帮助进一步分割大的 chunks。\n\n- `cacheGroups`是配置高度定制化的代码分割策略的地方。默认情况下 webpack 会将来自 `node_modules` 文件夹的代码分割到一个叫做 `vendors`的 chunk 中，另外 webpack 会将重复引入的代码分割到一个叫做 `default` 的 chunk 中。在这里可以覆盖这些默认设置，或是增加新的缓存组。\n\n使用实例：\n\n```javascript\nmodule.exports = {\n // ...\n optimization: {\n splitChunks: {\n chunks: \"all\",\n minSize: 30000, // 最小 30kb\n maxSize: 0, // 默认无上限\n minChunks: 1,\n maxAsyncRequests: 5,\n maxInitialRequests: 3,\n automaticNameDelimiter: \"~\",\n name: true,\n cacheGroups: {\n vendors: {\n test: /[\\\\/]node_modules[\\\\/]/,\n priority: -10,\n name(module) {\n const packageName = module.context.match(/[\\\\/]node_modules[\\\\/](.*?)([\\\\/]|$)/)[1];\n return `vendor.${packageName.replace(\"@\", \"\")}`;\n },\n },\n default: {\n minChunks: 2,\n priority: -20,\n reuseExistingChunk: true,\n },\n },\n },\n },\n};\n```\n\n### 高级配置 - 缓存组\n\n缓存组（cacheGroups）能让你对分割出来的 chunks 进一步细分和控制。\n\n```javascript\nmodule.exports = {\n //...\n optimization: {\n splitChunks: {\n chunks: \"all\",\n maxInitialRequests: Infinity, // 允许在一个入口处无限多的并行请求\n minSize: 0, // 生成chunk的最小体积（以字节为单位）\n cacheGroups: {\n vendor: {\n test: /[\\\\/]node_modules[\\\\/]/, // 正则表达式，用于测试模块路径，匹配node_modules目录下的模块\n name(module) {\n // 得到模块名，可能是node_modules包名称的一部分\n const packageName = module.context.match(/[\\\\/]node_modules[\\\\/](.*?)([\\\\/]|$)/)[1];\n return `npm.${packageName.replace(\"@\", \"\")}`; // 创建chunk名\n },\n },\n },\n },\n },\n};\n```\n\n这个配置创建了一个缓存组`vendor`，它会将所有从`node_modules`目录导入的模块分割到不同的 chunk 中，并为每个包创建一个以`npm`开头的 chunk 名。例如，如果你的应用依赖于`lodash`和`react`，应用中就会有`npm.lodash`和`npm.react`两个额外的 chunks。\n\n### 动态导入\n\n当你使用像`import()`这样的动态导入语法时，`splitChunks`插件会自动进行代码分割。\n\n```javascript\nfunction getComponent() {\n // 当我们调用 import() 时，webpack 会对 lodash 进行代码分割\n return import(\"lodash\").then(({ default: _ }) => {\n const element = document.createElement(\"div\");\n element.innerHTML = _.join([\"Hello\", \"webpack\"], \" \");\n return element;\n });\n}\n\ngetComponent().then((component) => {\n document.body.appendChild(component);\n});\n```\n\n在这个例子中，`lodash`会被分成一个单独的 chunk。当`getComponent`函数执行并调用`import()`时，`lodash`库会作为一个单独的异步 chunk 加载进来。\n\n通过`splitChunks`的适当配置，我们可以大幅度减小初始加载所需的时间，并确保用户只下载当前真正需要的代码，这样就可以加快应用程序的交互速度。\n",{"_58":529,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/750/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/750/timeline",{"_58":532,"_60":61,"_62":533,"_64":534,"_66":535,"_68":536,"_70":537,"_72":538,"_74":539,"_76":540,"_78":541,"_111":542,"_131":132,"_133":24,"_134":545,"_136":546,"_158":151,"_152":548,"_154":549,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":550,"_169":551,"_175":552,"_177":553,"_189":555,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/749","https://api.github.com/repos/pro-collection/interview-question/issues/749/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/749/comments","https://api.github.com/repos/pro-collection/interview-question/issues/749/events","https://github.com/pro-collection/interview-question/issues/749",2289907175,"I_kwDOJGDC6c6IfTXn",749,"[webpack] optimize 配置有哪些作用【热度: 280】",{"_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},[543,544],{"_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":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":547,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-05-10T15:03:12Z","2024-05-10T15:03:13Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：webpack optimize\n\nWebpack 的 `optimize` 选项是在指定 Webpack 配置对象时，用于配置优化选项的一个属性。该属性下包含了一系列用于调整构建输出质量和性能的设置。这里是一些 `optimize` 属性中可能包含的选项：\n\n- **splitChunks**：这用于代码分割，可以将公共的依赖模块提取到已有的入口 chunk 中，或者产生一个新的 chunk。这可以被用来得到更小的 bundle 体积，优化加载时间，或者更好的缓存利用。\n\n- **runtimeChunk**：该选项将 Webpack 的运行时代码分割成一个单独的 chunk。使用这个设置有利于长期缓存，并且当你使用多个入口点时推荐使用。\n\n- **minimize**：当设置为 `true` 时，Webpack 会启动代码压缩。通常，这会使用 UglifyJSPlugin 来进行 JavaScript 代码的压缩，但现在通常默认使用更现代的工具如 TerserPlugin。\n\n- **minimizer**：当你想要覆盖默认的压缩工具或者提供额外的压缩工具时使用。\n\n- **noEmitOnErrors**（早期版本称为 `NoEmitOnErrorsPlugin`）：启用该选项后，Webpack 编译错误将会导致不生成输出。这确保了不会发出包含错误的 assets。\n\n- **concatenateModules**（早期版本称为 `ModuleConcatenationPlugin`）：这个选项会试图找到模块图中可以安全地连接到单一模块的所有模块，来优化结果的体积。\n\n- **usedExports**（也称为 tree shaking）：该选项用于标记 \"tree shaking\" 中未被使用的导出，使它们能被压缩工具删除。\n\n在 Webpack 4 及以上版本中，这些优化默认在 `mode` 被设置为 `production` 时生效。通过合理地配置这些选项，开发者可以显著提高应用程序的加载和运行性能。这些优化通常包括减少 bundle 的体积和提高代码的运行时效率。在开发模式下，很多优化默认是关闭的，以提供更快的构建速度和更好的调试体验。\n",{"_58":554,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/749/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/749/timeline",{"_58":557,"_60":61,"_62":558,"_64":559,"_66":560,"_68":561,"_70":562,"_72":563,"_74":564,"_76":565,"_78":566,"_111":567,"_131":132,"_133":24,"_134":574,"_136":575,"_158":151,"_152":577,"_154":577,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":578,"_169":579,"_175":580,"_177":581,"_189":583,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/748","https://api.github.com/repos/pro-collection/interview-question/issues/748/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/748/comments","https://api.github.com/repos/pro-collection/interview-question/issues/748/events","https://github.com/pro-collection/interview-question/issues/748",2289897124,"I_kwDOJGDC6c6IfQ6k",748,"[React] useEffect 钩子的工作原理是什么【热度: 459】",{"_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},[568,569],{"_70":440,"_72":441,"_58":442,"_117":443,"_119":444,"_121":24,"_122":445},{"_70":570,"_72":571,"_58":572,"_117":573,"_119":129,"_121":24,"_122":130},5748783891,"LA_kwDOJGDC6c8AAAABVqd7Ew","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%BB%B4%E6%BB%B4","滴滴",[],{"_58":237,"_68":238,"_62":239,"_70":240,"_72":241,"_74":242,"_76":243,"_122":244,"_146":576,"_148":246,"_150":151,"_131":132,"_152":247,"_154":248,"_156":-5,"_157":-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-05-10T14:57:08Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：React useEffect\n\n`useEffect` 钩子的工作原理涉及到 React 的渲染流程和副作用的调度机制。以下是其工作原理的详细说明：\n\n- **调度副作用**：当你在组件内部调用 `useEffect` 时，你实际上是将一个副作用函数及其依赖项数组排队等待执行。这个函数并不会立即执行。\n\n- **提交阶段（Commit Phase）**：React 渲染组件并且执行了所有的纯函数组件或类组件的渲染方法后，会进入所谓的提交阶段。在这个阶段，React 将计算出的新视图（新的 DOM 节点）更新到屏幕上。一旦这个更新完成，React 就知道现在可以安全地执行副作用函数了，因为这不会影响到正在屏幕上显示的界面。\n\n- **副作用执行**：提交阶段完成后，React 会处理所有排队的副作用。如果组件是首次渲染，所有的副作用都会执行。如果组件是重新渲染，React 会首先对比副作用的依赖项数组：如果依赖项未变，副作用则不会执行；如果依赖项有变化，或者没有提供依赖项数组，副作用会再次执行。\n\n- **清理机制**：如果副作用函数返回了一个函数，那么这个函数将被视为清理函数。在执行当前的副作用之前，以及组件卸载前，React 会先调用上一次渲染中的清理函数。这样确保了不会有内存泄漏，同时能撤销上一次副作用导致的改变。\n\n- **延迟副作用**：尽管 `useEffect` 会在渲染之后执行，但它是异步执行的，不会阻塞浏览器更新屏幕。这意味着 React 会等待浏览器完成绘制之后，再执行你的副作用函数，以此来确保副作用处理不会导致用户可见的延迟。\n\n通过这种机制，`useEffect` 允许开发者以一种优化的方式来处理组件中可能存在的副作用，而不需要关心渲染的具体时机。退出清理功能确保了即使组件被多次快速创建和销毁，应用程序也能保持稳定和性能。\n",{"_58":582,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/748/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/748/timeline",{"_58":585,"_60":61,"_62":586,"_64":587,"_66":588,"_68":589,"_70":590,"_72":591,"_74":592,"_76":593,"_78":594,"_111":595,"_131":132,"_133":24,"_134":598,"_136":599,"_158":151,"_152":601,"_154":602,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":603,"_169":604,"_175":605,"_177":606,"_189":608,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/747","https://api.github.com/repos/pro-collection/interview-question/issues/747/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/747/comments","https://api.github.com/repos/pro-collection/interview-question/issues/747/events","https://github.com/pro-collection/interview-question/issues/747",2289889999,"I_kwDOJGDC6c6IfPLP",747,"[React] 介绍一下 useReducer【热度: 547】",{"_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},[596,597],{"_70":440,"_72":441,"_58":442,"_117":443,"_119":444,"_121":24,"_122":445},{"_70":570,"_72":571,"_58":572,"_117":573,"_119":129,"_121":24,"_122":130},[],{"_58":237,"_68":238,"_62":239,"_70":240,"_72":241,"_74":242,"_76":243,"_122":244,"_146":600,"_148":246,"_150":151,"_131":132,"_152":247,"_154":248,"_156":-5,"_157":-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-05-10T14:52:56Z","2024-05-10T14:52:57Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：React useReducer\n\n`useReducer`是 React Hooks 的一个部分，它为状态管理提供了一个更加灵活的方法。`useReducer`特别适合处理包含多个子值的复杂状态逻辑，或者当下一个状态依赖于之前的状态时。与`useState`相比，`useReducer`更适合于复杂的状态逻辑，它使组件的状态管理更加清晰和可预测。\n\n### 基础使用：\n\n```jsx\nconst [state, dispatch] = useReducer(reducer, initialState);\n```\n\n- `state`：当前管理的状态。\n- `dispatch`：一个允许你分发动作(action)来更新状态的函数。\n- `reducer`：一个函数，接受当前的状态和一个动作对象作为参数，并返回一个新的状态。\n- `initialState`：初始状态值。\n\n### Reducer 函数：\n\nReducer 函数的格式如下：\n\n```javascript\nfunction reducer(state, action) {\n switch (action.type) {\n case \"ACTION_TYPE\": {\n // 处理动作并返回新的状态\n return newState;\n }\n // 更多的动作处理\n default:\n return state;\n }\n}\n```\n\n### 动作（Action）：\n\n动作通常是一个包含`type`字段的对象。`type`用于在 reducer 函数中标识要执行的动作。动作对象也可以包含其他数据字段，用于传递动作所需的额外信息。\n\n### 示例：\n\n以下是一个使用`useReducer`的简单示例：\n\n```jsx\nimport React, { useReducer } from \"react\";\n\n// 定义reducer函数\nfunction counterReducer(state, action) {\n switch (action.type) {\n case \"increment\":\n return { count: state.count + 1 };\n case \"decrement\":\n return { count: state.count - 1 };\n default:\n return state;\n }\n}\n\nfunction Counter() {\n // 初始化状态和dispatch函数\n const [state, dispatch] = useReducer(counterReducer, { count: 0 });\n\n return (\n <>\n Count: {state.count}\n \n \n \n );\n}\n```\n\n在上面的例子中，我们创建了一个简单的计数器。当用户点击按钮时，会分发一个包含`type`的动作到`useReducer`钩子。然后，`reducer`函数根据动作`type`来决定如何更新状态。\n\n### 使用场景：\n\n- 管理局部组件的状态。\n- 处理复杂的状态逻辑。\n- 当前状态依赖上一状态时，可以通过上一状态计算得到新状态。\n\n`useReducer`通常与`Context`一起使用可以实现不同组件间的状态共享，这在避免 prop drilling（长距离传递 prop）的同时使状态更新更为模块化。\n",{"_58":607,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/747/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/747/timeline",{"_58":610,"_60":61,"_62":611,"_64":612,"_66":613,"_68":614,"_70":615,"_72":616,"_74":617,"_76":618,"_78":619,"_111":620,"_131":132,"_133":24,"_134":627,"_136":628,"_158":151,"_152":630,"_154":630,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":631,"_169":632,"_175":633,"_177":634,"_189":636,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/746","https://api.github.com/repos/pro-collection/interview-question/issues/746/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/746/comments","https://api.github.com/repos/pro-collection/interview-question/issues/746/events","https://github.com/pro-collection/interview-question/issues/746",2289867841,"I_kwDOJGDC6c6IfJxB",746,"[React] 是如何处理组件更新和渲染的？【热度: 862】",{"_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},[621,622],{"_70":440,"_72":441,"_58":442,"_117":443,"_119":444,"_121":24,"_122":445},{"_70":623,"_72":624,"_58":625,"_117":626,"_119":129,"_121":24,"_122":130},5597058003,"LA_kwDOJGDC6c8AAAABTZxT0w","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%BF%AB%E6%89%8B","快手",[],{"_58":237,"_68":238,"_62":239,"_70":240,"_72":241,"_74":242,"_76":243,"_122":244,"_146":629,"_148":246,"_150":151,"_131":132,"_152":247,"_154":248,"_156":-5,"_157":-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-05-10T14:39:48Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：React 组件更新、React 组件渲染\n\nReact 组件的更新和渲染遵循一个相对严格的生命周期，这个生命周期在 React 16 版本之后，也就是从引入 Fiber 架构开始，稍微有所变化。React 通过一系列的生命周期方法以及新引入的 Hooks API，对组件的更新进行管理，主要流程如下：\n\n### 类组件的生命周期方法包括：\n\n1. **挂载(Mounting)**\n\n - `constructor()`: 组件被创建时调用，初始化 state。\n - `static getDerivedStateFromProps()`: 组件实例化后和接受新属性时将会调用。\n - `render()`: 唯一必须实现的方法，返回元素描述。\n - `componentDidMount()`: 组件挂载（插入 DOM 树中）之后调用。\n\n2. **更新(Updating)**\n\n - `static getDerivedStateFromProps()`: 在接收到新的 props 时调用。\n - `shouldComponentUpdate()`: 在接收到新的 props 或者 state 时，决定是否进行渲染。\n - `render()`: 重新渲染组件。\n - `getSnapshotBeforeUpdate()`: 在最新的渲染输出提交到 DOM 前将会立即调用。\n - `componentDidUpdate()`: 在组件更新后调用。\n\n3. **卸载(Unmounting)**\n - `componentWillUnmount()`: 在组件卸载及销毁之前直接调用。\n\n### React 16.3 之后的生命周期的变化\n\nReact 团队增加了新的生命周期方法，并且准备弃用某些旧的生命周期方法（如 `componentWillMount`、`componentWillReceiveProps`、`componentWillUpdate` 等）。引入了如 `static getDerivedStateFromProps` 和 `getSnapshotBeforeUpdate` 等新的生命周期方法。\n\n### 函数组件和 Hooks\n\n在 React 16.8 版本后，引入了 Hooks API，允许在不编写类的情况下使用 state 以及其他的 React 特性。对于函数组件，有几个常用的 Hooks：\n\n- `useState`: 在函数组件中添加 state。\n- `useEffect`: 可以在组件中执行副作用操作（数据请求、订阅以及手动更改 React 组件中的 DOM 等）。\n- `useContext`: 允许你访问 React 的 Context 对象。\n- `useReducer`: 另一种在组件中管理 state 的方式，它用于复杂的 state 逻辑。\n- 其他 Hooks（如 `useCallback`, `useMemo`, `useRef` 等）。\n\n### 更新和渲染流程：\n\n1. 当组件的 state 或者 props 发生变化时，React 会将新的 props 和 state 比较之前的，根据比较结果决定是否进行更新。\n2. 如果 `shouldComponentUpdate`、`PureComponent` 或 React.memo 表示不需要更新，React 将不会进行更新。\n3. 如果需要更新，React 会调用 `render` 方法以及相关的生命周期方法或 Hooks，这个过程会创建一个虚拟 DOM 树。\n4. React 之后会对比新的虚拟 DOM 树与上一次更新时的虚拟 DOM 树，通过 DOM diffing 算法判断在哪进行实际的 DOM 更新。\n5. 应用必要的 DOM 更新到实际的 DOM 树上，如果有必要，调用 `getSnapshotBeforeUpdate` 和 `componentDidUpdate` 方法。\n\n这个过程保持了 React 组件的高效和可预测性，同时提供了生命周期的方法和 Hooks，使开发者能够插入自定义行为或响应组件的生命周期事件。\n",{"_58":635,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/746/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/746/timeline",{"_58":638,"_60":61,"_62":639,"_64":640,"_66":641,"_68":642,"_70":643,"_72":644,"_74":645,"_76":646,"_78":647,"_111":648,"_131":132,"_133":24,"_134":655,"_136":656,"_158":151,"_152":658,"_154":659,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":660,"_169":661,"_175":662,"_177":663,"_189":665,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/745","https://api.github.com/repos/pro-collection/interview-question/issues/745/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/745/comments","https://api.github.com/repos/pro-collection/interview-question/issues/745/events","https://github.com/pro-collection/interview-question/issues/745",2289858038,"I_kwDOJGDC6c6IfHX2",745,"[webpack] mode 是做什么用？【热度: 475】",{"_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},[649,650],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":651,"_72":652,"_58":653,"_117":654,"_119":129,"_121":24,"_122":130},5562711972,"LA_kwDOJGDC6c8AAAABS5A_pA","https://api.github.com/repos/pro-collection/interview-question/labels/Shopee","Shopee",[],{"_58":237,"_68":238,"_62":239,"_70":240,"_72":241,"_74":242,"_76":243,"_122":244,"_146":657,"_148":246,"_150":151,"_131":132,"_152":247,"_154":248,"_156":-5,"_157":-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-05-10T14:33:57Z","2024-05-10T14:33:58Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：webpack mode\n\n在 webpack 中，`mode` 属性用来指定当前的构建环境是：`development`、`production` 或者是 `none`。设置 `mode` 可以使用 webpack 内置的函数，默认值为 `production`。\n\n`mode` 属性的主要作用是：根据当前的构建环境，启用 webpack 内置在该环境下推荐的优化。\n\n### mode 的具体作用包括：\n\n1. **development**\n\n - 主要优化了增量构建速度和开发体验。\n - `process.env.NODE_ENV` 的值设为 `development`。\n - 启用热替换模块（Hot Module Replacement）。\n - 启用开发工具（如调试源码的 source map）以更好地进行调试。\n\n2. **production**\n\n - 一些处理优化，以提升应用在生产环境的性能。\n - `process.env.NODE_ENV` 的值设为 `production`。\n - 启用代码压缩（例如 TerserPlugin）。\n - 删除 dead code（通过 Tree Shaking）。\n - 作用域提升等各种性能优化措施。\n\n3. **none**\n - `mode` 设置为 `none` 则不启用任何默认优化选项，`process.env.NODE_ENV` 也不会被设置，默认为 `production`。\n\n### 使用方法：\n\n在 webpack 配置文件中，可以直接设置 `mode` 的值：\n\n```javascript\nmodule.exports = {\n mode: \"development\", // 'production' 或 'none'\n // 其他配置...\n};\n```\n\n或者，在命令行中使用 `--mode` 参数：\n\n```bash\nwebpack --mode=production\n```\n\n设置 mode 是告诉 webpack 使用其内部的优化策略，各个模式预定义了一些 webpack 的行为，开发者可以不需要进行详细的配置，也能快速启动一个针对特定环境优化过的构建过程。\n",{"_58":664,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/745/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/745/timeline",{"_58":667,"_60":61,"_62":668,"_64":669,"_66":670,"_68":671,"_70":672,"_72":673,"_74":674,"_76":675,"_78":676,"_111":677,"_131":132,"_133":24,"_134":680,"_136":681,"_158":151,"_152":683,"_154":684,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":685,"_169":686,"_175":687,"_177":688,"_189":690,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/744","https://api.github.com/repos/pro-collection/interview-question/issues/744/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/744/comments","https://api.github.com/repos/pro-collection/interview-question/issues/744/events","https://github.com/pro-collection/interview-question/issues/744",2289854764,"I_kwDOJGDC6c6IfGks",744,"V8 里面的 JIT 是什么？【热度: 694】",{"_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},[678,679],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":651,"_72":652,"_58":653,"_117":654,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":682,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-05-10T14:32:09Z","2024-05-10T14:32:10Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：V8 JIT\n\n在计算机科学中，JIT 是“Just-In-Time”（即时编译）的缩写，它是一种提高代码执行性能的技术。具体来说，在 V8 引擎（Google Chrome 浏览器和 Node.js 的 JavaScript 引擎）中，JIT 编译器在 JavaScript 代码运行时，将其编译成机器语言，以提高执行速度。\n\n这里简要解释下 JIT 编译器的工作原理：\n\n1. **解释执行**：V8 首先通过一个解释器（如 Ignition）来执行 JavaScript 代码。这个过程中，代码不会编译成机器语言，而是逐行解释执行。这样做的优点是启动快，但执行速度较慢。\n\n2. **即时编译**：当代码被多次执行时，V8 会认为这部分代码是“热点代码”（Hot Spot），此时 JIT 编译器（如 TurboFan）会介入，将这部分热点代码编译成机器语言。机器语言运行在 CPU 上比解释执行要快得多。\n\n3. **优化与去优化**：JIT 编译器会对热点代码进行优化，但有时候它会基于错误的假设做出优化（例如认为某个变量总是某种类型）。如果后来的执行发现这些假设不成立，编译器需要去掉优化（Deoptimize），重新编译。\n\nJIT 编译器的一个关键优点是它能够在不牺牲启动速度的情况下，提供接近于或同等于编译语言的运行速度。这使得像 JavaScript 这样原本被认为执行效率较低的语言能够用于复杂的计算任务和高性能的应用场景。\n\n随着 V8 和其他现代 JavaScript 引擎的不断进步，JIT 编译技术也在持续优化，以提供更快的执行速度和更高的性能。\n",{"_58":689,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/744/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/744/timeline",{"_58":692,"_60":61,"_62":693,"_64":694,"_66":695,"_68":696,"_70":697,"_72":698,"_74":699,"_76":700,"_78":701,"_111":702,"_131":132,"_133":24,"_134":709,"_136":710,"_158":151,"_152":712,"_154":712,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":713,"_169":714,"_175":715,"_177":716,"_189":718,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/743","https://api.github.com/repos/pro-collection/interview-question/issues/743/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/743/comments","https://api.github.com/repos/pro-collection/interview-question/issues/743/events","https://github.com/pro-collection/interview-question/issues/743",2287880881,"I_kwDOJGDC6c6IXkqx",743,"用 JS 写一个 cookies 解析函数，输出结果为一个对象【热度: 137】",{"_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},[703,704],{"_70":269,"_72":270,"_58":271,"_117":272,"_119":273,"_121":24,"_122":274},{"_70":705,"_72":706,"_58":707,"_117":708,"_119":129,"_121":24,"_122":130},5312214934,"LA_kwDOJGDC6c8AAAABPKH3lg","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E6%98%93","网易",[],{"_58":237,"_68":238,"_62":239,"_70":240,"_72":241,"_74":242,"_76":243,"_122":244,"_146":711,"_148":246,"_150":151,"_131":132,"_152":247,"_154":248,"_156":-5,"_157":-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-05-09T15:03:33Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：解析 cookies\n\n当然可以，以下是一个简单的 JavaScript 函数，用于解析当前页面的 cookie 并将它们存储到一个对象中：\n\n```javascript\nfunction parseCookies() {\n // 创建一个空对象来存储解析后的 cookie\n var cookiesObj = {};\n\n // 获取 cookie 字符串，然后分割每个键值对\n var cookies = document.cookie.split(\";\");\n\n // 遍历每个键值对\n cookies.forEach(function (cookie) {\n // 去除键值对前后的空格\n var cleanCookie = cookie.trim();\n // 找到键和值之间的等号位置\n var separatorIndex = cleanCookie.indexOf(\"=\");\n\n // 如果找不到等号，则不是有效的键值对，跳过当前循环\n if (separatorIndex === -1) return;\n\n // 获取键名\n var key = cleanCookie.substring(0, separatorIndex);\n // 获取值\n var value = cleanCookie.substring(separatorIndex + 1);\n\n // 解码因为 cookie 键和值是编码过的\n key = decodeURIComponent(key);\n value = decodeURIComponent(value);\n\n // 将解析后的值存储到对象中\n cookiesObj[key] = value;\n });\n\n // 返回解析后的 cookie 对象\n return cookiesObj;\n}\n\n// 使用示例\nvar cookies = parseCookies();\nconsole.log(cookies);\n```\n\n这个函数首先会以分号 `;` 分割 `document.cookie` 字符串来得到各个 cookie 键值对，然后移除键值对前后的任何空格。接着寻找每个键值对中的等号 `=` 位置，以此来分割键和值。最后，它会使用 `decodeURIComponent` 函数来解码键名和键值，因为通过 `document.cookie` 读取的键名和键值通常是编码过的。\n\n调用 `parseCookies` 函数将返回一个对象，其中包含了当前页面的所有 cookie，键名和值都已被解码。然后你可以像访问普通对象一样访问这些值，例如 `cookies['username']` 来获取 'username' 键对应的值。\n",{"_58":717,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/743/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/743/timeline",{"_58":720,"_60":61,"_62":721,"_64":722,"_66":723,"_68":724,"_70":725,"_72":726,"_74":727,"_76":728,"_78":729,"_111":730,"_131":132,"_133":24,"_134":737,"_136":738,"_158":151,"_152":740,"_154":740,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":741,"_169":742,"_175":743,"_177":744,"_189":746,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/742","https://api.github.com/repos/pro-collection/interview-question/issues/742/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/742/comments","https://api.github.com/repos/pro-collection/interview-question/issues/742/events","https://github.com/pro-collection/interview-question/issues/742",2287875071,"I_kwDOJGDC6c6IXjP_",742,"单元测试中， TDD、BDD、DDD 分别指？【热度: 166】",{"_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},[731,732],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":733,"_72":734,"_58":735,"_117":736,"_119":129,"_121":24,"_122":130},5316900032,"LA_kwDOJGDC6c8AAAABPOl0wA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BA%AC%E4%B8%9C","京东",[],{"_58":237,"_68":238,"_62":239,"_70":240,"_72":241,"_74":242,"_76":243,"_122":244,"_146":739,"_148":246,"_150":151,"_131":132,"_152":247,"_154":248,"_156":-5,"_157":-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-05-09T15:00:32Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：TDD、BDD、DDD\n\nTDD、BDD 和 DDD 这三个缩写在软件开发中分别代表以下概念：\n\n1. **TDD（Test-Driven Development） - 测试驱动开发：**\n TDD 是一种软件开发过程，其中开发人员首先编写一个小测试用例，然后编写足够的代码来使这个测试通过，最后重构新代码以满足所需的设计标准。这个过程就是一个循环，被成为“红-绿-重构”循环，其中测试先失败（红色），编写代码使其通过（绿色），然后优化代码（重构）。TDD 的焦点在于编写干净的代码和降低未来的缺陷。\n\n2. **BDD（Behavior-Driven Development） - 行为驱动开发：**\n BDD 将 TDD 的基本思想和原则扩展到软件的整个开发生命周期，但其着重点在于软件的行为——即软件应如何表现，而不仅仅是它应该完成什么功能。BDD 强调的是与利益相关者的交流与协作，通过使用通俗易懂的语言来写测试，让非技术人员也能理解测试内容。BDD 鼓励团队成员之间更好地沟通，确保所有人都对软件应有的行为有共同的理解。\n\n3. **DDD（Domain-Driven Design） - 领域驱动设计：**\n DDD 与 TDD 和 BDD 并不是同一类型的概念。DDD 是一种软件设计哲学，强调了在软件项目的设计与开发中应以业务领域（Domain）为中心。它主张将业务领域的专业知识嵌入到软件的设计中，从而使软件能更好地解决业务问题。DDD 通常涉及到丰富的领域模型以及分层的架构设计，以确保业务逻辑清晰和维护性高。\n\n这三个概念在软件开发中都扮演着重要的角色。TDD 和 BDD 都与确保软件质量和满足用户需求有关，而 DDD 则是一种更宏观层面上对软件设计的方法论。\n",{"_58":745,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/742/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/742/timeline",{"_58":748,"_60":61,"_62":749,"_64":750,"_66":751,"_68":752,"_70":753,"_72":754,"_74":755,"_76":756,"_78":757,"_111":758,"_131":132,"_133":24,"_134":765,"_136":766,"_158":242,"_152":768,"_154":769,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":770,"_169":771,"_175":772,"_177":773,"_189":775,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/741","https://api.github.com/repos/pro-collection/interview-question/issues/741/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/741/comments","https://api.github.com/repos/pro-collection/interview-question/issues/741/events","https://github.com/pro-collection/interview-question/issues/741",2279589055,"I_kwDOJGDC6c6H38S_",741,"[React] forwardsRef 作用是啥，有哪些使用场景？【热度: 336】",{"_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},[759,760],{"_70":440,"_72":441,"_58":442,"_117":443,"_119":444,"_121":24,"_122":445},{"_70":761,"_72":762,"_58":763,"_117":764,"_119":129,"_121":24,"_122":130},5597035813,"LA_kwDOJGDC6c8AAAABTZv9JQ","https://api.github.com/repos/pro-collection/interview-question/labels/PDD","PDD",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":767,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-05-05T15:34:28Z","2024-12-21T08:34:55Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：forwardsRef 作用、forwardsRef 使用场景\n\n在 React 中，`forwardRef` 是一个用来传递 `ref` 引用给子组件的技术。通常情况下，refs 是不会透传给子组件的，因为 refs 并不是像 `props` 那样的属性。`forwardRef` 提供了一种机制，可以将 `ref` 自动地通过组件传递到它的子组件。\n\n### `forwardRef` 的作用：\n\n- **访问子组件的 DOM 节点：** 当需要直接访问子组件中的 DOM 元素（例如，需要管理焦点或测量尺寸）时，可以使用 `forwardRef`。\n- **在高阶组件（HOC）中转发 refs:** 封装组件时，通过 `forwardRef` 可以将 ref 属性透传给被封装的组件，这样父组件就能够通过 ref 访问到实际的子组件实例或 DOM 节点。\n- **在函数组件中使用 refs(React 16.8+）：** 在引入 Hook 之前，函数组件不能直接与 refs 交互。但是，引入了 `forwardRef` 和 `useRef` 之后，函数组件可以接受 ref 并将它透传给子节点。\n\n### 使用场景举例：\n\n#### 1. 访问子组件的 DOM 节点\n\n假设你有一个 `FancyButton` 组件，你想从父组件中直接访问这个按钮的 DOM 节点。\n\n```jsx\nconst FancyButton = React.forwardRef((props, ref) => (\n \n));\n\n// 现在你可以从父组件中直接获取DOM引用\nconst ref = React.createRef();\nClick me!;\n```\n\n#### 2. 在高阶组件中转发 refs\n\n一个常见的模式是为了抽象或修改子组件行为的高阶组件（HOC）。`forwardRef`可以用来确保 ref 可以传递给包装组件：\n\n```jsx\nfunction logProps(Component) {\n class LogProps extends React.Component {\n componentDidUpdate(prevProps) {\n console.log(\"old props:\", prevProps);\n console.log(\"new props:\", this.props);\n }\n\n render() {\n const { forwardedRef, ...rest } = this.props;\n\n // 将自定义的 prop 属性 \"forwardedRef\" 定义为 ref\n return ;\n }\n }\n\n // 注意：React.forwardRef 回调的第二个参数 \"ref\" 传递给了LogProps组件的props.forwardedRef\n return React.forwardRef((props, ref) => {\n return ;\n });\n}\n```\n\n#### 3. 在函数组件中使用 ref\n\n在 Hook 出现之前，函数组件不能够直接与 `ref` 交云。现在可以这样做：\n\n```jsx\nconst MyFunctionalComponent = React.forwardRef((props, ref) => {\n return ;\n});\n\nconst ref = React.createRef();\n;\n```\n\n当你需要在父组件中控制子组件中的 DOM 元素或组件实例的行为时，`forwardRef` 是非常有用的工具。不过，如果可行的话，通常最好通过状态提升或使用 context 来管理行为，只在没有其他替代的情况下才选择使用 refs。\n",{"_58":774,"_180":151,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151},"https://api.github.com/repos/pro-collection/interview-question/issues/741/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/741/timeline",{"_58":777,"_60":61,"_62":778,"_64":779,"_66":780,"_68":781,"_70":782,"_72":783,"_74":784,"_76":785,"_78":786,"_111":787,"_131":132,"_133":24,"_134":794,"_136":795,"_158":151,"_152":797,"_154":797,"_157":-5,"_160":-5,"_161":162,"_106":-5,"_163":-5,"_164":798,"_169":799,"_175":800,"_177":801,"_189":803,"_191":-5,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/740","https://api.github.com/repos/pro-collection/interview-question/issues/740/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/740/comments","https://api.github.com/repos/pro-collection/interview-question/issues/740/events","https://github.com/pro-collection/interview-question/issues/740",2279582114,"I_kwDOJGDC6c6H36mi",740,"vue 中 Scoped Styles 是如何实现样式隔离的，原理是啥？【热度: 244】",{"_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},[788,789],{"_70":359,"_72":360,"_58":361,"_117":362,"_119":363,"_121":24,"_122":364},{"_70":790,"_72":791,"_58":792,"_117":793,"_119":129,"_121":24,"_122":130},5342931240,"LA_kwDOJGDC6c8AAAABPnapKA","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BE%8E%E5%9B%A2","美团",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":796,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-05-05T15:20:28Z",{"_166":151,"_167":151,"_168":151},{"_171":151,"_172":151,"_173":151,"_174":151},"**关键词**：Scoped Styles 样式隔离\n\n在 Vue 中，`.vue` 单文件组件的 `\n```\n\n`vue-loader` 将处理上述代码，模板中的 `\n```\n\nCSS 则会被转换成：\n\n```css\n.btn[data-v-f3f3eg9] {\n background-color: blue;\n}\n```\n\n因此，`.btn` 类的样式仅会应用于拥有 `data-v-f3f3eg9` 属性的 `