{user.name}

;\n}\n```\n\n代码如上，但是 resource 是通过异步获取的。这个时候代码就要改为下面这种形式\n\n```js\nconst resource = fetchProfileData();\n\nasync function ProfileDetails() {\n // Try to read user info, although it might not have loaded yet\n const user = await resource.user.read();\n return

{user.name}

;\n}\n```\n\n但是 async/await 是具有传染性的。这个穿践行就是副作用，我们不希望有这样的副作用，尽管里面有异步调用，不希望这样的副作用传递给外部的函数，只希望外部的函数是一个纯函数。\n\n### 代数效应在React中的应用\n\n在 react 代码中，每一个函数式组件，其实都是一个纯函数，但是内部里面可能会有各种各样的副作用。这些副作用就是我们使用的 hooks;\n\n对于类似useState、useReducer、useRef这样的Hook，我们不需要关注FunctionComponent的state在Hook中是如何保存的，React会为我们处理。\n\n我们只需要假设useState返回的是我们想要的state，并编写业务逻辑就行。\n\n可以看官方的 Suspense demo, 可以是通过 Suspense 让内部直接可以同步的方式调用异步代码； \n代码链接： https://codesandbox.io/s/frosty-hermann-bztrp?file=/src/index.js:152-160\n```jsx\nimport React, { Suspense } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport \"./styles.css\";\nimport { fetchProfileData } from \"./fakeApi\";\n\nconst resource = fetchProfileData();\n\nfunction ProfilePage() {\n return (\n Loading profile...}\n >\n \n Loading posts...}\n >\n \n \n \n );\n}\n\nfunction ProfileDetails() {\n // Try to read user info, although it might not have loaded yet\n const user = resource.user.read();\n return

{user.name}

;\n}\n\nfunction ProfileTimeline() {\n // Try to read posts, although they might not have loaded yet\n const posts = resource.posts.read();\n return (\n

{post.text}

\n );\n}\n\nconst rootElement = document.getElementById(\n \"root\"\n);\nReactDOM.createRoot(rootElement).render(\n \n);\n```\n\n### Generator 架构\n\n从React15到React16，协调器（Reconciler）重构的一大目的是：将老的同步更新的架构变为异步可中断更新。\n\n异步可中断更新可以理解为：更新在执行过程中可能会被打断（浏览器时间分片用尽或有更高优任务插队），当可以继续执行时恢复之前执行的中间状态。\n\n其实，浏览器原生就支持类似的实现，这就是Generator。\n\n但是Generator的一些缺陷使React团队放弃了他：\n\n- 类似async，Generator也是传染性的，使用了Generator则上下文的其他函数也需要作出改变。这样心智负担比较重。\n- Generator执行的中间状态是上下文关联的。\n\n例如这样的例子：\n```js\nfunction* doWork(A, B, C) {\n var x = doExpensiveWorkA(A);\n yield;\n var y = x + doExpensiveWorkB(B);\n yield;\n var z = y + doExpensiveWorkC(C);\n return z;\n}\n```\n\n但是当我们考虑“高优先级任务插队”的情况，如果此时已经完成doExpensiveWorkA与doExpensiveWorkB计算出x与y。\n\n此时B组件接收到一个高优更新，由于Generator执行的中间状态是上下文关联的，所以计算y时无法复用之前已经计算出的x，需要重新计算。\n\n如果通过全局变量保存之前执行的中间状态，又会引入新的复杂度。\n\n### fiber 架构\n\n他的中文翻译叫做纤程，与进程（Process）、线程（Thread）、协程（Coroutine）同为程序执行过程。\n\n在很多文章中将纤程理解为协程的一种实现。在JS中，协程的实现便是Generator。\n\n所以，我们可以将纤程(Fiber)、协程(Generator)理解为代数效应思想在JS中的体现。\n\nReact Fiber可以理解为：\n\nReact内部实现的一套状态更新机制。支持任务不同优先级，可中断与恢复，并且恢复后可以复用之前的中间状态。\n\n其中每个任务更新单元为React Element对应的Fiber节点。\n\n\n\n","reactions",{"_58":172,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/320/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/320/timeline","performed_via_github_app","state_reason","score",1,{"_58":189,"_60":61,"_62":190,"_64":191,"_66":192,"_68":193,"_70":194,"_72":195,"_74":196,"_76":197,"_78":198,"_111":199,"_124":125,"_126":24,"_127":-5,"_128":201,"_130":202,"_152":145,"_146":215,"_148":216,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":217,"_162":218,"_168":219,"_170":220,"_182":222,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/319","https://api.github.com/repos/pro-collection/interview-question/issues/319/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/319/comments","https://api.github.com/repos/pro-collection/interview-question/issues/319/events","https://github.com/pro-collection/interview-question/issues/319",1687063658,"I_kwDOJGDC6c5kjoxq",319,"[React] React16 是什么样的架构特点？【热度: 2,403】",{"_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},[200],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":203,"_68":204,"_62":205,"_70":206,"_72":207,"_74":208,"_76":209,"_122":210,"_140":211,"_142":212,"_144":145,"_124":125,"_146":213,"_148":214,"_150":-5,"_151":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_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},454,"2023-03-06T15:00:27Z","2025-09-07T06:21:17Z","2023-04-27T15:12:52Z","2023-04-27T15:13:45Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：react16 架构、react Reconciler、react fiber、react 渲染器、react 协调器\n\nReact16架构可以分为三层：\n\nScheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler\nReconciler（协调器）—— 负责找出变化的组件\nRenderer（渲染器）—— 负责将变化的组件渲染到页面上\n可以看到，相较于React15，React16中新增了Scheduler（调度器）。\n\n### Scheduler（调度器）\n\n以浏览器是否有剩余时间作为任务中断的标准，那么**需要一种机制，当浏览器有剩余时间时通知我们**。\n\n其实部分浏览器已经实现了这个API，这就是 `requestIdleCallback` (opens new window)。但是由于以下因素，React放弃使用：\n\n- 浏览器兼容性\n- 触发频率不稳定，受很多因素影响。比如当我们的浏览器切换tab后，之前tab注册的 `requestIdleCallback` 触发的频率会变得很低\n\n基于以上原因，React实现了功能更完备的 `requestIdleCallback polyfill`，这就是`Scheduler`。除了在空闲时触发回调的功能外，`Scheduler` 还提供了多种调度优先级供任务设置。\n\nScheduler (opens new window) 是独立于React的库\n\n### Reconciler（协调器）\n\n在 React15 中 `Reconciler` 是递归处理虚拟DOM的\n\n在 React16 中更新工作从递归变成了可以中断的循环过程。每次循环都会调用 `shouldYield` 判断当前是否有剩余时间。\n```js\n/** @noinline */\nfunction workLoopConcurrent() {\n // Perform work until Scheduler asks us to yield\n while (workInProgress !== null && !shouldYield()) {\n workInProgress = performUnitOfWork(workInProgress);\n }\n}\n```\n\n**那么React16是如何解决中断更新时DOM渲染不完全的问题呢？**\n\n在React16中，Reconciler与Renderer不再是交替工作。当Scheduler将任务交给Reconciler后，Reconciler会为变化的虚拟DOM打上代表增/删/更新的标记；\n\n全部标记可以见这里： https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactSideEffectTags.js\n\n整个Scheduler与 Reconciler 的工作都在内存中进行。只有当所有组件都完成Reconciler的工作，才会统一交给Renderer。\n\n可以看这里 react16 对 Reconciler 的解释：https://zh-hans.legacy.reactjs.org/docs/codebase-overview.html#fiber-reconciler\n\nReconciler 内部采用了 `Fiber` 的架构。\n\n### Renderer（渲染器）\n\nRenderer根据Reconciler为虚拟DOM打的标记，同步执行对应的DOM操作。\n\n\n\n### 参考资料 \n- https://react.iamkasong.com/preparation/newConstructure.html#react16%E6%9E%B6%E6%9E%84\n\n\n\n```js\n\n```\n",{"_58":221,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/319/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/319/timeline",{"_58":224,"_60":61,"_62":225,"_64":226,"_66":227,"_68":228,"_70":229,"_72":230,"_74":231,"_76":232,"_78":233,"_111":234,"_124":125,"_126":24,"_127":-5,"_128":236,"_130":237,"_152":145,"_146":239,"_148":240,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":241,"_162":242,"_168":243,"_170":244,"_182":246,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/318","https://api.github.com/repos/pro-collection/interview-question/issues/318/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/318/comments","https://api.github.com/repos/pro-collection/interview-question/issues/318/events","https://github.com/pro-collection/interview-question/issues/318",1687040816,"I_kwDOJGDC6c5kjjMw",318,"[React] React15 架构存在什么样的问题？【热度: 1,613】",{"_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},[235],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":203,"_68":204,"_62":205,"_70":206,"_72":207,"_74":208,"_76":209,"_122":210,"_140":238,"_142":212,"_144":145,"_124":125,"_146":213,"_148":214,"_150":-5,"_151":-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-04-27T14:59:36Z","2023-04-27T15:13:34Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：react15 架构、react 架构、react Reconciler、react 渲染器、react 协调器\n\nReact15 架构可以分为两层：\n\n- Reconciler（协调器）—— 负责找出变化的组件\n- Renderer（渲染器）—— 负责将变化的组件渲染到页面上\n\n### Reconciler（协调器）\n\n我们知道，在React中可以通过 `this.setState、this.forceUpdate、ReactDOM.render` 等API触发更新。\n\n每当有更新发生时，Reconciler会做如下工作：\n\n- 调用函数组件、或class组件的render方法，将返回的JSX转化为虚拟DOM\n- 将虚拟DOM和上次更新时的虚拟DOM对比\n- 通过对比找出本次更新中变化的虚拟DOM\n- 通知Renderer将变化的虚拟DOM渲染到页面上\n\n### Renderer（渲染器）\n由于React支持跨平台，所以不同平台有不同的Renderer。我们前端最熟悉的是负责在浏览器环境渲染的Renderer —— `ReactDOM`\n\n除此之外，还有：\n\n- ReactNative 渲染器，渲染App原生组件\n- ReactTest 渲染器，渲染出纯Js对象用于测试\n- ReactArt 渲染器，渲染到Canvas, SVG 或 VML (IE8)\n\n在每次更新发生时，Renderer接到 `Reconciler` 通知，将变化的组件渲染在当前宿主环境。\n\n### React15 架构的缺点\n**react15 是通过递归去更新组件的**\n\n在 Reconciler 中，mount的组件会调用 mountComponent (opens new window)，update 的组件会调用 updateComponent (opens new window)。这两个方法都会递归更新子组件。\n\n**由于递归执行，所以更新一旦开始，中途就无法中断。当层级很深时，递归更新时间超过了16ms，用户交互就会卡顿。**\n\n本质上说是因为递归的架构，是不允许中断的，因为 react 希望有更好的渲染性能，那么面对大规模 dom diff 更新渲染的时候，就不能让每一递归时间超过 16 ms。\n递归是做不到这个功能的。所以只有重写 react15 架构。引入了 react16 fiber 架构。\n\n\n\n",{"_58":245,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/318/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/318/timeline",{"_58":248,"_60":61,"_62":249,"_64":250,"_66":251,"_68":252,"_70":253,"_72":254,"_74":255,"_76":256,"_78":257,"_111":258,"_124":125,"_126":24,"_127":-5,"_128":260,"_130":261,"_152":145,"_146":274,"_148":275,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":276,"_162":277,"_168":278,"_170":279,"_182":281,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/317","https://api.github.com/repos/pro-collection/interview-question/issues/317/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/317/comments","https://api.github.com/repos/pro-collection/interview-question/issues/317/events","https://github.com/pro-collection/interview-question/issues/317",1687022155,"I_kwDOJGDC6c5kjepL",317,"[React] react 是如何实现页面的快速响应？【热度: 696】",{"_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},[259],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":262,"_68":263,"_62":264,"_70":265,"_72":266,"_74":267,"_76":268,"_122":269,"_140":270,"_142":271,"_144":145,"_124":125,"_146":272,"_148":273,"_150":-5,"_151":-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","2023-04-27T14:49:35Z","2023-04-27T15:13:20Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：react 快速响应实现、react 可中断更新、react IO瓶颈、react CPU瓶颈\n\n### react 是如何实现快速响应的？\n\n我们日常使用App，浏览网页时，有两类场景会制约快速响应：\n\n当遇到大计算量的操作或者设备性能不足使页面掉帧，导致卡顿。\n\n发送网络请求后，由于需要等待数据返回才能进一步操作导致不能快速响应。\n\n这两类场景可以概括为：\n\n- CPU的瓶颈\n- IO的瓶颈\n\n### CPU的瓶颈\n\n**主流浏览器刷新频率为60Hz，即每（1000ms / 60Hz）16.6ms浏览器刷新一次。**\n\n我们知道，JS可以操作DOM，GUI渲染线程与JS线程是互斥的。所以JS脚本执行和浏览器布局、绘制不能同时执行。\n\n在每16.6ms时间内，需要完成如下工作： `JS脚本执行 ----- 样式布局 ----- 样式绘制`\n\n当JS执行时间过长，超出了16.6ms，这次刷新就没有时间执行样式布局和样式绘制了。\n\n比如我们可以通过一个循环，渲染列表 3000 个组件，那么这种渲染时间，就肯定是远超过 16.6 ms 的，页面就会感觉到卡顿。\n\n如何解决这个问题呢？\n\n**答案是：在浏览器每一帧的时间中，预留一些时间给JS线程，React利用这部分时间更新组件（可以看到，在源码中，预留的初始时间是5ms）。** \n源码位置： https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/scheduler/src/forks/SchedulerHostConfig.default.js#L119\n\n当预留的时间不够用时，React将线程控制权交还给浏览器使其有时间渲染UI，React则等待下一帧时间到来继续被中断的工作。\n\n这种将长任务分拆到每一帧中，像蚂蚁搬家一样一次执行一小段任务的操作，被称为时间切片（time slice）\n\n**所以，解决CPU瓶颈的关键是实现时间切片，而时间切片的关键是：将同步的更新变为可中断的异步更新。**\n\n### IO的瓶颈\n\n网络延迟是前端开发者无法解决的。如何在网络延迟客观存在的情况下，减少用户对网络延迟的感知？\n\n简单点儿来说，就是在点击页面跳转的是时候提前去加载下一个页面的内容。或者在当前页面 hold .5s 左右时间，利用这个时间去加载下一个页面的内容。 \n从而达到下一个页面的快速交互\n\nReact实现了 `Suspense` 功能及配套的 hook——`useDeferredValue`。\n\n而在源码内部，为了支持这些特性，**同样需要将同步的更新变为可中断的异步更新。**\n",{"_58":280,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/317/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/317/timeline",{"_58":283,"_60":61,"_62":284,"_64":285,"_66":286,"_68":287,"_70":288,"_72":289,"_74":290,"_76":291,"_78":292,"_111":293,"_124":125,"_126":24,"_127":-5,"_128":308,"_130":309,"_152":145,"_146":311,"_148":311,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":312,"_162":313,"_168":314,"_170":315,"_182":317,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/316","https://api.github.com/repos/pro-collection/interview-question/issues/316/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/316/comments","https://api.github.com/repos/pro-collection/interview-question/issues/316/events","https://github.com/pro-collection/interview-question/issues/316",1685254388,"I_kwDOJGDC6c5kcvD0",316,"npm 包管理了解多少？【热度: 1,321】",{"_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},[294,301],{"_70":295,"_72":296,"_58":297,"_117":298,"_119":299,"_121":24,"_122":300},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","工程化","1d76db","web 项目工程化",{"_70":302,"_72":303,"_58":304,"_117":305,"_119":306,"_121":24,"_122":307},5312726360,"LA_kwDOJGDC6c8AAAABPKnFWA","https://api.github.com/repos/pro-collection/interview-question/labels/%E8%85%BE%E8%AE%AF","腾讯","ededed","公司标签",[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":310,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-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-04-26T15:28:50Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：npm 依赖管理、npm 包管理、npm 缓存\n\n**npm 是如何进行依赖管理的？**\n\nnpm 是通过 package.json 文件来进行依赖管理的。当在项目中使用第三方库时，我们可以在 package.json 中添加对应的依赖项及版本号，npm 会根据 package.json 中的依赖关系，自动安装相应的依赖包及其依赖项。当我们执行 npm install 命令时，npm 会自动根据 package.json 中的依赖信息进行依赖包的安装。\n\nnpm 的依赖管理还涉及到依赖的版本控制，可以在 package.json 中指定对应的版本号，常见的版本号控制符号有：\n\n- `^（caret）`：匹配到次要版本号（第二个数字）的最新版本。例如，^1.2.3 表示安装 1.2.x 的最新版本（除了 1.3.0）。\n- `~（tilde）`：匹配到修订版本号（第三个数字）的最新版本。例如，~1.2.3 表示安装 1.2.3 到 1.2.x 的最新版本（除了 1.3.0）。\n- `*`：匹配到最新的版本。\n- `>=`：匹配到大于或等于指定版本的最新版本。\n- `<、<=、>`：匹配到小于、小于等于或大于指定版本的最新版本。\n\n在 npm 的依赖管理中，还有两种类型的依赖关系：生产依赖和开发依赖。生产依赖是指在应用程序运行时必须要加载的依赖，开发依赖是指在应用程序开发过程中使用的依赖。在 package.json 中，生产依赖使用 dependencies 字段，开发依赖使用 devDependencies 字段。这样可以让项目更加清晰地管理其依赖关系。\n\n\n**npm 有缓存包的能力吗？**\n\nnpm有缓存包的能力。当你第一次使用npm安装一个包时，npm会自动将该包缓存在本地。这样，当你下次需要安装相同版本的该包时，npm就不必重新从网络上下载该包，而是直接使用缓存中的包。这样可以提高包的下载速度，节省网络带宽。\n\nnpm的缓存位于本地文件系统中的一个隐藏目录。默认情况下，缓存位于当前用户的主目录下的.npm目录中。你可以使用以下命令查看npm缓存的路径：\n```shell\nnpm config get cache\n```\n\n你也可以通过npm cache命令来管理npm缓存，例如清空缓存：\n```shell\nnpm cache clean\n```\n\n或者查看缓存的统计信息：\n```shell\nnpm cache ls\n```\n\n\n**npm 是如何使用缓存中的包的？**\n\n使用缓存中的包可以通过以下两种方式实现：\n\n- `使用 npm ci 命令`\nnpm ci 命令会首先检查 package-lock.json 或 npm-shrinkwrap.json 文件，以确保安装的依赖与锁定的版本一致。然后，它会在 node_modules 目录下安装依赖，如果缓存中存在符合要求的包，npm ci 会直接从缓存中复制到 node_modules 目录下，而不需要重新下载和编译。\n\n- `手动指定缓存路径`\n如果需要手动使用缓存中的包，可以在 npm install 命令中指定缓存路径，例如：\n```shell\nnpm install --cache /path/to/npm-cache\n```\n然后，执行 npm install 命令时，npm 会尝试从指定的缓存路径中获取包，如果找到匹配的包，就会直接复制到 node_modules 目录下。\n\n需要注意的是，手动指定缓存路径的方式可能会导致不同的项目之间共用缓存，因此需要确保缓存路径的唯一性。\n",{"_58":316,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/316/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/316/timeline",{"_58":319,"_60":61,"_62":320,"_64":321,"_66":322,"_68":323,"_70":324,"_72":325,"_74":326,"_76":327,"_78":328,"_111":329,"_124":125,"_126":24,"_127":-5,"_128":336,"_130":337,"_152":145,"_146":339,"_148":340,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":341,"_162":342,"_168":343,"_170":344,"_182":346,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/315","https://api.github.com/repos/pro-collection/interview-question/issues/315/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/315/comments","https://api.github.com/repos/pro-collection/interview-question/issues/315/events","https://github.com/pro-collection/interview-question/issues/315",1685233710,"I_kwDOJGDC6c5kcqAu",315,"npx 了解多少？【热度: 290】",{"_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},[330,331],{"_70":295,"_72":296,"_58":297,"_117":298,"_119":299,"_121":24,"_122":300},{"_70":332,"_72":333,"_58":334,"_117":335,"_119":306,"_121":24,"_122":307},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_58":262,"_68":263,"_62":264,"_70":265,"_72":266,"_74":267,"_76":268,"_122":269,"_140":338,"_142":271,"_144":145,"_124":125,"_146":272,"_148":273,"_150":-5,"_151":-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-04-26T15:15:58Z","2023-04-26T15:16:44Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：npx 原理、npx 作用、npx 执行\r\n\r\n\r\n**npx 是什么**\r\n\r\nnpx是一个由Node.js官方提供的用于快速执行npm包中的可执行文件的工具。它可以帮助我们在不全局安装某些包的情况下，直接运行该包提供的命令行工具。npx会在执行时，检查本地项目中是否安装了对应的依赖，如果没有安装则会自动下载安装，并执行命令。如果本地已经存在该依赖，则直接执行命令。\r\n\r\n使用npx时，可以在命令行中输入要执行的包名加上其参数，例如：\r\n```shell\r\nnpx create-react-app my-app\r\n```\r\n以上命令会在本地下载并运行create-react-app包中的可执行文件，创建一个名为my-app的React应用程序。\r\n\r\n\r\n**npx 会把远端的包下载到本地吗?**\r\n\r\nnpx 不会像 npm 或 yarn 一样将包下载到本地的 node_modules 目录中。相反，它会在执行命令时，在本地缓存中寻找并下载包，然后执行该包中的命令。这样可以避免在开发过程中在全局安装大量的包，同时也可以确保使用的是最新版本的包。\r\n\r\n\r\n**npx 执行完成之后，下载的包是否会被删除？**\r\n\r\n是的，npx会在执行完命令后删除下载的包。这是因为npx会在执行命令之前，将需要执行的包下载到一个临时目录中，并在执行完毕后删除该目录。这样可以避免在本地留下不必要的依赖包。如果需要保留依赖包，可以使用--no-cleanup选项来禁止删除下载的包。\r\n",{"_58":345,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/315/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/315/timeline",{"_58":348,"_60":61,"_62":349,"_64":350,"_66":351,"_68":352,"_70":353,"_72":354,"_74":355,"_76":356,"_78":357,"_111":358,"_124":125,"_126":24,"_127":-5,"_128":361,"_130":362,"_152":145,"_146":364,"_148":364,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":365,"_162":366,"_168":367,"_170":368,"_182":370,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/314","https://api.github.com/repos/pro-collection/interview-question/issues/314/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/314/comments","https://api.github.com/repos/pro-collection/interview-question/issues/314/events","https://github.com/pro-collection/interview-question/issues/314",1685215387,"I_kwDOJGDC6c5kclib",314,"npm lock 文件了解多少？【热度: 258】",{"_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},[359,360],{"_70":295,"_72":296,"_58":297,"_117":298,"_119":299,"_121":24,"_122":300},{"_70":332,"_72":333,"_58":334,"_117":335,"_119":306,"_121":24,"_122":307},[],{"_58":262,"_68":263,"_62":264,"_70":265,"_72":266,"_74":267,"_76":268,"_122":269,"_140":363,"_142":271,"_144":145,"_124":125,"_146":272,"_148":273,"_150":-5,"_151":-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-04-26T15:05:23Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**关键词**：npm lock 原理、npm lock 实现、npm lock 作用\n\n**作用**\n\nnpm lock 文件（如 package-lock.json 或 yarn.lock）的作用是确保在不同机器上或在不同时间安装相同的依赖包时，获得相同的版本，以避免由于版本不一致而产生的问题。在安装依赖包时，npm lock 文件会锁定当前的依赖树，并记录每个依赖包的确切版本号和依赖关系。这样，在重新安装依赖包时，npm 将使用 lock 文件中记录的版本和依赖关系来安装依赖包，而不是根据 package.json 文件中的符号依赖去解析版本。这确保了依赖包版本的一致性。\n\n**生成原理**\n\n生成 npm lock 文件的原理如下：\n\n- 当我们使用 npm install 或 npm ci 安装依赖包时，npm 会检查项目中的 `package.json` 文件，并根据其中的依赖包信息，生成一个 `node_modules` 目录用来存储这些依赖包。\n\n- 在生成 node_modules 目录时，npm 会生成一个 `npm-shrinkwrap.json` 或 `package-lock.json` 文件，用来记录所有已经安装的依赖包的精确版本信息和依赖关系。这些信息是根据 `package.json` 文件和 `node_modules` 目录中实际安装的依赖包信息计算出来的。\n\n- 在以后的安装过程中，npm 会先检查是否存在 `npm-shrinkwrap.json` 或 `package-lock.json` 文件，如果存在，就使用其中的依赖包版本信息来安装依赖包，而不是根据 `package.json` 文件中的信息重新计算依赖包版本。这样就可以确保每次安装时都使用相同的依赖包版本，避免了版本不一致导致的问题。\n\n\n**npm-shrinkwrap.json 是什么文件？**\n\n`npm-shrinkwrap.json` 文件是 Node.js 包管理工具 npm 生成的一份锁定文件，用于锁定项目依赖包的版本，确保团队成员在使用同一版本的依赖包，以避免在不同环境下因版本不一致而导致的问题。\n\n与 `package-lock.json` 文件类似，`npm-shrinkwrap.json` 文件可以在项目中确保依赖包版本的一致性，但它与 `package-lock.json` 文件不同之处在于，它能够锁定所有的依赖包版本，包括间接依赖的包版本，而 `package-lock.json` 文件只会锁定直接依赖包的版本。\n\n同时，使用 `npm-shrinkwrap.json` 文件也需要注意，在项目开发过程中，如果需要升级依赖包版本，需要手动更新 `npm-shrinkwrap.json` 文件中的对应依赖包版本号。\n\n**如何启用 npm-shrinkwrap.json**\n\n在项目根目录下使用以下命令可以生成 `npm-shrinkwrap.json` 文件：\n```\nnpm shrinkwrap\n```\n\n如果需要在安装新的包时同时更新 `npm-shrinkwrap.json` 文件，可以使用以下命令：\n```\nnpm shrinkwrap --dev\n```\n\n这个命令会把 devDependencies 也包括在生成的 npm-shrinkwrap.json 文件中。\n",{"_58":369,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/314/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/314/timeline",{"_58":372,"_60":61,"_62":373,"_64":374,"_66":375,"_68":376,"_70":377,"_72":378,"_74":379,"_76":380,"_78":381,"_111":382,"_124":125,"_126":24,"_127":-5,"_128":384,"_130":385,"_152":267,"_146":387,"_148":388,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":389,"_162":390,"_168":391,"_170":392,"_182":394,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/313","https://api.github.com/repos/pro-collection/interview-question/issues/313/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/313/comments","https://api.github.com/repos/pro-collection/interview-question/issues/313/events","https://github.com/pro-collection/interview-question/issues/313",1685169027,"I_kwDOJGDC6c5kcaOD",313,"语义化版本 SemVer（Semantic Versioning）了解多少？",{"_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},[383],{"_70":295,"_72":296,"_58":297,"_117":298,"_119":299,"_121":24,"_122":300},[],{"_58":262,"_68":263,"_62":264,"_70":265,"_72":266,"_74":267,"_76":268,"_122":269,"_140":386,"_142":271,"_144":145,"_124":125,"_146":272,"_148":273,"_150":-5,"_151":-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-04-26T14:40:53Z","2023-09-12T14:13:38Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"Semantic Versioning（语义化版本）是一种为软件组件定义版本号的规范。它使用`“major.minor.patch”`的格式来表示版本号。其中：\r\n\r\n- Major（主版本号）：当你做了不兼容的 API 修改时，你需要更新主版本号。\r\n- Minor（次版本号）：当你做了向下兼容的功能性新增时，你需要更新次版本号。\r\n- Patch（修订号）：当你做了向下兼容的问题修正时，你需要更新修订号。\r\n\r\nSemantic Versioning 的目的是为了让软件版本号的变化具有可读性和可预测性，这样用户就可以通过版本号来了解软件包的更新内容和影响。\r\n\r\n**版本更新**\r\n\r\n在升级版本时，常常使用一些符号来指定允许升级的范围，其中包括 ^ 和 ~ 等。\r\n\r\n- ^ 表示向后兼容地升级版本号，只允许升级到次版本号或修订版本号，不允许升级到主版本号。\r\n- ~ 表示只允许升级到修订版本号，不允许升级到次版本号或主版本号。\r\n\r\n例如，对于版本号为 1.2.3：\r\n\r\n- ^1.2.3 允许升级到 1.2.4、1.3.0 等修订号或次版号的版本，但不允许升级到 2.0.0。\r\n- ~1.2.3 只允许升级到 1.2.4、1.2.5 等修订版本号的版本，但不允许升级到 1.3.0、2.0.0 等更高的版本。\r\n",{"_58":393,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/313/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/313/timeline",{"_58":396,"_60":61,"_62":397,"_64":398,"_66":399,"_68":400,"_70":401,"_72":402,"_74":403,"_76":404,"_78":405,"_111":406,"_124":125,"_126":24,"_127":-5,"_128":408,"_130":409,"_152":145,"_146":411,"_148":412,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":413,"_162":414,"_168":415,"_170":416,"_182":418,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/312","https://api.github.com/repos/pro-collection/interview-question/issues/312/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/312/comments","https://api.github.com/repos/pro-collection/interview-question/issues/312/events","https://github.com/pro-collection/interview-question/issues/312",1685133087,"I_kwDOJGDC6c5kcRcf",312,"npm script 了解多少？【热度: 364】",{"_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},[407],{"_70":295,"_72":296,"_58":297,"_117":298,"_119":299,"_121":24,"_122":300},[],{"_58":262,"_68":263,"_62":264,"_70":265,"_72":266,"_74":267,"_76":268,"_122":269,"_140":410,"_142":271,"_144":145,"_124":125,"_146":272,"_148":273,"_150":-5,"_151":-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-04-26T14:20:39Z","2023-04-26T14:23:07Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"### 什么是 npm script\r\n\r\nnpm 允许在package.json文件里面，使用scripts字段定义脚本命令。\r\n\r\n```awk\r\n{\r\n // ...\r\n \"scripts\": {\r\n \"build\": \"node build.js\"\r\n }\r\n}\r\n```\r\n\r\n上面代码是`package.json`文件的一个片段，里面的scripts字段是一个对象。它的每一个属性，对应一段脚本。比如，build命令对应的脚本是`node build.js`。\r\n\r\n命令行下使用`npm run`命令，就可以执行这段脚本。\r\n\r\n```crmsh\r\n\r\n$ npm run build\r\n# 等同于执行\r\n$ node build.js\r\n```\r\n\r\n这些定义在`package.json`里面的脚本，就称为npm脚本。它的优点很多。\r\n\r\n* 项目的相关脚本，可以集中在一个地方。\r\n* 不同项目的脚本命令，只要功能相同，就可以有同样的对外接口。\r\n* 用户不需要知道怎么测试你的项目，只要运行npm run test即可。\r\n* 可以利用 npm 提供的很多辅助功能。\r\n\r\n查看当前项目的所有 npm 脚本命令，可以使用不带任何参数的`npm run`命令。\r\n\r\n```applescript\r\n$ npm run\r\n```\r\n\r\n---\r\n\r\n### 原理\r\n\r\nnpm run 实际上是 npm run-script 命令的简写\r\n\r\n* 从 package.json 文件中读取 scripts 对象里面的全部配置；\r\n* 以传给 npm run 的第一个参数作为键，如dev，在 scripts 对象里面获取对应的值作为接下来要执行的命令，如果没找到直接报错；\r\n\r\n每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。\r\n\r\n比较特别的是，npm run新建的这个 Shell，会将当前目录的node\\_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。\r\n\r\n这意味着，当前目录的node\\_modules/.bin子目录里面的所有脚本，都可以直接用脚本名调用，而不必加上路径。比如，当前项目的依赖里面有 Mocha，只要直接写mocha test就可以了。\r\n\r\n```json\r\n\"test\": \"mocha test\"\r\n```\r\n\r\n### 通配符\r\n\r\n由于 npm 脚本就是 Shell 脚本，因为可以使用 Shell 通配符。\r\n\r\n```json\r\n\"lint\": \"jshint *.js\"\r\n\"lint\": \"jshint **/*.js\"\r\n```\r\n\r\n上面代码中，\\*表示任意文件名，\\*\\*表示任意一层子目录。\r\n\r\n如果要将通配符传入原始命令，防止被 Shell 转义，要将星号转义。\r\n\r\n```json\r\n\"test\": \"tap test/\\*.js\"\r\n```\r\n\r\n---\r\n\r\n### 传参\r\n\r\n给 npm script 传递参数给 npm script 传递参数 eslint 内置了代码风格自动修复模式，只需给它传入 --fix 参数即可，在 scripts 中声明检查代码命令的同时你可能也需要声明修复代码的命令，面对这种需求，大多数同学可能会忍不住复制粘贴，如下：\r\n\r\n```diff\r\n@@ -5,6 +5,7 @@\r\n \"lint:js\": \"eslint *.js\",\r\n+ \"lint:js:fix\": \"eslint *.js --fix\",\r\n```\r\n\r\n在 lint:js 命令比较短的时候复制粘贴的方法简单粗暴有效，但是当 lint:js 命令变的很长之后，难免后续会有人改了 lint:js 而忘记修改 lint:js:fix（别问我为啥，我就是踩着坑过来的），更健壮的做法是，在运行 npm script 时给定额外的参数，代码修改如下：\r\n\r\n```diff\r\n@@ -5,6 +5,7 @@\r\n \"lint:js\": \"eslint *.js\",\r\n+ \"lint:js:fix\": \"npm run lint:js -- --fix\",\r\n```\r\n\r\n要格外注意 --fix 参数前面的 -- 分隔符，意指要给 npm run lint:js 实际指向的命令传递额外的参数。\r\n\r\n---\r\n\r\n### 注释\r\n\r\n```swift\r\n\"test\": \"# 运行所有代码检查和单元测试 . npm-run-all --parallel lint:* mocha\"\r\n```\r\n\r\n或者在单独的文件中可以自由给它添加注释\r\n\r\n---\r\n\r\n### 日志\r\n\r\n```dockerfile\r\nnpm run test --loglevel silent\r\nnpm run test --slient\r\nnpm run test -s\r\n```\r\n\r\n这个日志级别，只有命令本身的输出，读起来非常的简洁\r\n\r\n```dockerfile\r\nnpm run test --loglevel verbose\r\nnpm run test --verbose\r\nnpm run test -d\r\n```\r\n\r\n这个日志级别，详细打印出了每个步骤的参数、返回值\r\n\r\n---\r\n\r\n### 执行顺序\r\n\r\n如果 npm 脚本里面需要执行多个任务，那么需要明确它们的执行顺序。\r\n\r\n如果是并行执行（即同时的平行执行），可以使用&符号。\r\n\r\n```routeros\r\n$ npm run script1.js & npm run script2.js\r\n```\r\n\r\n如果是继发执行（即只有前一个任务成功，才执行下一个任务），可以使用&&符号。\r\n\r\n```routeros\r\n$ npm run script1.js && npm run script2.js\r\n```\r\n\r\n这两个符号是 Bash 的功能。此外，还可以使用 node 的任务管理模块：`npm-run-all`、`script-runner`\r\n\r\n```awk\r\n// 串行\r\n{\r\n- \"test\": \"npm run lint:js && npm run lint:css && npm run lint:json && npm run lint:markdown\"\r\n+ \"test\": \"npm-run-all lint:js lint:css lint:json lint:markdown\"\r\n },\r\n// 并行 --parallel\r\n{\r\n- \"test\": \"npm-run-all lint:*\"\r\n+ \"test\": \"npm-run-all --parallel lint:* mocha\"\r\n}\r\n```\r\n\r\n---\r\n\r\n### 默认值\r\n\r\n一般来说，npm 脚本由用户提供。但是，npm 对两个脚本提供了默认值。也就是说，这两个脚本不用定义，就可以直接使用。\r\n\r\n```1c\r\n\r\n\"start\": \"node server.js\"，\r\n\"install\": \"node-gyp rebuild\"\r\n```\r\n\r\n上面代码中，npm run start的默认值是node server.js，前提是项目根目录下有server.js这个脚本；npm run install的默认值是node-gyp rebuild，前提是项目根目录下有binding.gyp文件。\r\n\r\n---\r\n\r\n### 钩子\r\n\r\nnpm 脚本有pre和post两个钩子。举例来说，build脚本命令的钩子就是prebuild和postbuild。\r\n\r\n```smalltalk\r\n\"prebuild\": \"echo I run before the build script\",\r\n\"build\": \"cross-env NODE_ENV=production webpack\",\r\n\"postbuild\": \"echo I run after the build script\"\r\n```\r\n\r\n用户执行npm run build的时候，会自动按照下面的顺序执行。\r\n\r\nnpm run prebuild && npm run build && npm run postbuild 因此，可以在这两个钩子里面，完成一些准备工作和清理工作。下面是一个例子。\r\n\r\n```json\r\n\r\n\"clean\": \"rimraf ./dist && mkdir dist\",\r\n\"prebuild\": \"npm run clean\",\r\n\"build\": \"cross-env NODE_ENV=production webpack\"\r\n```\r\n\r\nnpm 默认提供下面这些钩子。\r\n\r\n```\r\nprepublish，postpublish\r\npreinstall，postinstall\r\npreuninstall，postuninstall\r\npreversion，postversion\r\npretest，posttest\r\nprestop，poststop\r\nprestart，poststart\r\nprerestart，postrestart\r\n```\r\n\r\n自定义的脚本命令也可以加上pre和post钩子。比如，myscript这个脚本命令，也有premyscript和postmyscript钩子。不过，双重的pre和post无效，比如prepretest和postposttest是无效的。\r\n\r\nnpm 提供一个npm\\_lifecycle\\_event变量，返回当前正在运行的脚本名称，比如pretest、test、posttest等等。所以，可以利用这个变量，在同一个脚本文件里面，为不同的npm scripts命令编写代码。请看下面的例子。\r\n\r\n```arcade\r\nconst TARGET = process.env.npm_lifecycle_event;\r\n\r\nif (TARGET === 'test') {\r\n console.log(`Running the test task!`);\r\n}\r\n\r\nif (TARGET === 'pretest') {\r\n console.log(`Running the pretest task!`);\r\n}\r\n\r\nif (TARGET === 'posttest') {\r\n console.log(`Running the posttest task!`);\r\n}\r\n```\r\n\r\n注意，prepublish这个钩子不仅会在npm publish命令之前运行，还会在npm install（不带任何参数）命令之前运行。这种行为很容易让用户感到困惑，所以 npm 4 引入了一个新的钩子prepare，行为等同于prepublish，而从 npm 5 开始，prepublish将只在npm publish命令之前运行。\r\n\r\n---\r\n\r\n### 简写形式\r\n\r\n四个常用的 npm 脚本有简写形式。\r\n\r\n```routeros\r\nnpm start是npm run start\r\nnpm stop是npm run stop的简写\r\nnpm test是npm run test的简写\r\nnpm restart是npm run stop && npm run restart && npm run start的简写\r\n```\r\n\r\nnpm start、npm stop和npm restart都比较好理解，而npm restart是一个复合命令，实际上会执行三个脚本命令：stop、restart、start。具体的执行顺序如下。\r\n\r\n```crmsh\r\nprerestart\r\nprestop\r\nstop\r\npoststop\r\nrestart\r\nprestart\r\nstart\r\npoststart\r\npostrestart\r\n```\r\n\r\n---\r\n\r\n### 变量\r\n\r\nnpm 脚本有一个非常强大的功能，就是可以使用 npm 的内部变量。\r\n\r\n运行 `npm run env`能拿到完整的变量列表\r\n\r\n使用`npm run env | grep npm_package | sort` 拿到部分排序后的环境变量\r\n\r\n通过npm\\_package\\_前缀，npm 脚本可以拿到package.json里面的字段。比如，下面是一个package.json。\r\n\r\n```json\r\n{\r\n \"name\": \"foo\",\r\n \"version\": \"1.2.5\",\r\n \"config\" : { \"port\" : \"8080\" },\r\n \"scripts\" : { \"start\" : \"node server.js\" }\r\n}\r\n```\r\n\r\n那么，变量npm\\_package\\_name返回foo，变量npm\\_package\\_version返回1.2.5。\r\n\r\n```arcade\r\n// view.js\r\nconsole.log(process.env.npm_package_name); // foo\r\nconsole.log(process.env.npm_package_version); // 1.2.5\r\n```\r\n\r\n上面代码中，我们通过环境变量process.env对象，拿到package.json的字段值。如果是 Bash 脚本，可以用`$npm_package_name`和`$npm_package_version`取到这两个值。\r\n\r\n`$npm_package_scripts_start`\r\n\r\n---\r\n\r\n### 结合 npm script 和 git-hooks\r\n\r\nGit 在代码版本管理之外，也提供了类似 npm script 里 pre、post 的钩子机制，叫做 Git Hooks，钩子机制能让我们在代码 commit、push 之前（后）做自己想做的事情。\r\n\r\n前端社区里有多种结合 npm script 和 git-hooks 的方案，比如 `pre-commit`、`husky`，相比较而言 husky 更好用，它支持更多的 Git Hooks 种类，再结合 `lint-staged` 使用就更好了。\r\n\r\n[了解更多](https://juejin.cn/post/6844903479283040269)\r\n\r\n---\r\n\r\n### 常用脚本示例\r\n\r\n```awk\r\n// 删除目录\r\n\"clean\": \"rimraf dist/*\",\r\n\r\n// 本地搭建一个 HTTP 服务\r\n\"serve\": \"http-server -p 9090 dist/\",\r\n\r\n// 打开浏览器\r\n\"open:dev\": \"opener http://localhost:9090\",\r\n\r\n// 实时刷新\r\n \"livereload\": \"live-reload --port 9091 dist/\",\r\n\r\n// 构建 HTML 文件\r\n\"build:html\": \"jade index.jade > dist/index.html\",\r\n\r\n// 只要 CSS 文件有变动，就重新执行构建\r\n\"watch:css\": \"watch 'npm run build:css' assets/styles/\",\r\n\r\n// 只要 HTML 文件有变动，就重新执行构建\r\n\"watch:html\": \"watch 'npm run build:html' assets/html\",\r\n\r\n// 部署到 Amazon S3\r\n\"deploy:prod\": \"s3-cli sync ./dist/ s3://example-com/prod-site/\",\r\n\r\n// 构建 favicon\r\n\"build:favicon\": \"node scripts/favicon.js\",\r\n```",{"_58":417,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/312/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/312/timeline",{"_58":420,"_60":61,"_62":421,"_64":422,"_66":423,"_68":424,"_70":425,"_72":426,"_74":427,"_76":428,"_78":429,"_111":430,"_124":125,"_126":24,"_127":-5,"_128":432,"_130":433,"_152":145,"_146":435,"_148":436,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":437,"_162":438,"_168":439,"_170":440,"_182":442,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/311","https://api.github.com/repos/pro-collection/interview-question/issues/311/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/311/comments","https://api.github.com/repos/pro-collection/interview-question/issues/311/events","https://github.com/pro-collection/interview-question/issues/311",1685119072,"I_kwDOJGDC6c5kcOBg",311,"package.json 配置了解多少？【热度: 747】",{"_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},[431],{"_70":295,"_72":296,"_58":297,"_117":298,"_119":299,"_121":24,"_122":300},[],{"_58":262,"_68":263,"_62":264,"_70":265,"_72":266,"_74":267,"_76":268,"_122":269,"_140":434,"_142":271,"_144":145,"_124":125,"_146":272,"_148":273,"_150":-5,"_151":-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-04-26T14:13:01Z","2023-04-26T14:13:02Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"`package.json`常见配置分类：\n\n- 描述配置\n\n- 文件配置\n\n- 脚本配置\n\n- 依赖配置\n\n- 发布配置\n\n- 系统配置\n\n- 第三方配置\n\n\n`package.json` 作用：存储一切与项目相关的配置，例如项目基本信息、外界访问项目的方式、项目内置脚本、项目依赖等。\n\n### 描述配置\n\n主要是项目的基本信息，包括名称，版本，描述，仓库，作者等，部分会展示在 npm 官网上。\n\n```js\n{\n \"name\": \"react\", // 项目名称 or npm包名\n \"version\": \"18.2.0\", // 版本号，开源项目的版本号通常遵循 semver 语义化规范\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/facebook/react.git\",\n \"directory\": \"packages/react\"\n }, // 项目的仓库地址及版本控制信息\n \"description\": \"React is a JavaScript library for building user interfaces.\", // 项目描述 (展示于 npm 官网)\n \"keywords\": [\n \"ant\",\n \"component\",\n \"components\",\n \"design\",\n \"framework\",\n \"frontend\",\n \"react\",\n \"react-component\",\n \"ui\"\n ], // 项目技术关键词\n \"homepage\": \"https://reactjs.org/\", // 项目的主页链接，通常是项目 github 链接，项目官网或文档首页\n \"bugs\": \"https://github.com/vuejs/core/issues\", // 项目 bug 反馈地址，通常是 github issue 页面的链接\n \"author\": \"Li jiaxun\", // 作者信息\n \"private\": true, // 私有项目, 若为 true 则无法发布到 npm 官网上\n}\n```\n\n\n\n### 文件配置\n\n包括项目所包含的文件，以及入口等信息。\n\n```js\n{\n // 🔥@files: 指定需要跟随一起发布的内容，控制 npm 包的大小。\n // 发布时默认会包括 package.json，license，README 和main 字段里指定的文件。忽略 node_modules，lockfile 等文件。在此基础上，可以指定更多需要一起发布的内容。(单独的文件/整个文件夹/使用通配符匹配到的文件)\n // 一般情况下，files 里会指定构建出来的产物以及类型文件，而 src，test 等目录下的文件不需要跟随发布。\n \"files\": [\n \"filename.js\",\n \"directory/\",\n \"glob/*.{js,json}\"\n ],\n // 🔥@type: 'module' => 用 ESM 解释 .js 文件(此时访问 CJS 模块文件需要 .cjs 后缀)；反之同理。\n \"type\": \"module\",\n // 🔥@main: 项目入口文件。\n // if \"type: 'module'\" => 指向 ESM 模块规范的项目入口文件 else => CommonJS 模块规范的项目入口文件。\n \"main\": \"./index.cjs\",\n // @browser: web端项目入口文件路径。该路径下文件不允许在 server 端使用。\n \"browser\": \"./browser/index.js\",\n // 🔥@module: ESM 规范模块的项目入口文件。\n \"module\": \"./index.js\",\n // 🔥@exports: 配置不同环境对应的模块入口文件(优先级最高 > main)。\n // 作用1: 以别名形式封装包的子路径。\"import packageA/dist/css/index.css\" => \"import packageA/style\"\n // 作用2: 以 '.' 为别名时，表示模块主入口，可以看做是 \"mian\"/\"module\" 等字段功能的集合。\n // 作用3: 设置模块访问权限。exports 限制使用者不可以访问未在\"exports\"中定义的任何其他路径。\n // 作用4: 提供了项目(包)多入口访问的途径。例如下面的 './docs' 和 './components'\n \"exports\": {\n \".\": {\n \"require\": \"./index.cjs\",\n \"import\": \"./index.js\"\n },\n \"./docs\": {\n \"require\": \"./docs/index.cjs\",\n \"import\": \"./docs/index.js\"\n },\n \"./components\": {\n \"require\": \"./components/index.cjs\",\n \"import\": \"./components/index.js\"\n },\n \"./style\": \"./dist/css/index.css'\n },\n // 🔥@workspaces: 项目的工作区配置，用于在本地的根目录下管理多个子项目。\n // 可以自动地在 npm install 时将 workspaces 下面的包，软链到根目录的 node_modules 中，不用手动执行 npm link 操作。\n // 通常子项目都会平铺管理在 packages 目录下，\"packages/*\" 表示将该路径下所有子项目的 node_modules 软链到根目录。\n \"workspaces\": [\n \"packages/*\",\n ],\n}\n```\n\n> 当一个项目同时定义了 main，browser 和 module，像 webpack，rollup 等构建工具会感知这些字段，并会根据环境以及不同的模块规范来进行不同的入口文件查找。\n\n#### `exports` 字段详解\n\n参考 [阮一峰](https://es6.ruanyifeng.com/#docs/module-loader#package-json-%E7%9A%84-exports-%E5%AD%97%E6%AE%B5)\n\n`exports`字段的优先级高于`main`字段。它有多种用法。\n\n1. 子目录别名\n\n`package.json`文件的`exports`字段可以指定脚本或子目录的别名，此时它的前缀的参照拼接路径是包名。\n\n```js\n// ./node_modules/es-module-package/package.json\n{\n \"exports\": {\n \"./submodule\": \"./src/submodule.js\"\n }\n}\n```\n\n上面的代码指定`src/submodule.js`别名为`submodule`，然后就可以从别名加载这个文件。\n\n```js\nimport submodule from 'es-module-package/submodule';\n// 加载 ./node_modules/es-module-package/src/submodule.js\n```\n\n如果没有指定别名，就不能用“模块+脚本名”这种形式加载脚本。\n\n```js\n// 报错\nimport submodule from 'es-module-package/private-module.js';\n\n// 不报错\nimport submodule from './node_modules/es-module-package/private-module.js';\n```\n\n2. main 的别名\n\n`exports`字段的别名如果是`.`，就代表模块的主入口，优先级高于`main`字段，并且可以直接简写成`exports`字段的值。\n\n```js\n{\n \"exports\": {\n \".\": \"./main.js\"\n }\n}\n\n// 等同于\n{\n \"exports\": \"./main.js\"\n}\n```\n\n由于`exports`字段只有支持 ES6 的 Node.js 才认识，所以可以同时添加`main`字段来兼容旧版本的 Node.js。\n\n```\n{\n \"main\": \"./main-legacy.cjs\",\n \"exports\": {\n \".\": \"./main-modern.cjs\"\n }\n}\n```\n\n> 上面代码中，老版本的 Node.js （不支持 ES6 模块）的入口文件是`main-legacy.cjs`，新版本的 Node.js 的入口文件是`main-modern.cjs`。\n\n3. 条件加载\n\n利用`.`这个别名，可以为 ES6 模块和 CommonJS 指定不同的入口。\n\n```json\n{\n \"type\": \"module\",\n \"exports\": {\n \".\": {\n \"require\": \"./main.cjs\",\n \"default\": \"./main.js\"\n }\n }\n}\n```\n\n> 上面代码中，别名`.`的`require`条件指定`require()`命令的入口文件（即 CommonJS 的入口），`default`条件指定其他情况的入口，此处配置了 `type: 'module'`，因此默认命中 ESM 模块规范。\n\n### 脚本配置\n\n```\n{\n // npm run {scripts} / yarn {scripts} 等命令行方式启动预设置的脚本\n \"scripts\": {\n \"build\": \"webpack\"\n },\n // 设置 scripts 里的脚本在运行时的参数\n \"config\": {\n \"port\": \"3001\"\n },\n}\n```\n\n### 依赖配置\n\n项目依赖其他包引用的相关信息。\n```js\n{\n // 项目生产环境(运行时)下需要用到的依赖\n // 使用 npm install xxx 或则 npm install xxx --save 时，会被自动插入到该字段中。\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n },\n // 项目开发环境需要用到而运行时不需要的依赖，用于辅助开发\n // 使用 npm install xxx -D 或者 npm install xxx --save-dev 时，会被自动插入到该字段中。\n \"devDependencies\": {\n \"webpack\": \"^5.69.0\"\n },\n // 同伴依赖\n // 一种特殊的依赖，不会被自动安装，通常用于表示与另一个包的依赖与兼容性关系来警示使用者。\n // 比如我们安装 A，A 的正常使用依赖 B@2.x 版本，那么 B@2.x 就应该被列在 A 的 peerDependencies 下，表示“如果你使用我，那么你也需要安装 B，并且至少是 2.x 版本”。\n // 比如 React 组件库 Ant Design，它的 package.json 里 peerDependencies 为\n // 表示如果你使用 Ant Design，那么你的项目也应该安装 react 和 react-dom，并且版本需要大于等于 16.9.0。\n \"peerDependencies\": {\n \"react\": \">=16.9.0\",\n \"react-dom\": \">=16.9.0\"\n },\n // optionalDependencies\n // 可选依赖，顾名思义，表示依赖是可选的，它不会阻塞主功能的使用，安装或者引入失败也无妨。这类依赖如果安装失败，那么 npm 的整个安装过程也是成功的。\n // 比如我们使用 colors 这个包来对 console.log 打印的信息进行着色来增强和区分提示，但它并不是必需的，所以可以将其加入到 optionalDependencies，并且在运行时处理引入失败的逻辑。\n // 使用 npm install xxx -O 或者 npm install xxx --save-optional 时，依赖会被自动插入到该字段中。\n \"optionalDependencies\": {\n \"colors\": \"^1.4.0\"\n },\n // peerDependenciesMeta\n // 同伴依赖也可以使用 peerDependenciesMeta 将其指定为可选的。\n \"peerDependencies\": {\n \"colors\": \"^1.4.0\"\n },\n \"peerDependenciesMeta\": {\n \"colors\": {\n \"optional\": true\n }\n },\n // bundleDependencies\n // 打包依赖。它的值是一个数组，在发布包时，bundleDependencies 里面的依赖都会被一起打包。\n // 比如指定 react 和 react-dom 为打包依赖：\n // 在执行 npm pack 打包生成 tgz 压缩包中，将出现 node_modules 并包含 react 和 react-dom。\n // 需要注意的是，这个字段数组中的值必须是在 dependencies，devDependencies 两个里面声明过的依赖才行。\n // 普通依赖通常从 npm registry 安装，但当你想用一个不在 npm registry 里的包，或者一个被修改过的第三方包时，打包依赖会比普通依赖更好用。\n \"bundleDependencies\": [\n \"react\",\n \"react-dom\"\n ],\n // overrides\n // overrides 可以重写项目依赖的依赖，及其依赖树下某个依赖的版本号，进行包的替换。\n // 比如某个依赖 A，由于一些原因它依赖的包 foo@1.0.0 需要替换，我们可以使用 overrides 修改 foo 的版本号：\n \"overrides\": {\n \"foo\": \"1.1.0-patch\"\n }\n}\n```\n\n### 发布配置\n主要是和项目发布相关的配置。\n\n**private**\n\n如果是私有项目，不希望发布到公共 npm 仓库上，可以将 `private` 设为 true。\n```\n\"private\": true\n```\n\n**publishConfig**\n\n顾名思义，publishConfig 就是 npm 包发布时使用的配置。\n\n比如在安装依赖时指定了 registry 为 taobao 镜像源，但发布时希望在公网发布，就可以指定 publishConfig.registry。\n\n```\n\"publishConfig\": {\n \"registry\": \"https://registry.npmjs.org/\"\n}\n```\n\n\n### 系统配置\n\n和项目关联的系统配置，比如 node 版本或操作系统兼容性之类。这些要求只会起到提示警告的作用，即使用户的环境不符合要求，也不影响安装依赖包。\n\n**engines**\n\n一些项目由于兼容性问题会对 node 或者包管理器有特定的版本号要求，比如：\n\n```\n\"engines\": {\n \"node\": \">=14 <16\",\n \"pnpm\": \">7\"\n}\n```\n要求 node 版本大于等于 14 且小于 16，同时 pnpm 版本号需要大于 7。\n\n\n**os**\n\n在 linux 上能正常运行的项目可能在 windows 上会出现异常，使用 os 字段可以指定项目对操作系统的兼容性要求。\n\n```\n\"os\": [\"darwin\", \"linux\"]\n```\n\n**cpu**\n\n指定项目只能在特定的 CPU 体系上运行。\n\n```\n\"cpu\": [\"x64\", \"ia32\"]\n```\n\n\n\n\n### 第三方配置\n\n一些第三方库或应用在进行某些内部处理时会依赖这些字段，使用它们时需要安装对应的第三方库。\n\n```js\n{\n // 其他工具访问本项目 ts 类型定义时的入口文件\n \"types\": \"./index.d.ts\",\n // npm 上所有的文件都开启 CDN 服务\n \"unpkg\": \"dist/vue.global.js\",\n // 设置项目的浏览器兼容情况, babel 和 autoprefixer 等工具会使用该配置对代码进行转换\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\"\n ],\n // 用于 webpack 的 tree-shaking 优化, 指定路径下的文件不参与 tree-shaking 并始终保留。\n \"sideEffects\": [\n \"dist/*\",\n \"es/**/style/*\",\n \"lib/**/style/*\",\n \"*.less\"\n ]\n}\n```\n\n\n### 参考文档\n- https://juejin.cn/post/7145001740696289317\n- https://juejin.cn/post/7161392772665540644\n",{"_58":441,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/311/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/311/timeline",{"_58":444,"_60":61,"_62":445,"_64":446,"_66":447,"_68":448,"_70":449,"_72":450,"_74":451,"_76":452,"_78":453,"_111":454,"_124":125,"_126":24,"_127":-5,"_128":456,"_130":457,"_152":145,"_146":459,"_148":460,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":461,"_162":462,"_168":463,"_170":464,"_182":466,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/309","https://api.github.com/repos/pro-collection/interview-question/issues/309/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/309/comments","https://api.github.com/repos/pro-collection/interview-question/issues/309/events","https://github.com/pro-collection/interview-question/issues/309",1684987713,"I_kwDOJGDC6c5kbt9B",309,"[webpack] module、chunk 、bundle 的区别【热度: 136】",{"_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},[455],{"_70":295,"_72":296,"_58":297,"_117":298,"_119":299,"_121":24,"_122":300},[],{"_58":262,"_68":263,"_62":264,"_70":265,"_72":266,"_74":267,"_76":268,"_122":269,"_140":458,"_142":271,"_144":145,"_124":125,"_146":272,"_148":273,"_150":-5,"_151":-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-04-26T13:01:07Z","2023-04-26T13:02:02Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"首先上图： \r\n![3 (1)](https://user-images.githubusercontent.com/22188674/234582993-25c40cda-d3ee-4f96-b134-44a950aba11f.png)\r\n\r\n\r\n- 手写下一个一个的文件，它们无论是 `ESM` 还是 `commonJS` 或是 `AMD`，他们都是 `module`\r\n- 当我们写的 `module` 源文件传到 `webpack` 进行打包时，`webpack` 会根据文件引用关系生成 `chunk` 文件，`webpack` 会对这个 `chunk` 文件进行一些操作\r\n- webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，可以直接在浏览器中运行。\r\n\r\n一般来说一个 chunk 对应一个 bundle，比如上图中的 `utils.js -> chunks 1 -> utils.bundle.js`\r\n\r\n但也有例外，比如说上图中，我就用 `MiniCssExtractPlugin` 从 chunks 0 中抽离出了 `index.bundle.css` 文件\r\n\r\n**总结**： \r\nmodule，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字： \r\n我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。 \r\n",{"_58":465,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/309/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/309/timeline",{"_58":468,"_60":61,"_62":469,"_64":470,"_66":471,"_68":472,"_70":473,"_72":474,"_74":475,"_76":476,"_78":477,"_111":478,"_124":125,"_126":24,"_127":-5,"_128":486,"_130":487,"_152":145,"_146":489,"_148":490,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":491,"_162":492,"_168":493,"_170":494,"_182":496,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/308","https://api.github.com/repos/pro-collection/interview-question/issues/308/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/308/comments","https://api.github.com/repos/pro-collection/interview-question/issues/308/events","https://github.com/pro-collection/interview-question/issues/308",1680059011,"I_kwDOJGDC6c5kI6qD",308,"web components 了解多少？【热度: 1,206】",{"_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},[479],{"_70":480,"_72":481,"_58":482,"_117":483,"_119":484,"_121":24,"_122":485},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",[],{"_58":203,"_68":204,"_62":205,"_70":206,"_72":207,"_74":208,"_76":209,"_122":210,"_140":488,"_142":212,"_144":145,"_124":125,"_146":213,"_148":214,"_150":-5,"_151":-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-04-23T15:06:09Z","2023-04-23T15:09:09Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"`Web Components` 是一套不同的技术，允许您创建可重用的定制元素并且在您的 web 应用中使用它们\r\n\r\n### 三要素\r\n\r\n1. `Custom elements`（自定义元素）：一组 `JavaScript` API，允许您定义 `custom elements` 及其行为，然后可以在您的用户界面中按照需要使用它们。\r\n * 通过 `class A extends HTMLElement {}` 定义组件，\r\n * 通过 `window.customElements.define('a-b', A)` 挂载已定义组件。\r\n2. `Shadow DOM`（影子 DOM ）：一组 `JavaScript` API，用于将封装的“影子” DOM 树附加到元素（**与主文档 DOM 分开呈现**）并控制其关联的功能。\r\n * 通过这种方式，您可以**保持元素的功能私有**，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。\r\n * 使用 `const shadow = this.attachShadow({mode : 'open'})` 在 `WebComponents` 中开启。\r\n3. `HTML templates`（HTML 模板）`slot` ：`template` 可以简化生成 `dom` 元素的操作，不再需要 `createElement` 每一个节点。\r\n\r\n虽然 `WebComponents` 有三个要素，但却不是缺一不可的，`WebComponents`\r\n\r\n> * 借助 `shadow dom` 来实现**样式隔离**，\r\n> * 借助 `templates` 来**简化标签**的操作。\r\n\r\n\r\n\r\n### 内部生命周期函数（4个）\r\n\r\n1. `connectedCallback`: 当 `WebComponents`**第一次**被挂在到 `dom` 上是触发的钩子，并且只会触发一次。\r\n * 类似 `React` 中的 `useEffect(() => {}, [])`，`componentDidMount`。\r\n2. `disconnectedCallback`: 当自定义元素与文档 `DOM`**断开连接**时被调用。\r\n3. `adoptedCallback`: 当自定义元素被**移动**到新文档时被调用。\r\n4. `attributeChangedCallback`: 当自定义元素的被监听属性变化时被调用。\r\n\r\n\r\n\r\n### 组件通信\r\n\r\n### 传入复杂数据类型\r\n\r\n* 传入一个 `JSON` 字符串配饰`attribute`\r\n\r\n * `JSON.stringify`配置指定属性\r\n * 在组件`attributeChangedCallback`中判断对应属性，然后用`JSON.parse()`获取\r\n\r\n* 配置DOM的`property`属性\r\n\r\n * `xx.dataSource = [{ name: 'xxx', age: 19 }]`\r\n * 但是，自定义组件中没有办法监听到这个属性的变化\r\n * 如果想实现，复杂的结构，不是通过配置，而是在定义组件时候，就确定\r\n\r\n### 状态的双向绑定\r\n\r\n```kotlin\r\n { data = e.detail }\">\r\n\r\n\r\n// js\r\n(function () {\r\n const template = document.createElement('template')\r\n template.innerHTML = `\r\n \r\n \r\n `\r\n class WlInput extends HTMLElement {\r\n constructor() {\r\n super()\r\n const shadow = this.attachShadow({\r\n mode: 'closed'\r\n })\r\n const content = template.content.cloneNode(true)\r\n this._input = content.querySelector('#wlInput')\r\n this._input.value = this.getAttribute('value')\r\n shadow.appendChild(content)\r\n this._input.addEventListener(\"input\", ev => {\r\n const target = ev.target;\r\n const value = target.value;\r\n this.value = value;\r\n this.dispatchEvent(\r\n new CustomEvent(\"change\", { detail: value })\r\n );\r\n });\r\n }\r\n get value() {\r\n return this.getAttribute(\"value\");\r\n }\r\n set value(value) {\r\n this.setAttribute(\"value\", value);\r\n }\r\n }\r\n window.customElements.define('wl-input', WlInput)\r\n})()\r\n\r\n```\r\n\r\n监听了这个表单的 `input` 事件，并且在每次触发 `input` 事件的时候触发自定义的 `change` 事件，并且把输入的参数回传。\r\n\r\n\r\n\r\n### 样式设置\r\n\r\n### 直接给自定义标签添加样式\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n```\r\n\r\n### 定义元素内部子元素设置样式\r\n\r\n分为两种场景：\r\n\r\n1. 在主 DOM 使用 JS\r\n2. 在 Custom Elements 构造函数中使用 JS\r\n\r\n#### 在主 DOM 使用 JS 给 Shadow DOM 增加 style 标签：\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n#### 在 Custom Elements 构造函数中使用 JS 增加 style 标签：\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n### 引入 CSS 文件\r\n\r\n使用 JS 创建 link 标签，然后引入 CSS 文件给自定义元素内部的子元素设置样式\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n样式文件\r\n\r\n```css\r\n.input-header{\r\n padding:10px;\r\n background-color: yellow;\r\n font-size: 16px;\r\n font-weight: bold;\r\n}\r\n\r\n```\r\n\r\n\r\n",{"_58":495,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/308/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/308/timeline",{"_58":498,"_60":61,"_62":499,"_64":500,"_66":501,"_68":502,"_70":503,"_72":504,"_74":505,"_76":506,"_78":507,"_111":508,"_124":125,"_126":24,"_127":-5,"_128":510,"_130":511,"_152":145,"_146":513,"_148":514,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":515,"_162":516,"_168":517,"_170":518,"_182":520,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/307","https://api.github.com/repos/pro-collection/interview-question/issues/307/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/307/comments","https://api.github.com/repos/pro-collection/interview-question/issues/307/events","https://github.com/pro-collection/interview-question/issues/307",1680057817,"I_kwDOJGDC6c5kI6XZ",307,"CSR、SSR、SSG、NSR、ESR、ISR 都是啥？【热度: 3,492】",{"_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},[509],{"_70":480,"_72":481,"_58":482,"_117":483,"_119":484,"_121":24,"_122":485},[],{"_58":203,"_68":204,"_62":205,"_70":206,"_72":207,"_74":208,"_76":209,"_122":210,"_140":512,"_142":212,"_144":145,"_124":125,"_146":213,"_148":214,"_150":-5,"_151":-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-04-23T15:02:29Z","2023-04-23T15:02:30Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"CSR、SSR、SSG、NSR、ESR、ISR 都是啥？\n\n根据不同的构建、渲染过程有不同的优劣势和适用情况。\n\n* 现代 UI 库加持下常用的 `CSR`、\n* 具有更好 `SEO` 效果的 `SSR` (`SPR`)、\n* 转换思路主打**构建时生成**的 `SSG`、\n* 大架构视野之上的 `ISR`、`DPR`，\n* 还有更少听到的 `NSR`、`ESR`。\n\n### CSR(Client Side Rendering)\n\n> 页面托管服务器只需要对页面的**访问请求响应**一个如下的**空页面**\n\n```html\n\n\n \n \n \n \n \n \n \n \n

\n \n \n \n \n\n\n```\n\n页面中留出一个用于填充渲染内容的视图节点 (`div#root`)，并插入指向项目**编译压缩后**的\n\n* `JS Bundle` 文件的 `script` 节点\n* 指向 `CSS` 文件的 `link.stylesheet` 节点等。\n\n浏览器接收到这样的文档响应之后，会根据文档内的链接加载脚本与样式资源，并完成以下几方面主要工作：\n\n> 1. **执行脚本**\n> 2. 进行**网络访问以获取在线数据**\n> 3. 使用 DOM API **更新页面结构**\n> 4. **绑定交互事件**\n> 5. **注入样式**\n\n以此完成整个渲染过程。\n\nCSR 模式有以下几方面优点：\n\n* UI 库支持\n* **前后端分离**\n* **服务器负担轻**\n\n\n\n\n### SSR (Server Side Rendering)\n\nSSR 的概念，即与 `CSR` 相对地，在服务端完成大部分渲染工作，服务器在响应站点访问请求的时候，就已经渲染好可供呈现的页面。\n\n像 `React`、`Vue` 这样的 UI 生态巨头，其实都有一个关键的 `Virtual DOM` (or VDOM) 概念,先自己**建模处理视图表现与更新**、再批量调 `DOM API` 完成视图渲染更新。这就带来了一种 `SSR` 方案：\n\n`VDOM` 是**自建模型**，是一种抽象的嵌套数据结构，也就可以在 `Node` 环境（或者说一切服务端环境）下跑起来，**把原来的视图代码拿来在服务端跑**，通过 `VDOM` 维护，再在最后**拼接好字符串作为页面响应**，生成文档作为响应页面，此时的页面内容已经基本生成完毕，把逻辑代码、样式代码附上，则可以实现完整的、可呈现页面的响应。\n\n### SSR优点\n\n* 呈现速度和用户体验佳\n* `SEO` 友好\n\n### SSR缺点\n\n1. 引入成本高\n * 将视图渲染的工作交给了服务器做，引入了新的概念和技术栈（如 Node）\n2. 响应时间长\n * SSR 在完成访问响应的时候需要做更多的计算和生成工作\n * 关键指标 `TTFB` (`Time To First Byte`) 将变得更大\n3. 首屏交互不佳\n * 虽然 SSR 可以让页面请求响应后更快在浏览器上渲染出来\n * 但在首帧出现，需要客户端加载激活的逻辑代码（如事件绑定）还没有初始化完毕的时候，其实是不可交互的状态\n\n\n\n### SSR-React 原理\n\n1. VDOM\n2. 同构\n3. 双端对比\n\n几大概念：\n- VDOM\n- 同构\n- 双端对比\n- renderToString()\n- renderToStaticMarkup()\n\n```javascript\nReactDOMServer.renderToStaticMarkup(element)\n\n```\n\n仅仅是为了将组件渲染为html字符串，不会带有`data-react-checksum`属性\n\n\n\n### SPR (Serverless Pre-Rendering)\n\n无服务预渲染，这是 `Serverless` 话题之下的一项渲染技术。`SPR` 是指在 `SSR` 架构下通过预渲染与缓存能力，将部分页面转化为静态页面，以避免其在服务器接收到请求的时候频繁被渲染的能力，同时一些框架还支持**设置静态资源过期时间**，以确保这部分“静态页面”也能有一定的即时性。\n\n\n\n### SSG (Static Site Generation)\n\n* 它与 `CSR` 一样，只需要**页面托管**，不需要真正编写并部署服务端，页面资源在编译完成部署之前就已经确定；\n* 但它又与 `SSR` 一样，属于一种 `Prerender` 预渲染操作，即在用户浏览器得到页面响应之前，页面内容和结构就已经渲染好了。\n* 当然形式和特征来看，它更接近 SSR。\n\n> `SSG` 模式，把原本日益动态化、交互性增强的页面，变成了大部分已经填充好，托管在页面服务 / CDN 上的**静态页面**\n\n\n\n### NSR (Native Side Rendering)\n\n`Native` 就是客户端，万物皆可**分布式**，可以理解为这就是一种分布式的 `SSR`，不过这里的渲染工作交给了客户端去做而不是远端服务器。在用户即将访问页面的**上级页面预取页面数据，由客户端缓存 HTML 结构，以达到用户真正访问时快速响应的效果**。\n\nNSR 见于各种移动端 + `Webview` 的 `Hybrid` 场景，是需要页面与客户端研发协作的一种优化手段。\n\n\n\n### ESR (Edge Side Rendering)\n\n`Edge` 就是边缘，类比前面的各种 `XSR`，`ESR` 就是将渲染工作交给边缘服务器节点，常见的就是 `CDN` 的边缘节点。这个方案主打的是**边缘节点相比核心服务器与用户的距离优势**，利用了 `CDN` 分级缓存的概念，渲染和内容填充也可以是分级进行并缓存下来的。\n\n`ESR` 之下静态内容与动态内容是分流的，\n\n1. 边缘 CDN 节点可以将静态页面内容先响应给用户\n2. 然后再自己发起动态内容请求，得到核心服务器响应之后再返回给用户\n\n是在大型网络架构下非常极致的一种优化，但这也就依赖更庞大的技术基建体系了。\n\n\n\n### ISR (Incremental Site Rendering)\n\n**增量式网站渲染**，就是对待页面内容小刀切，**有更细的差异化渲染粒度**，能渐进、分层地进行渲染。\n\n常见的选择是：\n\n* 对于重要页面如首屏、访问量较大的直接落地页，进行**预渲染并添加缓存**，保证最佳的访问性能；\n* 对于次要页面，则确保有兜底内容可以即时 `fallback`，再将其实时数据的渲染留到 CSR 层次完成，同时触发异步缓存更新。\n\n对于“异步缓存更新”，则需要提到一个常见的内容缓存策略：`Stale While Revalidate`，CDN 对于数据请求始终首先响应缓存内容，如果这份内容已经过期，则**在响应之后再触发异步更新**——这也是对于次要元素或页面的缓存处理方式。\n\n",{"_58":519,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/307/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/307/timeline",{"_58":522,"_60":61,"_62":523,"_64":524,"_66":525,"_68":526,"_70":527,"_72":528,"_74":529,"_76":530,"_78":531,"_111":532,"_124":125,"_126":24,"_127":-5,"_128":535,"_130":536,"_152":145,"_146":538,"_148":539,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":540,"_162":541,"_168":542,"_170":543,"_182":545,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/306","https://api.github.com/repos/pro-collection/interview-question/issues/306/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/306/comments","https://api.github.com/repos/pro-collection/interview-question/issues/306/events","https://github.com/pro-collection/interview-question/issues/306",1680054594,"I_kwDOJGDC6c5kI5lC",306,"[React] 如何监听路由变化？【热度: 679】",{"_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},[533,534],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":332,"_72":333,"_58":334,"_117":335,"_119":306,"_121":24,"_122":307},[],{"_58":262,"_68":263,"_62":264,"_70":265,"_72":266,"_74":267,"_76":268,"_122":269,"_140":537,"_142":271,"_144":145,"_124":125,"_146":272,"_148":273,"_150":-5,"_151":-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-04-23T14:53:27Z","2023-04-23T14:53:28Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"**依赖**\n\n- react-router-dom v6\n- react v18\n\n### 实现\n\n监听的核心原理基于useEffect，和useLocation，通过useEffect监听当前location的变化，这样就实现的最基本的监听结构：\n\n```jsx\nconst location = useLocation();\nuseEffect(() => {\n //记录路径\n}, [location]);\n```\n\n然后，我们可以在useEffect中记录和更新from、to的值，可以根据自己的需要选择from、to的数据类型，这里我使用了React-router提供的Location类型。\n\n更新逻辑为：将to的值赋给from，然后将新的location赋值给to\n\n```typescript jsx\nimport { Location, useLocation } from \"react-router-dom\";\n\ntype LocationTrans = {\n from: Location;\n to: Location;\n};\n\nconst location = useLocation();\nconst locationState = useRef({\n from: null,\n to: null,\n});\n\nuseEffect(() => {\n locationState.current.from = locationState.current.to;\n locationState.current.to = location;\n}, [location]);\n```\n\n最后，利用React的Context进行封装，将其封装成一个组件和一个hook，使用者可以通过这个组件来进行监听，通过hook快速访问数据。我将这些代码放在了同一个.tsx文件中，保证了逻辑的高内聚。\n\n```typescript jsx\nimport React, { createContext, useContext, useEffect, useRef } from \"react\";\nimport { Location, useLocation } from \"react-router-dom\";\n\n\ntype LocationTrans = {\n from: Location;\n to: Location;\n};\n\nexport const LocationContext =\n createContext>(null);\n\nexport function WithLocationListener(props: { children: React.ReactNode }) {\n const location = useLocation();\n\n const locationState = useRef({\n from: null,\n to: null,\n });\n\n useEffect(() => {\n locationState.current.from = locationState.current.to;\n locationState.current.to = location;\n }, [location]);\n\n return (\n \n {props.children}\n \n );\n}\n\nexport function useLocationConsumer(): LocationTrans {\n const ref = useContext(LocationContext);\n return ref.current;\n}\n```\n\n### 使用\n\n这个组件只能在RouterProvider的子组件中使用，因为useLocation只能在这个范围内使用。\n\n```typescript jsx\n//import ....\n\nfunction Layout() {\n return (\n \n {/* ..... */}\n \n );\n}\n```\n\n在需要用到路由信息的页面：\n\n```typescript jsx\nconst { from, to } = useLocationConsumer();\n```\n\n### 参考文档\n- https://juejin.cn/post/7195910055497580600\n",{"_58":544,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/306/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/306/timeline",{"_58":547,"_60":61,"_62":548,"_64":549,"_66":550,"_68":551,"_70":552,"_72":553,"_74":554,"_76":555,"_78":556,"_111":557,"_124":125,"_126":24,"_127":-5,"_128":560,"_130":561,"_152":145,"_146":563,"_148":564,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":565,"_162":566,"_168":567,"_170":568,"_182":570,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/305","https://api.github.com/repos/pro-collection/interview-question/issues/305/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/305/comments","https://api.github.com/repos/pro-collection/interview-question/issues/305/events","https://github.com/pro-collection/interview-question/issues/305",1680052575,"I_kwDOJGDC6c5kI5Ff",305,"[React] 开发过程中有哪些性能优化手段？【热度: 1,511】",{"_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},[558,559],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":332,"_72":333,"_58":334,"_117":335,"_119":306,"_121":24,"_122":307},[],{"_58":203,"_68":204,"_62":205,"_70":206,"_72":207,"_74":208,"_76":209,"_122":210,"_140":562,"_142":212,"_144":145,"_124":125,"_146":213,"_148":214,"_150":-5,"_151":-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-04-23T14:47:00Z","2023-04-23T14:47:01Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"### 路由懒加载\n\n两种方式可实现:\n\n- 使用 React 中 Suspense,lazy\n- 使用 react-loadable\n\n#### React 中 Suspense,lazy\n\n应用的组件需要使用 lazy 的方式引入，且使用 Suspense 包裹异步加载的组件\n\n```jsx\n import { Route, Switch } from 'react-router-dom';\n\nconst MainCom = lazy(() => import('../views/main/maincom'));\n\nclass RouterConfig extends React.Component {\n render() {\n return (\n 加载中 }>\n \n ...\n \n ...\n \n\n \n )\n }\n}\n\nexport default RouterConfig;\n```\n\n#### react-loadable\n\n```jsx\n import { Route, Switch } from 'react-router-dom';\nimport Loadable from 'react-loadable';\n\nconst logincom = Loadable({\n loader: () => import('../views/login/login'),\n loading() {\n return

正在加载

\n },\n})\n\nclass RouterConfig extends React.Component {\n render() {\n return (\n 加载中 }>\n \n ...\n \n ...\n \n\n \n )\n }\n}\n\nexport default RouterConfig;\n```\n\n### 受控性组件颗粒化，独立请求服务渲染单元\n\n可控性组件颗粒化，独立请求服务渲染单元是笔者在实际工作总结出来的经验。目的就是避免因自身的渲染更新或是副作用带来的全局重新渲染。\n\n大概思路是这样子的：\n![1](https://foruda.gitee.com/images/1682260059688615416/19b33481_7819612.png)\n\n拆分需要单独调用后端接口的细小组件，建立独立的数据请求和渲染，这种依赖数据更新 -> 视图渲染的组件，能从整个体系中抽离出来，好处我总结有以下几个方面。\n\n1. 可以避免父组件的冗余渲染，react的数据驱动，依赖于 state 和 props 的改变，改变state 必然会对组件 render 函数调用，如果父组件中的子组件过于复杂，一个自组件的 state\n 改变，就会牵一发动全身，必然影响性能，所以如果把很多依赖请求的组件抽离出来，可以直接减少渲染次数。\n\n2. 可以优化组件自身性能，无论从class声明的有状态组件还是fun声明的无状态，都有一套自身优化机制，无论是用shouldupdate 还是用 hooks中 useMemo useCallback\n ，都可以根据自身情况，定制符合场景的渲条件，使得依赖数据请求组件形成自己一个小的，适合自身的渲染环境。\n\n3. 能够和redux ,以及redux衍生出来 redux-action , dva,更加契合的工作，用 connect\n 包裹的组件，就能通过制定好的契约，根据所需求的数据更新，而更新自身，而把这种模式用在这种小的，需要数据驱动的组件上，就会起到物尽其用的效果。\n\n### shouldComponentUpdate ,PureComponent 和 React.memo ,immetable.js/immer.js 助力性能调优\n\n#### PureComponent 和 React.memo\n\nReact.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。如果对象包含复杂的数据结构(比如对象和数组)\n，他会浅比较，如果深层次的改变，是无法作出判断的，React.PureComponent 认为没有变化，而没有渲染试图。\n\nreact.memo 和 PureComponent 功能类似，react.memo 作为第一个高阶组件，第二个参数可以对props 进行比较，和shouldComponentUpdate不同的, 当第二个参数返回 true\n的时候，证明props没有改变，不渲染组件，反之渲染组件。\n\n#### shouldComponentUpdate\n\n使用 shouldComponentUpdate() 以让React知道当state或props的改变是否影响组件的重新render，默认返回ture，返回false时不会重新渲染更新，而且该方法并不会在初始化渲染或当使用\nforceUpdate() 时被调用。\n\n#### immetable.js/immer.js\n\nimmetable.js 是Facebook 开发的一个js库，可以提高对象的比较性能，像之前所说的pureComponent 只能对对象进行浅比较，,对于对象的数据类型,却束手无策,所以我们可以用 immetable.js 配合\nshouldComponentUpdate 或者 react.memo来使用。immutable 中我们用react-redux来简单举一个例子，如下所示数据都已经被 immetable.js处理。\n\n```jsx\nimport { is } from 'immutable'\n\nconst GoodItems = connect(state =>\n ({ GoodItems: filter(state.getIn(['Items', 'payload', 'list']), state.getIn(['customItems', 'payload', 'list'])) || Immutable.List(), })\n /* 此处省略很多代码～～～～～～ */\n)(memo(({ Items, dispatch, setSeivceId }) => {\n /* */\n}, (pre, next) => is(pre.Items, next.Items)))\n\n```\n\n通过 is 方法来判断，前后Items(对象数据类型)是否发生变化。\n\n**immer** 是 mobx 的作者写的一个 immutable 库，核心实现是利用 ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构，简单易用、体量小巧、设计巧妙，满足了我们对 JS 不可变数据结构的需求。\n\n具体使用可见： https://juejin.cn/post/7157745748832944141\n\n### hooks 组件中，常使用 useMemo、useCallback、useRef 等方式方式重复申明\n\n每次点击button的时候,都会执行Index函数。handerClick1 , handerClick2,handerClick3都会重新声明。这种函数的重复申明，会使得子组件每次都是拿到的新的应用对象，会导致 memo 直接失效。\n\n```jsx\nfunction Index() {\n const [number, setNumber] = useState(0)\n const [handerClick1, handerClick2, handerClick3] = useMemo(() => {\n const fn1 = () => {\n /* 一些操作 */\n }\n const fn2 = () => {\n /* 一些操作 */\n }\n const fn3 = () => {\n /* 一些操作 */\n }\n return [fn1, fn2, fn3]\n }, []) /* 只有当数据里面的依赖项，发生改变的时候，才会重新声明函数。 */\n return

\n 点我有惊喜1\n 点我有惊喜2\n 点我有惊喜3\n \n

\n}\n```\n\n推荐使用 ahooks - usePersistFn、useMemoizedFn 其实现也非常简单，就是将函数的应用绑定在了 ref 上\n\n```jsx\nfunction usePersistFn(fn, deps) {\n const fnRef = useRef();\n\n useEffect(() => {\n fnRef.current = fn;\n }, [fn, ...deps]);\n\n return useCallback(() => {\n return fnRef.current();\n }, [fnRef]);\n}\n```\n\n### 警惕 context 陷阱\n使用Context可以避免的组件的层层props嵌套的问题。但是它使用consumer拿值时,会多一层组件。但得益于 useContext hook 我们可以不使用consumer组件。直接拿到值,直观。一般的使用场景,如那拿全局的class前缀，或者国际化，Ui主题颜色等。\n\n**但是当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate、memo 等函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。**\n\n使用 `createContext 和 useContext` 的时候，尽量从顶层往下传递的数据是不可变的数据，否则会引起整个链路层级的渲染。 \n\n此处推荐使用 `recoil`，由 facebook 官方出品，使用语法非常简单，跟 context 很类似。\n\n",{"_58":569,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/305/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/305/timeline",{"_58":572,"_60":61,"_62":573,"_64":574,"_66":575,"_68":576,"_70":577,"_72":578,"_74":579,"_76":580,"_78":581,"_111":582,"_124":125,"_126":24,"_127":-5,"_128":584,"_130":585,"_152":145,"_146":587,"_148":588,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":589,"_162":590,"_168":591,"_170":592,"_182":594,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/304","https://api.github.com/repos/pro-collection/interview-question/issues/304/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/304/comments","https://api.github.com/repos/pro-collection/interview-question/issues/304/events","https://github.com/pro-collection/interview-question/issues/304",1680040487,"I_kwDOJGDC6c5kI2In",304,"[React] ref 是如何拿到函数组件的实例【热度: 881】",{"_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},[583],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":262,"_68":263,"_62":264,"_70":265,"_72":266,"_74":267,"_76":268,"_122":269,"_140":586,"_142":271,"_144":145,"_124":125,"_146":272,"_148":273,"_150":-5,"_151":-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-04-23T14:07:56Z","2023-04-23T14:17:50Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"### 使用`forwordRef`\n\n将`input`单独封装成一个组件`TextInput`。\n\n```jsx\nconst TextInput = React.forwardRef((props,ref) => {\n return \n})\n\n```\n\n用`TextInputWithFocusButton`调用它\n\n```jsx\nfunction TextInputWithFocusButton() {\n // 关键代码\n const inputEl = useRef(null);\n const onButtonClick = () => {\n // 关键代码，`current` 指向已挂载到 DOM 上的文本输入元素\n inputEl.current.focus();\n };\n return (\n <>\n // 关键代码\n \n \n \n );\n}\n\n```\n\n### useImperativeHandle\n\n有时候，我们可能**不想将整个子组件暴露给父组件**，而只是暴露出父组件需要的值或者方法，这样可以让代码更加明确。而`useImperativeHandle` Api就是帮助我们做这件事的。\n\n```jsx\nconst TextInput = forwardRef((props,ref) => {\n const inputRef = useRef();\n // 关键代码\n useImperativeHandle(ref, () => ({\n focus: () => {\n inputRef.current.focus();\n }\n }));\n return \n})\n\n\nfunction TextInputWithFocusButton() {\n // 关键代码\n const inputEl = useRef(null);\n const onButtonClick = () => {\n // 关键代码，`current` 指向已挂载到 DOM 上的文本输入元素\n inputEl.current.focus();\n };\n return (\n <>\n // 关键代码\n \n \n \n );\n}\n\n\n```\n\n也可以使用`current.focus()`来做`input`聚焦。\n\n> 这里要注意的是，子组件`TextInput`中的`useRef`对象，只是用来获取`input`元素的，大家不要和父组件的`useRef`混淆了。\n",{"_58":593,"_173":145,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145},"https://api.github.com/repos/pro-collection/interview-question/issues/304/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/304/timeline",{"_58":596,"_60":61,"_62":597,"_64":598,"_66":599,"_68":600,"_70":601,"_72":602,"_74":603,"_76":604,"_78":605,"_111":606,"_124":125,"_126":24,"_127":-5,"_128":619,"_130":620,"_152":145,"_146":622,"_148":623,"_151":-5,"_154":155,"_106":-5,"_156":-5,"_157":624,"_162":625,"_168":626,"_170":627,"_182":629,"_184":-5,"_185":-5,"_186":187},"https://api.github.com/repos/pro-collection/interview-question/issues/303","https://api.github.com/repos/pro-collection/interview-question/issues/303/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/303/comments","https://api.github.com/repos/pro-collection/interview-question/issues/303/events","https://github.com/pro-collection/interview-question/issues/303",1680039533,"I_kwDOJGDC6c5kI15t",303,"dom 渲染能使用 GPU 加速吗？【热度: 494】",{"_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},[607,614],{"_70":608,"_72":609,"_58":610,"_117":611,"_119":612,"_121":24,"_122":613},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":615,"_72":616,"_58":617,"_117":618,"_119":306,"_121":24,"_122":307},5312214934,"LA_kwDOJGDC6c8AAAABPKH3lg","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E6%98%93","网易",[],{"_58":262,"_68":263,"_62":264,"_70":265,"_72":266,"_74":267,"_76":268,"_122":269,"_140":621,"_142":271,"_144":145,"_124":125,"_146":272,"_148":273,"_150":-5,"_151":-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-04-23T14:05:01Z","2023-04-23T14:16:47Z",{"_159":145,"_160":145,"_161":145},{"_164":145,"_165":145,"_166":145,"_167":145},"只有部分情况可以使用 GPU 加速渲染。浏览器将 DOM 元素转换为图层（Layer），然后将图层绘制到屏幕上。在某些情况下，这些图层可以使用 GPU 加速，从而提高渲染性能。\n\n浏览器将具有以下属性之一的元素视为单独的图层：\n\n- 使用 CSS 3D 变换或透视属性的元素\n- 使用 CSS 滤镜的元素\n- 使用 will-change 属性显式指定的元素\n- 使用