My Page

{props.value}

;\n});\n```\n\n在上面的代码中，`React.memo` 包装了一个简单的函数组件 `MyComponent`。如果该组件的 `value` prop 和 `state` 没有发生变化，那么就会直接使用之前的结果不会重新渲染。\n\n`useMemo` 是 `React` 中一个 hooks，它可以用来缓存计算结果，从而优化组件渲染性能。它接受两个参数：要缓存的计算函数和依赖项数组。每当依赖项发生变化时，该计算函数就会重新计算，并返回一个新的结果。例如：\n\n```jsx\nimport React, { useMemo } from 'react';\n \nconst MyComponent = props => {\n const result = useMemo(() => expensiveComputation(props.value), [props.value]);\n return

{result}

;\n};\n```\n\n在上面的代码中，我们传递了一个计算函数 `expensiveComputation`，以及一个依赖项数组 `[props.value]`。如果依赖项没有发生变化，`myValue` 就会被缓存起来，不会重新计算。\n\n总的来说：\n\n`React.memo` 的作用是优化函数组件的渲染性能，它可以比较组件的 `props` 和 `state` 是否发生变化，如果没有变化，就不会重新渲染。\n\n`useMemo` 的作用是缓存计算结果，从而避免重复计算，它接受一个计算函数和一个依赖项数组，当依赖项发生变化时，计算函数就会重新计算，返回一个新的结果，否则就会使用之前的缓存结果。\n",{"_58":403,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/349/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/349/timeline",{"_58":406,"_60":61,"_62":407,"_64":408,"_66":409,"_68":410,"_70":411,"_72":412,"_74":413,"_76":414,"_78":415,"_111":416,"_131":132,"_133":24,"_134":418,"_136":419,"_158":143,"_152":421,"_154":422,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":423,"_170":424,"_176":425,"_178":426,"_190":428,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/347","https://api.github.com/repos/pro-collection/interview-question/issues/347/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/347/comments","https://api.github.com/repos/pro-collection/interview-question/issues/347/events","https://github.com/pro-collection/interview-question/issues/347",1698677762,"I_kwDOJGDC6c5lP8QC",347,"Javascript 数组中有那些方法可以改变自身，那些不可以",{"_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},[417],{"_70":358,"_72":359,"_58":360,"_117":361,"_119":362,"_121":24,"_122":363},[],{"_58":217,"_68":218,"_62":219,"_70":220,"_72":221,"_74":196,"_76":222,"_122":223,"_146":420,"_148":225,"_150":151,"_131":132,"_152":226,"_154":227,"_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},"2023-05-06T15:41:01Z","2023-06-02T06:36:31Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"可以改变自身的数组方法：\r\n\r\n- `pop()`: 删除数组最后一项，并返回删除项的值。\r\n- `push():` 向数组末尾添加一个或多个元素，并返回新数组的长度。\r\n- `reverse()`: 反转数组的顺序，返回逆序后的原数组。\r\n- `shift()`: 删除数组第一项，并返回删除项的值。\r\n- `unshift()`: 方法将指定元素添加到数组的开头，并返回数组的新长度。\r\n- `sort()`: 对数组进行排序，返回排序后的原数组。\r\n- `splice()`: 添加或删除数组元素，返回由被删除元素组成的数组。\r\n\r\n不可以改变自身的数组方法:\r\n\r\n- `concat()`: 连接一或多个数组，返回新的合并的数组。\r\n- `filter()`: 对数组筛选符合条件的项，并返回符合条件的项组成的新数组。\r\n- `map()`: 对数组的每一项进行操作，并返回每个操作后的项组成的新数组。\r\n- `slice()`: 返回数组的一部分作为新数组，原数组不会改变。\r\n- `join()`: 将数组的每一项拼接起来作为一个字符串返回，原数组不会改变。\r\n",{"_58":427,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/347/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/347/timeline",{"_58":430,"_60":61,"_62":431,"_64":432,"_66":433,"_68":434,"_70":435,"_72":436,"_74":437,"_76":438,"_78":439,"_111":440,"_131":132,"_133":24,"_134":442,"_136":443,"_158":151,"_152":445,"_154":445,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":446,"_170":447,"_176":448,"_178":449,"_190":451,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/346","https://api.github.com/repos/pro-collection/interview-question/issues/346/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/346/comments","https://api.github.com/repos/pro-collection/interview-question/issues/346/events","https://github.com/pro-collection/interview-question/issues/346",1698663675,"I_kwDOJGDC6c5lP4z7",346,"new Function 了解多少？【热度: 1,042】",{"_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},[441],{"_70":358,"_72":359,"_58":360,"_117":361,"_119":362,"_121":24,"_122":363},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":444,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-05-06T14:58:42Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：new Function 概念、js new Function 执行性能、js new Function 使用场景\n\n### 基本概念\n\n`new Function()` 是 JavaScript 中的一个构造函数，它可以实例化一个新的函数对象并返回。该函数对象可以使用传递给 `new Function()` 的字符串参数作为函数体，并使用其他传递给它的参数作为函数参数，从而动态创建一个可执行的函数。\n\n具体来说，`new Function()` 构造函数可以接受多个字符串参数作为函数的参数和函数体，其参数形式如下：\n\n```\nnew Function ([arg1[, arg2[, ...argn]],] functionBody)\n```\n\n其中，`arg1, arg2, ..., argn` 为函数的参数列表，`functionBody` 为函数体的字符串表示。当调用 `new Function()` 函数时，JavaScript 引擎会将 `arg1, arg2, ..., argn` 所表示的参数和 `functionBody` 所表示的函数体组合成一个新的函数对象，并将该对象返回。\n\n**举例**\n\n下面是一个简单的 `new Function()` 的使用示例，它使用 `new Function()` 构造函数动态创建一个函数对象，并将该对象作为变量 `add` 的值进行赋值：\n\n```\nconst add = new Function('a', 'b', 'return a + b;');\nconsole.log(add(2, 3)); // 5\n```\n\n上述代码中，`new Function('a', 'b', 'return a + b;')` 创建了一个新的函数对象，其中 `'a'` 和 `'b'` 是函数的参数列表，`'return a + b;'` 是函数的实现代码。然后，该函数对象被赋值给变量 `add`。最后，调用 `add(2, 3)` 执行该函数，返回 `5`。\n\n需要注意的是，`new Function()` 构造函数不能访问其上下文中的变量和函数，因此在使用时需要特别注意作用域的限制。同时，由于 `new Function()` 构造函数的执行权限较为灵活，因此在使用时需要仔细检查并确保其输入参数的合法性和安全性。\n\n\n### new Function 和 eval 的区别\n\n虽然 `new Function()` 和 `eval()` 都可以执行字符串形式的 JavaScript 代码，但是它们在执行方式、使用场景和安全性方面还是有很大的区别的。\n\n下面是 `new Function()` 和 `eval()` 的主要区别：\n\n1. 执行方式不同：`new Function()` 构造函数创建的函数对象只会在其被调用时才会执行，而 `eval()` 函数则立即执行其参数中的 JavaScript 代码，并返回其中的值（如果有）。\n\n2. 作用域不同：`new Function()` 构造函数创建的函数对象没有访问父作用域的能力，只能访问自己的局部变量和全局变量；而 `eval()` 函数则可以访问其自身函数作用域和父作用域的变量和函数，因此具有更高的灵活性和不可预知性。\n\n3. 安全性不同：由于 `new Function()` 构造函数定义的函数对象是在严格的函数作用域下运行的，因此其代码不会改变或访问父作用域中的变量。因此，使用 `new Function()` 构造函数创建函数对象时，可以更好地保证其安全性。而 `eval()` 函数则无法保证代码的安全性，因为它可以访问并改变父作用域中的变量，从而具有更高的攻击风险。\n\n### new Function 性能\n\n与 `eval()` 相比，`new Function()` 函数具有更好的性能。这是因为 `new Function()` 函数在编译时会创建一个新的函数对象，不会像 `eval()` 函数一样将代码注入到当前作用域中。相反，它只在需要时才编译并执行代码，因此在常规情况下，`new Function()` 的性能比 `eval()` 更好。\n\n另外，由于 `new Function()` 在全局作用域外部定义新的函数，可以更好地掌控执行环境，因此我们可以利用 `new Function()` 函数的局部性，使其不仅取代 `eval()`，而且在一定程度上比自执行函数和即时函数表达式引入更少的全局变量。\n\n不过需要注意的是，如果在一个循环中频繁地使用 `new Function()`，或者在函数体内创建过多的嵌套函数，可能会导致性能下降。因此，当需要使用 `new Function()` 函数时，应该尽量减少不必要的重复调用，并注意代码的优化和缓存。\n\n\n### new Function 使用场景\n\n`new Function()` 的使用场景主要是动态生成 Javascript 代码的情况。由于它可以使用字符串形式作为函数体，并接受可变数量的参数，因此很适合在需要动态生成 JavaScript 代码的场景中使用。下面列举一些常见的使用场景：\n\n1. 动态生成函数：使用 `new Function()` 可以动态生成函数，有时候这种方式比使用函数表达式更加灵活。\n\n2. 模板引擎：某些模板引擎使用 `new Function()` 动态生成 JavaScript 代码来进行文本渲染和数据绑定。\n\n3. 解析 JSON：从服务端获取 JSON 数据时，可以使用 `new Function()` 将其转换为具有更好可读性的 JavaScript 对象。\n举例：\n```js\nconst json = '{\"name\": \"张三\", \"age\": \"18\", \"gender\": \"男\"}';\nconst parseJson = new Function(`return ${json}`);\n\nconsole.log(parseJson()); // 输出：{name: \"张三\", age: \"18\", gender: \"男\"}\n```\n\n4. 在浏览器中查找或执行某些 DOM 元素：可以将 JavaScript 代码传递给 `new Function()` 进行动态执行和查找。\n\n需要注意的是，由于 `new Function()` 可以动态生成和执行任意 JavaScript 代码，因此其安全性和风险需要仔细考虑和评估。在使用 `new Function()` 时，应该避免用于可疑的或不可信任的代码执行，并严格控制传递给函数构造函数的参数，以避免潜在的安全漏洞。\n",{"_58":450,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/346/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/346/timeline",{"_58":453,"_60":61,"_62":454,"_64":455,"_66":456,"_68":457,"_70":458,"_72":459,"_74":460,"_76":461,"_78":462,"_111":463,"_131":132,"_133":24,"_134":465,"_136":466,"_158":151,"_152":468,"_154":469,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":470,"_170":471,"_176":472,"_178":473,"_190":475,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/345","https://api.github.com/repos/pro-collection/interview-question/issues/345/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/345/comments","https://api.github.com/repos/pro-collection/interview-question/issues/345/events","https://github.com/pro-collection/interview-question/issues/345",1698653333,"I_kwDOJGDC6c5lP2SV",345,"eval 了解多少？【热度: 538】",{"_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},[464],{"_70":358,"_72":359,"_58":360,"_117":361,"_119":362,"_121":24,"_122":363},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":467,"_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},"2023-05-06T14:29:24Z","2023-05-06T14:29:25Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：eval 使用场景、eval 性能、eval 优点、eval 缺点\n\n### 什么是 eval\n\n`eval()` 是 JavaScript 的一个全局函数，用于解析并执行字符串代码。\n\n它接受一个字符串参数，该字符串包含 JavaScript 表达式或语句。在 `eval` 函数执行期间，该字符串的内容将被视为有效 JavaScript 代码，并运行当前作用域中的变量和函数。`eval()` 函数返回执行结果的值。\n\n举个例子：\n\n```js\nlet x = 1;\nlet y = 2;\nconst result = eval(\"x + y\"); // 将字符串作为代码执行\nconsole.log(result); // 输出 3\n```\n\n`eval()` 常被认为是一个危险的函数，原因是它可以执行任何字符串。如果 `eval()` 执行了用户输入的文本，攻击者可能会注入恶意代码，从而窃取敏感信息或操纵应用程序。因此，最好不要在程序中使用 `eval()` 函数，除非你非常明确及了解其潜在风险。\n\n除了 `eval()`，JavaScript 还提供了其他如 `Function()` 构造函数或 `setTimeout()` 等能够执行字符代码的方法，但它们的使用都需要非常小心。\n\n\n### eval 的性能为何比静态编写和编译的代码要慢\n\n`eval()` 函数解析并执行动态的字符串代码，因此在运行时需要进行代码分析和编译。每次调用 `eval()` 都需要重复执行这些操作，这对性能的影响非常大。同时，由于 `eval()` 执行的代码是字符串形式并不是预编译的机器代码，在执行时可能需要使用更多的内存和 CPU 资源。\n\n相比之下，静态编写的代码在编译时已经被转化为机器代码，因此执行速度会更快。编译器可以进行多项优化，例如移除无用的代码，减少内存分配等。这些优化在运行时是不可能完成的，因此 `eval()` 函数的性能相对较低。\n\n### eval 性能一定就很差吗\n\n不是所有情况下 `eval()` 函数的性能都很差。在某些情况下，`eval()` 的性能可能与静态编写的代码相当。例如，如果动态代码比较简单，并且在程序运行期间只会执行一次，那么使用 `eval()` 不会造成显著的性能损失。但是如果动态代码比较复杂，并且需要经常执行，那么使用 `eval()` 的性能就会显著低于静态编写的代码。\n\n另外，`eval()` 的性能问题还取决于运行时环境的不同。在某些浏览器中，使用 `eval()` 时会导致缓慢的 JavaScript 执行，而在其他浏览器中则表现良好。因此，在编写代码时，应该始终将性能作为一个重要的因素进行考虑，并根据实际情况来选择使用 `eval()` 或其他适当的解决方案。\n\n\n### eval 有什么优势\n\n`eval()` 函数有以下几个优势：\n\n1. 动态执行代码：`eval()` 函数可以动态地将字符串解析为 JavaScript 代码并执行，从而可以在运行时动态生成代码并执行。这种动态性使得 `eval()` 函数在一些特定的编程场景中非常有用，例如动态计算表达式、动态生成函数等。\n\n2. 灵活性高：由于 `eval()` 函数可以动态解析字符串并执行其中的 JavaScript 代码，因此可以根据需要在运行时动态生成代码，而不必在编写代码时预先定义。这种灵活性使得 `eval()` 函数在一些需要动态生成代码的场景中非常有用。\n\n3. 命名空间：由于 `eval()` 函数会执行其中的 JavaScript 代码，因此代码可以利用当前作用域中的变量和函数，从而可以有效地利用命名空间并提高代码的复用性。\n\n**缺点**\n\n虽然 `eval()` 函数具有上述优势，但它也存在潜在的安全隐患，因此应当避免在应用程序中过度使用 `eval()` 函数，并在使用时注重安全性和可控性。\n",{"_58":474,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/345/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/345/timeline",{"_58":477,"_60":61,"_62":478,"_64":479,"_66":480,"_68":481,"_70":482,"_72":483,"_74":484,"_76":485,"_78":486,"_111":487,"_131":132,"_133":24,"_134":490,"_136":491,"_158":151,"_152":493,"_154":494,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":495,"_170":496,"_176":497,"_178":498,"_190":500,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/344","https://api.github.com/repos/pro-collection/interview-question/issues/344/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/344/comments","https://api.github.com/repos/pro-collection/interview-question/issues/344/events","https://github.com/pro-collection/interview-question/issues/344",1698635892,"I_kwDOJGDC6c5lPyB0",344,"[React] createPortal 了解多少？【热度: 597】",{"_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},[488,489],{"_70":388,"_72":389,"_58":390,"_117":391,"_119":392,"_121":24,"_122":393},{"_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":492,"_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},"2023-05-06T13:38:43Z","2023-05-06T13:38:44Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：react createPortal\n\n`createPortal` 是 React 中一个用于将子元素渲染到指定 DOM 元素下的 API。\n\n在 React 应用中，通常会通过组件树传递 props、状态等数据来渲染 UI，并由 React 自动管理 DOM 元素的创建、更新和销毁等操作。不过，有时我们需要将某些 UI 元素渲染到根节点之外的 DOM 元素下，例如弹出框、模态框等。这时，`createPortal` 就能派上用场了。\n\n`createPortal` 的用法如下：\n\n```jsx\nReactDOM.createPortal(child, container)\n```\n\n其中，`child` 是指要渲染的子元素，可以是任何有效的 React 元素，包括组件、HTML 元素等等；`container` 是指要将子元素渲染到的 DOM 元素，可以是一个有效的 DOM 元素对象，例如通过 `document.getElementById` 获取到的 DOM 元素。`createPortal` 会将 `child` 渲染到 `container` 中，但仍然能够受到 React 生命周期的管理，例如 `componentDidMount` 和 `componentWillUnmount` 等方法。\n\n下面是一个例子，它展示了如何使用 `createPortal` 来将一个弹出框渲染到根节点之外的 DOM 元素下：\n\n```jsx\nfunction Dialog(props) {\n return ReactDOM.createPortal(\n

{props.title}

{props.content}

,\n document.getElementById('dialog-container')\n );\n}\n\nfunction App() {\n return (\n

这是一个文本内容。

\n );\n}\n\nReactDOM.render(, document.getElementById('root'));\n```\n\n在这个例子中，`Dialog` 组件使用 `createPortal` 将其子元素渲染到 `#dialog-container` 这个元素下，而不是直接渲染到 `#root` 下。这个功能使得我们可以在 React 应用中方便地处理弹出框等类似需求。\n",{"_58":499,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/344/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/344/timeline",{"_58":502,"_60":61,"_62":503,"_64":504,"_66":505,"_68":506,"_70":507,"_72":508,"_74":509,"_76":510,"_78":511,"_111":512,"_131":132,"_133":24,"_134":519,"_136":520,"_158":151,"_152":522,"_154":523,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":524,"_170":525,"_176":526,"_178":527,"_190":529,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/343","https://api.github.com/repos/pro-collection/interview-question/issues/343/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/343/comments","https://api.github.com/repos/pro-collection/interview-question/issues/343/events","https://github.com/pro-collection/interview-question/issues/343",1698631800,"I_kwDOJGDC6c5lPxB4",343,"[React] createElement 和 cloneElement 有什么区别【热度: 218】",{"_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},[513,514],{"_70":388,"_72":389,"_58":390,"_117":391,"_119":392,"_121":24,"_122":393},{"_70":515,"_72":516,"_58":517,"_117":518,"_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":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":521,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-05-06T13:27:11Z","2023-05-06T13:27:12Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：createElement cloneElement\n\n### `createElement` 和 `cloneElement` 有什么区别?\n\nReact 中的 `createElement` 和 `cloneElement` 都可以用来创建元素，但它们用法有所不同。\n\n`createElement` 用于在 React 中动态地创建一个新的元素，并返回一个 React 元素对象。它的用法如下：\n\n```jsx\nReact.createElement(type, [props], [...children]);\n```\n\n其中，`type` 是指要创建的元素的类型，可以是一个 HTML 标签名（如 `div`、`span` 等），也可以是一个 React 组件类（如自定义的组件），`props` 是一个包含该元素需要设置的属性信息的对象，`children` 是一个包含其子元素的数组。`createElement` 会以这些参数为基础创建并返回一个 React 元素对象，React 将使用它来构建真正的 DOM 元素。\n\n`cloneElement` 用于复制一个已有的元素，并返回一个新的 React 元素，同时可以修改它的一些属性。它的用法如下：\n\n```jsx\nReact.cloneElement(element, [props], [...children]);\n```\n\n其中，`element` 是指要复制的 React 元素对象，`props` 是一个包含需要覆盖或添加的属性的对象，`children` 是一个包含其修改后的子元素的数组。`cloneElement` 会以这些参数为基础复制该元素，并返回一个新的 React 元素对象。\n\n在实际使用中，`createElement` 通常用于创建新的元素（如动态生成列表），而 `cloneElement` 更适用于用于修改已有的元素，例如在一个组件内部使用 `cloneElement` 来修改传递进来的子组件的属性。\n\n\n### `cloneElement` 有哪些应用场景\n\nReact 中的 `cloneElement` 主要适用于以下场景：\n\n1. 修改 props\n\n`cloneElement` 可以用于复制一个已有的元素并覆盖或添加一些新的属性。例如，可以复制一个带有默认属性的组件并传递新的属性，达到修改属性的目的。\n\n```jsx\n// 假设有这样一个组件\nfunction MyComponent(props) {\n // ...\n}\n\n// 在另一个组件中使用 cloneElement 修改 MyComponent 的 props\nfunction AnotherComponent() {\n return React.cloneElement(, { color: 'red' });\n}\n```\n\n2. 渲染列表\n\n在渲染列表时，可以使用 `Array.map()` 生成一系列的元素数组，也可以使用 `React.Children.map()` 遍历子元素并返回一系列的元素数组，同时使用 `cloneElement` 复制元素并传入新的 key 和 props。\n\n```jsx\n// 使用 Children.map() 遍历子元素并复制元素\nfunction MyList({ children, color }) {\n return (\n

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

Item 1

Item 2

Item 3

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

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

\n );\n}\n\nfunction MyPage() {\n return (\n \n \n \n \n );\n}\n```\n\n总之，`cloneElement` 可以方便地复制已有的 React 元素并修改其属性，适用于许多场景，例如修改 props、渲染列表和修改子元素等。\n\n",{"_58":528,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/343/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/343/timeline",{"_58":531,"_60":61,"_62":532,"_64":533,"_66":534,"_68":535,"_70":536,"_72":537,"_74":538,"_76":539,"_78":540,"_111":541,"_131":132,"_133":24,"_134":544,"_136":545,"_158":151,"_152":547,"_154":548,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":549,"_170":550,"_176":551,"_178":552,"_190":554,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/342","https://api.github.com/repos/pro-collection/interview-question/issues/342/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/342/comments","https://api.github.com/repos/pro-collection/interview-question/issues/342/events","https://github.com/pro-collection/interview-question/issues/342",1698604203,"I_kwDOJGDC6c5lPqSr",342,"Grid 布局了解多少？【热度: 653】",{"_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},[542,543],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":515,"_72":516,"_58":517,"_117":518,"_119":129,"_121":24,"_122":130},[],{"_58":217,"_68":218,"_62":219,"_70":220,"_72":221,"_74":196,"_76":222,"_122":223,"_146":546,"_148":225,"_150":151,"_131":132,"_152":226,"_154":227,"_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},"2023-05-06T12:10:32Z","2023-05-06T12:10:33Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：Grid 布局、Grid 属性\n\n### 什么是 grid 布局\n\nCSS Grid 布局是 CSS 中的一种新的布局系统，旨在通过网格（grid）和行（row）、列（column）的概念来创建灵活的、高效的、响应式网页布局。CSS Grid 布局可以将一个元素的内容划分为多个网格，根据需要，可以在这些网格中定位元素。与传统的基于盒子模型的布局方式不同，CSS Grid 布局以一种更直观、更高效的方式来处理布局问题。\n\n可以通过 CSS Grid 属性来定义网格和元素的位置，包括大小、间距、对齐方式等等。CSS Grid 布局还支持类似 Flexbox 的弹性布局，例如自适应尺寸、重叠和层叠等特性。最重要的是，因为 CSS Grid 布局与内容的结构分离，所以它能够为设计响应式布局提供出色的支持，而不需要在内容标记中添加过多的 CSS 或者 JavaScript。\n\n\n### grid 布局有哪些 api\n\nCSS Grid 布局提供了一系列的 API 来实现网格布局，以下是常用的几个属性：\n\n1. `display: grid;`：设置一个元素为网格容器\n2. `grid-template-columns`：定义网格中每一列的大小和数量\n3. `grid-template-rows`：定义网格中每一行的大小和数量\n4. `grid-template-areas`：为网格中的区域命名，以便将子元素分配到特定的区域\n5. `grid-column-gap` 和 `grid-row-gap`：定义网格中行和列之间的间距\n6. `grid-area`：定义元素应该在网格中的哪个区域，比如指定其所在的行、列和跨越的行列数量\n7. `grid-column-start` 和 `grid-column-end`：定义元素开始和结束的列位置，类似地，`grid-row-start` 和 `grid-row-end` 定义元素开始和结束的行位置\n8. `grid-column` 和 `grid-row`：简写属性，组合了 `grid-column-start` 、`grid-column-end` 、`grid-row-start` 和 `grid-row-end`，用于同时设置元素在网格中的列和行位置。\n\n这些属性可以帮助我们在网格容器中定义网格，并指定子元素在网格中的位置和大小。还有其他的属性可以进一步调整子元素的位置和大小，如 `justify-self` 和 `align-self` 用于调整子元素的水平和垂直对齐方式，`grid-auto-columns` 和 `grid-auto-rows` 用于指定未被显式指定的网格单元格的大小等等。\n\n\n### 如何使用 grid 布局\n\nCSS Grid 布局可以通过以下步骤来使用：\n\n1. 在父级元素上声明 `display: grid` 属性，将其转换为网格容器。\n2. 使用 `grid-template-columns` 和 `grid-template-rows` 属性来定义行和列的网格大小和数量，或者使用 `grid-template-areas` 属性来定义网格中的区域。\n3. 使用 `gap` 属性来定义行和列之间的间距。\n4. 将子元素放到网格容器中，并使用 `grid-column` 和 `grid-row` 属性来指定子元素在网格中的位置，也可以通过 `grid-area` 属性来指定子元素在网格中的区域。\n5. 可以使用其他属性来进一步改变子元素的位置和大小，比如 `justify-self` 和 `align-self` 等属性来设置元素的对齐方式和位置。\n\n下面是一个简单的使用 Grid 布局的示例，创建一个 3x3 网格：\n\n```html\n

\n```\n\n```css\n.grid-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 1fr);\n gap: 10px;\n}\n\n.grid-item {\n background-color: #ddd;\n padding: 20px;\n font-size: 30px;\n text-align: center;\n}\n\n.item1 {\n grid-column: 1 / span 2;\n grid-row: 1;\n}\n\n.item2 {\n grid-column: 3;\n grid-row: 1 / span 2;\n}\n\n.item3 {\n grid-column: 1;\n grid-row: 2 / span 2;\n}\n\n.item4 {\n grid-column: 2;\n grid-row: 2;\n}\n\n.item5 {\n grid-column: 3;\n grid-row: 3;\n}\n\n.item6 {\n grid-column: 2 / span 2;\n grid-row: 4;\n}\n\n.item7 {\n grid-column: 1;\n grid-row: 5;\n}\n\n.item8 {\n grid-column: 2;\n grid-row: 5;\n}\n\n.item9 {\n grid-column: 3;\n grid-row: 5;\n}\n```\n\n在这个示例中，我们创建了一个包含 9 个子元素的网格容器。通过设置网格容器的 `grid-template-columns` 和 `grid-template-rows` 属性，我们定义了一个 3x3 的网格，并通过 `gap` 属性设置了行和列的间距。然后，我们使用 `grid-column` 和 `grid-row` 属性来指定每个子元素在网格中的位置，或使用 `grid-area` 属性来指定子元素在网格中的区域。通过这些属性的值，我们可以指定每个子元素跨越多少行和多少列，或者指定一个子元素占据网格中的多个区域。\n",{"_58":553,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/342/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/342/timeline",{"_58":556,"_60":61,"_62":557,"_64":558,"_66":559,"_68":560,"_70":561,"_72":562,"_74":563,"_76":564,"_78":565,"_111":566,"_131":132,"_133":24,"_134":575,"_136":576,"_158":151,"_152":578,"_154":579,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":580,"_170":581,"_176":582,"_178":583,"_190":585,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/341","https://api.github.com/repos/pro-collection/interview-question/issues/341/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/341/comments","https://api.github.com/repos/pro-collection/interview-question/issues/341/events","https://github.com/pro-collection/interview-question/issues/341",1698600860,"I_kwDOJGDC6c5lPpec",341,"npm script 生命周期有哪些?【热度: 519】",{"_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},[567,574],{"_70":568,"_72":569,"_58":570,"_117":571,"_119":572,"_121":24,"_122":573},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":319,"_72":320,"_58":321,"_117":322,"_119":129,"_121":24,"_122":130},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":577,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-05-06T12:00:10Z","2023-05-06T12:10:45Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：npm 生命周期、script 生命周期\n\n\n### 安装和卸载\n\n| 脚本名称 | 阶段 | 描述 | 执行时机 |\n|-----------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|\n| preinstall | pre | 在 npm install 执行前运行，用于执行一些安装前的准备工作，例如检查依赖项或设置环境变量。 | 安装前 |\n| install, postinstall | install | 在模块安装后执行，通常用于构建项目或者为其生成某些必须的文件，例如安装完毕后自动编译 TypeScript、ES6 等。 | 安装后 |\n| preuninstall | pre | 在 npm uninstall 执行前运行，用于执行一些卸载前的准备工作。 | 卸载前 |\n| uninstall | post | 在 npm uninstall 执行后运行，用于清理卸载后的一些操作。 | 卸载后 |\n| postuninstall | post | 在 npm uninstall 执行后运行，用于执行一些卸载后的操作。 | 卸载后 |\n\n### 发布和更新版本\n\n| 脚本名称 | 阶段 | 描述 | 执行时机 |\n|-----------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|\n| prepublish | pre | 在 publish（npm发布）执行前，运行 npm pack。 | 发布前 |\n| prepare | pre | 在包被发布前或安装前执行，可以用来设置编译或验证文件的操作。 | 发布前、安装前 |\n| prepublishOnly | pre | 在 npm publish 执行前运行，用于确保在 publish 命令执行时不会意外发布不必要的文件。 | 发布前 |\n| prepack | pre | 在 npm pack（打包命令）执行前运行，用于执行一些打包前的准备工作。 | 打包前 |\n| postpack | post | 在 npm pack 执行后运行，用于清理和重置打包相关的操作。 | 打包后 |\n| publish | post | 在包被成功发布后执行。 | 发布后 |\n| postpublish | post | 在包被成功发布后执行，用于执行一些发布后的操作。 | 发布后 |\n| preversion | pre | 在项目版本号更新（npm version）之前执行。 | 更新版本号前 |\n| version | post | 在 npm version 执行后执行，用于执行一些版本更新后的操作。 | 更新版本号后 |\n| postversion | post | 在项目版本号更新（npm version）之后执行。 | 更新版本号后 |\n\n### 测试和运行\n\n| 脚本名称 | 阶段 | 描述 | 执行时机 |\n|-----------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|\n| pretest | pre | 在 npm test 执行前执行，用于执行某些测试前的准备工作。 | 测试前 |\n| test | test | 执行 npm run test 命令时执行。通常用于执行单元测试，并返回任何错误状态。 | 默认测试阶段 |\n| posttest | post | 在 npm test 执行后执行，用于执行某些测试后的操作。 | 测试后 |\n| prestart | pre | 在 npm start 执行前运行，用于执行某些启动进程前的准备工作。 | 启动前 |\n| start | start | 执行 npm start 命令时执行，通常用于启动 Web 服务器、Node 服务器、实时编译器等。 | 默认启动阶段 |\n| poststart | post | 在 npm start 执行后执行，用于执行某些启动进程后的操作。 | 启动后 |\n| prerestart | pre | 在 npm restart 执行前执行，用于执行一些重新启动进程前的准备工作。 | 重新启动前 |\n| restart | stop/start | 执行 npm restart 命令时执行，通常用于停止正在运行的 Node 服务器、Web 服务器等，然后以更新的源码重新启动服务。 | 默认重新启动阶段，但是该命令会触发停止和启动两个标准阶段 |\n| postrestart | post | 在 npm restart 执行后执行，用于执行一些重新启动进程后的操作。 | 重新启动后 |\n\n### 其他生命周期\n\n| 脚本名称 | 阶段 | 描述 | 执行时机 |\n|-----------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|\n| prestop | pre | 在 npm stop 执行前运行，用于执行某些停止进程前的准备工作。 | 停止前 |\n| stop | stop | 执行 npm stop 命令时执行，通常用于停止正在运行的 Web 服务器、Node 服务器、实时编译器等。 | 默认停止阶段 |\n| poststop | post | 在 npm stop 执行后执行，用于执行某些停止进程后的操作。 | 停止后 |\n",{"_58":584,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/341/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/341/timeline",{"_58":587,"_60":61,"_62":588,"_64":589,"_66":590,"_68":591,"_70":592,"_72":593,"_74":594,"_76":595,"_78":596,"_111":597,"_131":132,"_133":24,"_134":599,"_136":600,"_158":151,"_152":602,"_154":603,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":604,"_170":605,"_176":606,"_178":607,"_190":609,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/340","https://api.github.com/repos/pro-collection/interview-question/issues/340/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/340/comments","https://api.github.com/repos/pro-collection/interview-question/issues/340/events","https://github.com/pro-collection/interview-question/issues/340",1697858817,"I_kwDOJGDC6c5lM0UB",340,"值类型和引用类型的区别?【热度: 1,625】",{"_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},[598],{"_70":358,"_72":359,"_58":360,"_117":361,"_119":362,"_121":24,"_122":363},[],{"_58":217,"_68":218,"_62":219,"_70":220,"_72":221,"_74":196,"_76":222,"_122":223,"_146":601,"_148":225,"_150":151,"_131":132,"_152":226,"_154":227,"_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},"2023-05-05T16:07:18Z","2023-05-05T16:07:19Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：值类型和引用类型区别\n\n在JavaScript中，值类型和引用类型是两种不同的数据类型，它们之间的区别在于数据存储和传递的方式不同。\n\n值类型（也称为“原始类型”）包括 undefined、null、boolean、number和string。这些数据类型的值是可以直接存储在变量中的，这意味着如果我们将一个值类型的变量赋给另一个变量时，实际上是将值复制到新变量的内存空间中。在JavaScript中，值类型的变量是直接存储在栈中的。因此，值类型的变量永远不会出现“引用计数”错误，因为每个变量都可以被简单地复制和赋值。\n\n引用类型包括对象、数组和函数等复杂数据类型。和值类型不同，引用类型的值是存储在堆中的，栈中存储的是变量的引用地址。当我们把一个引用类型的变量赋给另一个变量时，实际上是将变量的引用地址复制到了新变量的内存空间中。这意味着这两个变量引用同一个对象。如果我们修改一个变量，那么另一个变量也会被修改；因为它们引用同一个对象。如果我们在堆中创建多个对象，则会有多个变量引用它们。这一点需要非常小心，因为它可以导致一些问题，如“引用计数”错误。\n\n总之，JavaScript中的值类型和引用类型之间的区别在于它们如何存储和传递。理解这两种不同的数据类型的工作原理，可以帮助我们更好地理解JavaScript的内部工作原理，从而更好地编写代码。\n\n**举例说明**\n\n下面是一个简单的例子，来说明值类型和引用类型在操作时的区别：\n\n```js\n// 值类型\nvar x = 1;\nvar y = x;\nx = 2;\nconsole.log(x); // 输出2 \nconsole.log(y); // 输出1\n\n// 引用类型\nvar a = {name: 'Tom', age: 20};\nvar b = a;\na.age = 30;\nconsole.log(a.age); // 输出30 \nconsole.log(b.age); // 输出30，原因是 a 和 b 指向同一个对象\n```\n\n在这个例子中，我们首先创建一个值类型变量 x，并将其值设置为 1。接着我们将 x 的值赋给 y 变量。然后我们将 x 的值修改为 2，这不会影响变量 y，因为 x 和 y 之间的赋值使用的是值复制。这是值类型的典型特性。\n\n接下来，我们创建了一个包含 name 和 age 属性的对象 a，并将其赋给变量 b。然后我们修改了 a 的 age 属性的值。此时，由于 a 和 b 引用同一个对象，因此 b.age 的值也随之改变，这才是引用类型的典型特性。\n\n在代码中我们看到，值类型的变量在赋值时是通过复制整个值本身的副本，在内存中分配了新的空间来存储。而引用类型的变量赋值时是将指针复制到新变量中，用来指向堆（heap）中存储对象的内存空间。\n\n",{"_58":608,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/340/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/340/timeline",{"_58":611,"_60":61,"_62":612,"_64":613,"_66":614,"_68":615,"_70":616,"_72":617,"_74":618,"_76":619,"_78":620,"_111":621,"_131":132,"_133":24,"_134":623,"_136":624,"_158":151,"_152":626,"_154":627,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":628,"_170":629,"_176":630,"_178":631,"_190":633,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/339","https://api.github.com/repos/pro-collection/interview-question/issues/339/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/339/comments","https://api.github.com/repos/pro-collection/interview-question/issues/339/events","https://github.com/pro-collection/interview-question/issues/339",1697853257,"I_kwDOJGDC6c5lMy9J",339,"JavaScript 中的变量在内存中的具体存储形式是什么【热度: 183】",{"_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},[622],{"_70":358,"_72":359,"_58":360,"_117":361,"_119":362,"_121":24,"_122":363},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":625,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-05-05T16:03:04Z","2023-05-05T16:03:05Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：JavaScript 变量存储形式\n\n在JavaScript中，变量的存储方式是基于所存储值的数据类型。JavaScript有7种内置数据类型：undefined、null、boolean、number、string、symbol和object。\n\n对于基础数据类型（除了object），变量值会直接存储在内存中。具体来说，这些数据类型的变量在内存中的存储形式如下：\n\n- undefined和null：这两个数据类型都只有一个值，每个值有一个特殊的内存地址。存储它们的变量会被赋予对应的内存地址。\n- boolean：这个数据类型的值只需要存储一个比特位（0或1），它们通常被存储在栈中，而不是堆中。\n- number：根据规范，数字类型在内存中占用8个字节的空间（64位），它们通常被存储在栈中，而不是堆中。\n- string：字符串实际上是一组字符数组，它们通常被存储在堆中，并通过引用地址存储在栈中。\n- symbol：每个symbol对应于唯一的标识符。它们通常被存储在堆中，并通过引用地址存储在栈中。\n\n而对于对象类型（包括对象、数组等），变量存储了一个指向存储对象的内存地址的指针。JavaScript采用引用计数内存管理，因此它会对每个对象进行引用计数，当一个对象不再被引用时，JavaScript会自动回收这个对象的内存空间。\n\n总的来说，在JavaScript中，变量的存储方式基于值类型的数据类型，对于对象型变量，存储指向对象的内存地址的指针以及对象的值，而对于基础类型的变量，直接存储变量的值。\n",{"_58":632,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/339/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/339/timeline",{"_58":635,"_60":61,"_62":636,"_64":637,"_66":638,"_68":639,"_70":640,"_72":641,"_74":642,"_76":643,"_78":644,"_111":645,"_131":132,"_133":24,"_134":647,"_136":648,"_158":151,"_152":650,"_154":650,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":651,"_170":652,"_176":653,"_178":654,"_190":656,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/338","https://api.github.com/repos/pro-collection/interview-question/issues/338/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/338/comments","https://api.github.com/repos/pro-collection/interview-question/issues/338/events","https://github.com/pro-collection/interview-question/issues/338",1697847965,"I_kwDOJGDC6c5lMxqd",338,"JavaScript 对象的底层数据结构是什么【热度: 517】",{"_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},[646],{"_70":358,"_72":359,"_58":360,"_117":361,"_119":362,"_121":24,"_122":363},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":649,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-05-05T15:59:29Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：JavaScript 对象数据结构\n\n在JavaScript中，对象是一种无序的键值对集合，可以保存和传递信息。对象是一种非常重要的数据类型，在JavaScript中，几乎所有东西都是对象。\n\n在底层，JavaScript对象的数据结构是哈希表（Hash Table），也可以称为散列表。哈希表是一种使用哈希函数将键值映射到数据中的位置的数据结构。它允许效率高且快速地插入、查找和删除数据，这些操作在算法的平均情况下都需要常数时间。哈希表的主要思想是将键值对转换为索引的方式在常数时间内获取值，因此哈希表非常适合用于大量的键值对数据存储。\n\n在JavaScript中，对象的键值对存储使用了类似哈希表的技术。JavaScript引擎使用一个称为哈希表种子的随机数字来计算键的哈希值，然后使用头插法（链表或树）将键和值存储在桶中，以实现高效的插入和查询操作。因此，JavaScript对象在实现上使用了哈希表来存储和访问键值对，从而提供了非常高效的数据存储和查找操作，使之成为了编写JavaScript代码的强大工具。\n",{"_58":655,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/338/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/338/timeline",{"_58":658,"_60":61,"_62":659,"_64":660,"_66":661,"_68":662,"_70":663,"_72":664,"_74":665,"_76":666,"_78":667,"_111":668,"_131":132,"_133":24,"_134":675,"_136":676,"_158":151,"_152":678,"_154":679,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":680,"_170":681,"_176":682,"_178":683,"_190":685,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/337","https://api.github.com/repos/pro-collection/interview-question/issues/337/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/337/comments","https://api.github.com/repos/pro-collection/interview-question/issues/337/events","https://github.com/pro-collection/interview-question/issues/337",1697835048,"I_kwDOJGDC6c5lMugo",337,"函数式编程了解多少？【热度: 1,789】",{"_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},[669,670],{"_70":312,"_72":313,"_58":314,"_117":315,"_119":316,"_121":24,"_122":317},{"_70":671,"_72":672,"_58":673,"_117":674,"_119":129,"_121":24,"_122":130},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":677,"_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},"2023-05-05T15:49:15Z","2023-05-05T15:49:16Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：函数式编程\n\n### 函数式编程的核心概念\n\n函数式编程是一种编程范式，它将程序看做是一系列函数的组合，函数是应用的基础单位。函数式编程主要有以下核心概念：\n\n1. 纯函数：函数的输出只取决于输入，没有任何副作用，不会修改外部变量或状态，所以对于同样的输入，永远返回同样的输出值。因此，纯函数可以有效地避免副作用和竞态条件等问题，使得代码更加可靠、易于调试和测试。\n\n2. 不可变性：在函数式编程中，数据通常是不可变的，即不允许在内部进行修改。这样可以避免副作用的发生，提高代码可靠性。\n\n3. 函数组合：函数可以组合成复杂的函数，从而减少重复代码的产生。\n\n4. 高阶函数：高阶函数是指可以接收其他函数作为参数，也可以返回函数的函数。例如，函数柯里化和函数的组合就是高阶函数的应用场景。\n\n5. 惰性计算：指在必要的时候才计算（执行）函数，而不是在每个可能的执行路径上都执行，从而提高性能。\n\n函数式编程的核心概念是将函数作为基本构建块来组合构建程序，通过纯函数、不可变性、函数组合、高阶函数和惰性计算等概念来实现代码的简洁性、可读性和可维护性，以及高效的性能运行。\n\n\n### 函数式编程的优势\n\n函数式编程有以下优势：\n\n1. 易于理解和维护：函数式编程强调数据不变性和纯函数概念，可以提高代码的可读性和可维护性，因为它避免了按照顺序对变量进行修改，并强调函数行为的确定性。\n\n2. 更少的 bug：由于函数式编程强调纯函数的概念，它可以消除由于副作用引起的bug。因为纯函数不会修改外部状态或数据结构，只是将输入转换为输出。这么做有助于保持代码更加可靠。\n\n3. 更好的可测试性：由于纯函数不具有副作用，它更容易测试，因为测试数据是预测性的。\n\n4. 更少的重构：函数式编程使用函数组合和柯里化等方法来简化代码。它将大型问题分解为微小问题，从而减少了代码重构的需要。\n\n5. 避免并发问题：由于函数式编程强调不变性和纯函数的概念，这使得并发问题变得更简单。纯函数允许并行运行，因此，当程序在不同的线程上执行时，它更容易保持同步。\n\n6. 代码复用：由于函数是基本构建块，并且可以组合成更高级别的功能块，使用函数式编程可以更大程度上推崇代码复用，减少代码冗余。\n\n函数式编程通过强调纯函数、不可变数据结构和函数组合等概念，可以提高代码可读性和可维护性，降低程序bug出现的风险，更容易测试，并且更容易将问题分解为更容易处理的小部分，更好地应对并发和可扩展性。\n\n",{"_58":684,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/337/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/337/timeline",{"_58":687,"_60":61,"_62":688,"_64":689,"_66":690,"_68":691,"_70":692,"_72":693,"_74":694,"_76":695,"_78":696,"_111":697,"_131":132,"_133":24,"_134":700,"_136":701,"_158":151,"_152":703,"_154":704,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":705,"_170":706,"_176":707,"_178":708,"_190":710,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/336","https://api.github.com/repos/pro-collection/interview-question/issues/336/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/336/comments","https://api.github.com/repos/pro-collection/interview-question/issues/336/events","https://github.com/pro-collection/interview-question/issues/336",1697813398,"I_kwDOJGDC6c5lMpOW",336,"[React] 事件绑定原理【热度: 1,097】",{"_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},[698,699],{"_70":388,"_72":389,"_58":390,"_117":391,"_119":392,"_121":24,"_122":393},{"_70":319,"_72":320,"_58":321,"_117":322,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":702,"_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},"2023-05-05T15:31:51Z","2023-05-05T15:47:20Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：react事件绑定、react合成事件、react事件监听\n\n### 绑定原理与过程\n\n在 React 中，事件绑定不同于传统的直接在 HTML 元素添加事件监听器的方式。React 的事件绑定是建立在自定义组件上的，因此需要对 React 组件的生命周期进行理解。\n\nReact 事件绑定的原理可以概括为三个步骤：\n\n1. 创建 React 元素\n\n在 React 中，事件的绑定是通过在 JSX 中创建元素时给元素添加一个事件属性实现的。例如：\n\n```\n\n```\n\n这里使用 onClick 属性将组件的 handleClick 方法传递给一个按钮组件，这个按钮组件在点击之后会调用 handleClick 方法。\n\n2. 挂载事件处理函数\n\n当 React 元素插入文档中之后，React 会在元素宿主节点上挂载事件处理函数。这个过程是在 React 元素生成之后、组件挂载之前完成的。React 在执行组件挂载生命周期函数之前，会将所有元素上声明的事件处理函数统一挂载到 DOM 上。\n\n3. 移除事件处理函数\n\n当 React 元素被移除文档时，React 会自动移除对应的事件处理函数。这个过程是在组件卸载之后、元素从 DOM 中移除之前执行的。\n\nReact 的事件绑定表现为组件的方法，所以在事件处理函数中，可以通过 this 关键字来访问组件的状态和属性。\n\n需要注意的是，React 组件中不能使用原生事件绑定方式，比如使用 `element.addEventListener('click', function(){})`，因为这样做会导致 React 无法正确地跟踪组件状态的变化，从而可能导致一些潜在问题。\n\n### React 组件中为何不能使用原生事件绑定方式\n\nReact 组件中不能使用原生事件绑定方式是因为，React 使用的是 Virtual DOM 技术，而不是直接操作 DOM。React 的 Virtual DOM 能够自动监测组件（即数据）状态的变化和更新，从而根据更新后的状态重新渲染视图，并在必要的时候更新真实 DOM。\n\n如果使用原生事件绑定方式，比如使用 `element.addEventListener('click', function(){})`，那么这些绑定的事件处理函数是直接绑定在真实的 DOM 元素上的，并不参与 Virtual DOM 中的数据流程，这样就会导致以下两个问题：\n\n1. 事件绑定后，如果组件状态变化并且重新渲染，那么重新渲染后的组件实例会重新创建一个新的 DOM 元素，而旧的 DOM 元素会被销毁，导致原来的事件处理函数被绑定在了一个不存在的元素上，导致事件失效。\n\n2. 使用原生事件绑定方式，无法在事件处理函数中直接访问组件实例的状态和属性。例如，在事件处理函数中想要访问一个组件的状态或者属性，就必须使用组件实例的引用（即 this 指针），但是这个 this 指针指向的并不是组件实例本身，而是真实的 DOM 元素，这样就无法直接访问组件状态和属性。\n\n因此，在 React 中，我们必须使用 `onClick` 等钩子函数来绑定事件处理函数，这样 React 就能够在其 Virtual DOM 中正确地跟踪组件状态变化，并保证事件处理函数的正确性。当然，在一些极端的情况下，React 也提供了访问真实 DOM 元素的机制，比如 `ref` 属性，这个可以在某些场景下使用。\n",{"_58":709,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/336/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/336/timeline",{"_58":712,"_60":61,"_62":713,"_64":714,"_66":715,"_68":716,"_70":717,"_72":718,"_74":719,"_76":720,"_78":721,"_111":722,"_131":132,"_133":24,"_134":731,"_136":732,"_158":151,"_152":734,"_154":734,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":735,"_170":736,"_176":737,"_178":738,"_190":740,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/335","https://api.github.com/repos/pro-collection/interview-question/issues/335/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/335/comments","https://api.github.com/repos/pro-collection/interview-question/issues/335/events","https://github.com/pro-collection/interview-question/issues/335",1697792612,"I_kwDOJGDC6c5lMkJk",335,"HTTP 304 状态码表达的请求过程是什么【热度: 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},[723,730],{"_70":724,"_72":725,"_58":726,"_117":727,"_119":728,"_121":24,"_122":729},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":285,"_72":286,"_58":287,"_117":288,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":733,"_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},"2023-05-05T15:16:05Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：304状态码、304请求过程、304过程、304请求\n\nHTTP 304 状态码是表示所请求的资源未修改，可以直接使用客户端缓存的版本。当客户端发送 GET 请求时，服务器会检查该资源的 ETag（实体标签）或 Last-Modified（最后修改时间）等信息，与客户端缓存中的相应信息进行比较。如果这些信息相同，则表示资源未发生更改，服务器返回 304 状态码，告诉客户端直接使用本地缓存的资源即可，无需重新下载，这样可以大大节省网络带宽和服务器资源消耗。\n\n下面是 HTTP 304 的具体过程：\n\n1. 客户端首先给服务器发送一个请求，该请求包含了一个 If-Modified-Since 或者 If-None-Match 字段，用来在服务器端判断访问的资源是否已经被修改过。\n\n2. 如果服务器端检查发现访问的资源没有发生改变，服务器就不会发送资源内容，而是返回 304 的状态码给客户端。\n\n3. 客户端接收到 304 的状态码后，会从本地缓存中加载相应的资源。\n\n4. 如果服务器端发现访问的资源已经发生过改变，服务器会发送新的资源内容给客户端，并且返回 200 的状态码。\n\n需要注意的是，客户端缓存中的资源不一定完全等同于服务器端的资源，可能由于缓存失效等原因导致客户端缓存中的资源与服务器端不完全一致，因此在实际应用中，需要谨慎使用 304 缓存机制，尤其对于那些变化频繁的资源，建议设置较短的缓存时间，以避免出现缓存失效等问题。\n",{"_58":739,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/335/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/335/timeline",{"_58":742,"_60":61,"_62":743,"_64":744,"_66":745,"_68":746,"_70":747,"_72":748,"_74":749,"_76":750,"_78":751,"_111":752,"_131":132,"_133":24,"_134":755,"_136":756,"_158":151,"_152":758,"_154":759,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":760,"_170":761,"_176":762,"_178":763,"_190":765,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/333","https://api.github.com/repos/pro-collection/interview-question/issues/333/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/333/comments","https://api.github.com/repos/pro-collection/interview-question/issues/333/events","https://github.com/pro-collection/interview-question/issues/333",1696365891,"I_kwDOJGDC6c5lHH1D",333,"TCP/IP 如何保证数据包传输的有序可靠【热度: 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},[753,754],{"_70":724,"_72":725,"_58":726,"_117":727,"_119":728,"_121":24,"_122":729},{"_70":250,"_72":251,"_58":252,"_117":253,"_119":129,"_121":24,"_122":130},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":757,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-05-04T16:58:10Z","2023-05-04T16:58:11Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：TCP/IP 可靠性、TCP/IP 序列号、TCP/IP 超时\n\nTCP/IP 采用以下几种机制来保证数据包传输的有序可靠：\n\n1. 确认和重传：每当 TCP/IP 协议收到一个数据包时，将向发送方回送一个确认信息。如果接收方未收到数据包，则发送方将重传该数据包。这种确认和重传的机制可以确保数据包能够可靠地传输，即使在网络故障或拥塞的情况下也能保证数据包的可靠性。\n\n2. 滑动窗口：滑动窗口是 TCP/IP 协议用来控制发送方和接收方之间数据流的一种机制。发送方会将窗口大小告知接收方，接收方在收到数据包时，会回送一个告知发送方可以继续发送数据的指令。滑动窗口机制可以通过有效地控制数据包的发送与接收，实现有序的数据传输。\n\n3. 序列号：每个数据包都会附带一个序列号，接收方通过序列号对数据包进行排序，从而实现传输的有序性。\n\n4. 超时重传时间：TCP/IP 建立了一个计时器，如果在指定时间内没有收到确认信息，则会重新发送未确认的数据包。这种机制可以帮助保证数据包传输的可靠性，确保数据包能够及时被送达。\n\n总之，TCP/IP 协议通过确认和重传、滑动窗口、序列号以及超时重传时间等机制，保证了数据包传输的有序可靠性。这些机制可以确保数据包能够被及时送达，有效地防止了数据包丢失、重复和乱序等问题，从而提供了高效可靠的传输服务。\n",{"_58":764,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/333/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/333/timeline",{"_58":767,"_60":61,"_62":768,"_64":769,"_66":770,"_68":771,"_70":772,"_72":773,"_74":774,"_76":775,"_78":776,"_111":777,"_131":132,"_133":24,"_134":781,"_136":782,"_158":151,"_152":784,"_154":785,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":786,"_170":787,"_176":788,"_178":789,"_190":791,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/332","https://api.github.com/repos/pro-collection/interview-question/issues/332/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/332/comments","https://api.github.com/repos/pro-collection/interview-question/issues/332/events","https://github.com/pro-collection/interview-question/issues/332",1696353753,"I_kwDOJGDC6c5lHE3Z",332,"DNS 协议了解多少【热度: 712】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[778,779,780],{"_70":724,"_72":725,"_58":726,"_117":727,"_119":728,"_121":24,"_122":729},{"_70":312,"_72":313,"_58":314,"_117":315,"_119":316,"_121":24,"_122":317},{"_70":250,"_72":251,"_58":252,"_117":253,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":783,"_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},"2023-05-04T16:50:50Z","2023-05-04T16:50:51Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：DNS协议、DNS加速\n\n### DNS 基本概念 \n\nDNS（Domain Name System，域名系统）是因特网上用于将主机名转换为 IP 地址的协议。它是一个分布式数据库系统，通过将主机名映射到 IP 地址来实现主机名解析，并使用户能够通过更容易识别的主机名来访问互联网上的资源。\n\n在使用 DNS 协议进行主机名解析时，系统首先查询本地 DNS 缓存。如果缓存中不存在结果，系统将向本地 DNS 服务器发出请求，并逐级向上查找，直到找到权威 DNS 服务器并获得解析结果。在域名解析的过程中，DNS 协议采用了分级命名空间的结构，不同的域名可以通过点分隔符分为多个级别，例如 `www.example.com` 可以分为三个级别：`www`、`example` 和 `com`。\n\n除了将域名映射到 IP 地址之外，DNS 协议还支持多种其他功能：\n\n1. 逆向映射：将 IP 地址解析为域名。\n2. 邮件服务器设置：支持邮件服务器的自动发现和设置。\n3. 负载均衡：DNS 还可以实现简单的负载均衡，通过将相同 IP 地址的主机名映射到不同的 IP 地址来分散负载。\n4. 安全：DNSSEC（DNS Security Extensions，DNS 安全扩展）可以提供对域名解析的认证和完整性。\n\n### 如何加快 DNS 的解析？\n\n有以下几种方法可以加快 DNS 的解析：\n\n1. 使用高速 DNS 服务器：默认情况下，网络服务提供商（ISP）为其用户提供 DNS 服务器。但是，这些服务器不一定是最快的，有时会出现瓶颈。如果您想加快 DNS 解析，请尝试使用其他高速 DNS 服务器，例如 Google 的公共 DNS 服务器或 OpenDNS。\n\n2. 缓存 DNS 记录：在本地计算机上缓存 DNS 记录可以大大加快应用程序的响应。当您访问特定的网站时，计算机会自动缓存该网站的 DNS 记录。如果您再次访问该网站，则计算机将使用缓存的 DNS 记录。\n\n3. 减少 DNS 查找：当您访问一个网站时，您的计算机将会查找该域名的 IP 地址。如果网站有很多域名，则查找过程可能会变得非常缓慢。因此，尽可能使用较少的域名可以减少 DNS 查找的数量，并提高响应速度。\n\n4. 使用 CDN：CDN（内容分发网络）是一种将内容存储在全球多个位置的系统。这些位置通常都有专用的 DNS 服务器，可以大大加快站点的加载速度。\n\n5. 使用 DNS 缓存工具：一些辅助工具可以帮助您优化与 DNS 相关的设置，例如免费的 DNS Jumper 软件和 Namebench 工具，它们可以测试您的 DNS 响应时间并为您推荐最佳配置。\n\n通过使用高速 DNS 服务器、缓存 DNS 记录、减少 DNS 查找、使用 CDN 和 DNS 缓存工具等方法，可以显著提高 DNS 解析速度，从而加快应用程序响应时间。\n",{"_58":790,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/332/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/332/timeline",{"_58":793,"_60":61,"_62":794,"_64":795,"_66":796,"_68":797,"_70":798,"_72":799,"_74":800,"_76":801,"_78":802,"_111":803,"_131":132,"_133":24,"_134":805,"_136":806,"_158":151,"_152":808,"_154":809,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":810,"_170":811,"_176":812,"_178":813,"_190":815,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/331","https://api.github.com/repos/pro-collection/interview-question/issues/331/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/331/comments","https://api.github.com/repos/pro-collection/interview-question/issues/331/events","https://github.com/pro-collection/interview-question/issues/331",1696342119,"I_kwDOJGDC6c5lHCBn",331,"扫码登录实现方式【热度: 734】",{"_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},[804],{"_70":312,"_72":313,"_58":314,"_117":315,"_119":316,"_121":24,"_122":317},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":807,"_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},"2023-05-04T16:44:45Z","2023-05-04T16:44:46Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：扫码登录\n\n扫码登录的实现原理核心是基于一个中转站，该中转站通常由应用提供商提供，用于维护手机和PC之间的会话状态。\n\n整个扫码登录的流程如下：\n\n1. 用户在PC端访问应用，并选择使用扫码登录方式。此时，应用生成一个随机的认证码，并将该认证码通过二维码的形式显示在PC端的页面上。\n\n2. 用户打开手机上的应用，并选择使用扫码登录方式。此时，应用会打开手机端的相机，用户可以对着PC端的二维码进行扫描。\n\n3. 一旦用户扫描了二维码，手机上的应用会向应用提供商的中转站发送一个请求，请求包含之前生成的随机认证码和手机端的一个会话ID。\n\n4. 中转站验证认证码和会话ID是否匹配，如果匹配成功，则该中转站将用户的身份信息发送给应用，并创建一个PC端和手机端之间的会话状态。\n\n5. 应用使用收到的身份信息对用户进行认证，并创建一个与该用户关联的会话状态。同时，应用返回一个通过认证的响应给中转站。\n\n6. 中转站将该响应返回给手机端的应用，并携带一个用于表示该会话的令牌，此时手机和PC之间的认证流程就完成了。\n\n7. 当用户在PC端进行其他操作时，应用将会话令牌附加在请求中，并通过中转站向手机端的应用发起请求。手机端的应用使用会话令牌（也就是之前生成的令牌）来识别并验证会话状态，从而允许用户在PC端进行需要登录的操作。\n\n",{"_58":814,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/331/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/331/timeline",{"_58":817,"_60":61,"_62":818,"_64":819,"_66":820,"_68":821,"_70":822,"_72":823,"_74":824,"_76":825,"_78":826,"_111":827,"_131":132,"_133":24,"_134":830,"_136":831,"_158":151,"_152":833,"_154":834,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":835,"_170":836,"_176":837,"_178":838,"_190":840,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/330","https://api.github.com/repos/pro-collection/interview-question/issues/330/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/330/comments","https://api.github.com/repos/pro-collection/interview-question/issues/330/events","https://github.com/pro-collection/interview-question/issues/330",1696336550,"I_kwDOJGDC6c5lHAqm",330,"cookie 构成部分有哪些【热度: 598】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[828,829],{"_70":278,"_72":279,"_58":280,"_117":281,"_119":282,"_121":24,"_122":283},{"_70":312,"_72":313,"_58":314,"_117":315,"_119":316,"_121":24,"_122":317},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":832,"_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},"2023-05-04T16:41:09Z","2023-05-04T16:41:24Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：cookie 构成部分、cookie 作用路径、cookie 作用域\n\n在 HTTP 协议中，cookie 是一种包含在请求和响应报文头中的数据，用于在客户端存储和读取信息。cookie 是由服务器发送的，客户端可以使用浏览器 API 将 cookie 存储在本地进行后续使用。\n\n一个 cookie 通常由以下几个部分组成：\n\n1. 名称：cookie 的名称（键），通常是一个字符串。\n2. 值：cookie 的值，通常也是一个字符串。\n3. 失效时间：cookie 失效的时间，过期时间通常存储在一个 `expires` 属性中，以便浏览器自动清除失效的 cookie。\n4. 作用路径：cookie 的作用路径，只有在指定路径下的请求才会携带该 cookie。\n5. 作用域：cookie 的作用域，指定了该 cookie 绑定的域名，可以使用 `domain` 属性来设置。\n\n例如，以下是一个设置了名称为 \"user\"、值为 \"john\"、失效时间为 2022 年 1 月 1 日，并且作用于全站的 cookie：\n\n```\nSet-Cookie: user=john; expires=Sat, 01 Jan 2022 00:00:00 GMT; path=/; domain=example.com\n```\n\n其中，`Set-Cookie` 是响应报文头，用于设置 cookie。在该响应报文中，将 cookie 数据设置为 \"user=john\"，失效时间为 \"2022年1月1日\"，作用路径为全站，作用域为 \"example.com\" 的域名。这个 cookie 就会被存储在客户端，以便在以后的请求中发送给服务器。\n",{"_58":839,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/330/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/330/timeline",{"_58":842,"_60":61,"_62":843,"_64":844,"_66":845,"_68":846,"_70":847,"_72":848,"_74":849,"_76":850,"_78":851,"_111":852,"_131":132,"_133":24,"_134":854,"_136":855,"_158":151,"_152":857,"_154":858,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":859,"_170":860,"_176":861,"_178":862,"_190":864,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/329","https://api.github.com/repos/pro-collection/interview-question/issues/329/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/329/comments","https://api.github.com/repos/pro-collection/interview-question/issues/329/events","https://github.com/pro-collection/interview-question/issues/329",1696329806,"I_kwDOJGDC6c5lG_BO",329,"常见图片懒加载方式有哪些？【热度: 1,001】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[853],{"_70":312,"_72":313,"_58":314,"_117":315,"_119":316,"_121":24,"_122":317},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":856,"_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},"2023-05-04T16:36:26Z","2023-05-04T16:36:27Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：图片懒加载、Intersection Observer API\n\n图片懒加载可以延迟图片的加载，只有当图片即将进入视口范围时才进行加载。这可以大大减轻页面的加载时间，并降低带宽消耗，提高了用户的体验。以下是一些常见的实现方法：\n\n1. Intersection Observer API\n\n`Intersection Observer API` 是一种用于异步检查文档中元素与视口叠加程度的API。可以将其用于检测图片是否已经进入视口，并根据需要进行相应的处理。\n\n```js\nlet observer = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n const lazyImage = entry.target;\n lazyImage.src = lazyImage.dataset.src;\n observer.unobserve(lazyImage);\n }\n });\n});\n\nconst lazyImages = [...document.querySelectorAll(\".lazy\")];\nlazyImages.forEach(function (image) {\n observer.observe(image);\n});\n```\n\n2. 自定义监听器\n\n或者，可以通过自定义监听器来实现懒加载。其中，应该避免在滚动事件处理程序中频繁进行图片加载，因为这可能会影响性能。相反，使用自定义监听器只会在滚动停止时进行图片加载。\n\n```js\nfunction lazyLoad() {\n const images = document.querySelectorAll(\".lazy\");\n const scrollTop = window.pageYOffset;\n images.forEach((img) => {\n if (img.offsetTop < window.innerHeight + scrollTop) {\n img.src = img.dataset.src;\n img.classList.remove(\"lazy\");\n }\n });\n}\n\nlet lazyLoadThrottleTimeout;\ndocument.addEventListener(\"scroll\", function () {\n if (lazyLoadThrottleTimeout) {\n clearTimeout(lazyLoadThrottleTimeout);\n }\n lazyLoadThrottleTimeout = setTimeout(lazyLoad, 20);\n});\n```\n\n在这个例子中，我们使用了 `setTimeout()` 函数来延迟图片的加载，以避免在滚动事件的频繁触发中对性能的影响。\n\n无论使用哪种方法，都需要为需要懒加载的图片设置占位符，并将未加载的图片路径保存在 `data` 属性中，以便在需要时进行加载。这些占位符可以是简单的 div 或样式类，用于预留图片的空间，避免页面布局的混乱。\n\n```html\n\n

\n\n\n $\"预览图\"$ \n```\n\n总体来说，图片懒加载是一种这很简单，但非常实用的优化技术，能够显著提高网页的性能和用户体验。\n",{"_58":863,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/329/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/329/timeline",{"_58":866,"_60":61,"_62":867,"_64":868,"_66":869,"_68":870,"_70":871,"_72":872,"_74":873,"_76":874,"_78":875,"_111":876,"_131":132,"_133":24,"_134":879,"_136":880,"_158":151,"_152":882,"_154":883,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":884,"_170":885,"_176":886,"_178":887,"_190":889,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/328","https://api.github.com/repos/pro-collection/interview-question/issues/328/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/328/comments","https://api.github.com/repos/pro-collection/interview-question/issues/328/events","https://github.com/pro-collection/interview-question/issues/328",1696325482,"I_kwDOJGDC6c5lG99q",328,"script 预加载方式有哪些，这些加载方式有何区别？【热度: 420】",{"_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},[877,878],{"_70":278,"_72":279,"_58":280,"_117":281,"_119":282,"_121":24,"_122":283},{"_70":312,"_72":313,"_58":314,"_117":315,"_119":316,"_121":24,"_122":317},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":881,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-05-04T16:33:13Z","2023-05-04T16:36:59Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：script 预加载\n\n在浏览器中，可以通过预加载 JavaScript 脚本来提高性能和用户体验。预加载是指在浏览器解析完当前页面之前，提前加载并解析相关资源（例如 JavaScript 文件、CSS 文件等）。这样可以在用户请求访问其他页面时，减少资源加载的时间和延迟，从而提高页面加载速度和用户体验。\n\n以下是两种预加载 JavaScript 脚本的方法：\n\n1. defer 属性\n\n`\n \n \n \n ...\n \n\n```\n\n2. prefetch 和 preload\n\n预加载的另一种方法是使用 `Link` 标签的 `prefetch` 或 `preload` 属性。这种方法可以在不影响当前页面加载的情况下，预先加载需要后续页面需要的 JavaScript 文件和其他资源。\n\n其中，`prefetch` 属性指示浏览器预先加载并缓存 JavaScript 文件，但不会立即执行文件。而 `preload` 属性则会在浏览器空闲时立即加载文件，并且可以指定文件的类型、优先级等属性。\n\n```html\n\n My Page\n \n \n\n```\n\n需要注意的是，使用 `prefetch` 和 `preload` 属性时，应该避免将其用于太多的资源文件，否则可能会引发网络瓶颈和性能问题。可以在需要优化的资源文件上使用这些属性，并通过测试和性能分析来调整其预加载的优先级和时机，以达到最优化的预加载效果。\n\n",{"_58":888,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/328/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/328/timeline",{"_58":891,"_60":61,"_62":892,"_64":893,"_66":894,"_68":895,"_70":896,"_72":897,"_74":898,"_76":899,"_78":900,"_111":901,"_131":132,"_133":24,"_134":903,"_136":904,"_158":151,"_152":906,"_154":907,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":908,"_170":909,"_176":910,"_178":911,"_190":913,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/327","https://api.github.com/repos/pro-collection/interview-question/issues/327/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/327/comments","https://api.github.com/repos/pro-collection/interview-question/issues/327/events","https://github.com/pro-collection/interview-question/issues/327",1696291845,"I_kwDOJGDC6c5lG1wF",327,"[React] fiber 是如何实现时间切片的？【热度: 587】",{"_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},[902],{"_70":388,"_72":389,"_58":390,"_117":391,"_119":392,"_121":24,"_122":393},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":905,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-05-04T16:15:25Z","2023-05-04T16:19:06Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：react16 架构、react Reconciler、fiber 时间切片、fiber 时间、react 协调器\r\n\r\n### 基本原理\r\n\r\n本质上来说就是将渲染任务拆分成多个小任务，以便提高应用程序的响应性和性能。React Fiber 实现时间切片主要依赖于两个核心功能：**任务分割和任务优先级**。\r\n\r\n任务分割是指将一个大的渲染任务切割成多个小任务，每个小任务只负责一小部分 DOM 更新。React Fiber 使用 Fiber 节点之间的父子关系，将一个组件树分割成多个”片段“，每个“片段”内部是一颗 Fiber 子树，多个“片段”之间可以交错执行，实现时间切片。\r\n\r\n任务优先级是指 React Fiber 提供了一套基于优先级的算法来决定哪些任务应该先执行，哪些任务可以放到后面执行。React Fiber 将任务分成多个优先级级别，较高优先级的任务在进行渲染时会优先进行，从而确保应用程序的响应性和性能。\r\n\r\nReact Fiber 实现时间切片的基本原理如下：\r\n\r\n1. React Fiber 会将渲染任务划分成多个小任务，每个小任务一般只负责一小部分 DOM 更新。\r\n2. React Fiber 将这些小任务保存到任务队列中，并按照优先级进行排序和调度。\r\n3. 当浏览器处于空闲状态时，React Fiber 会从任务队列中取出一个高优先级的任务并执行，直到任务完成或者时间片用完。\r\n4. 如果任务完成，则将结果提交到 DOM 树上并开始下一个任务。如果时间片用完，则将任务挂起，并将未完成的工作保存到 Fiber 树中，返回控制权给浏览器。\r\n5. 当浏览器再次处于空闲状态时，React Fiber 会再次从任务队列中取出未完成的任务并继续执行，直到所有任务完成。\r\n\r\n通过使用任务分割和任务优先级算法，React Fiber 实现了时间切片功能，保证了应用程序的响应性和性能，提高了用户的使用体验。\r\n\r\n### 是如何实现任务分割的？伪代码实现一下\r\n\r\nReact Fiber 实现任务分割的过程十分复杂，需要涉及到 Fiber 数据结构、调度器、DOM 操作等多个部分。以下是一个简单的示例代码，演示了 React Fiber 任务分割的基本工作原理。\r\n\r\n```jsx\r\nconst workInProgressFiber = {};\r\n\r\nconst performUnitOfWork = () => {\r\n // 执行当前 Fiber 对应的组件\r\n const isFunctionComponent = workInProgressFiber.type instanceof Function; \r\n if (isFunctionComponent) {\r\n updateFunctionComponent(workInProgressFiber);\r\n } else {\r\n updateHostComponent(workInProgressFiber);\r\n }\r\n\r\n // 返回下一个待处理的 Fiber 节点\r\n if (workInProgressFiber.child) {\r\n return workInProgressFiber.child;\r\n }\r\n\r\n let nextFiber = workInProgressFiber;\r\n while (nextFiber) {\r\n if (nextFiber.sibling) {\r\n return nextFiber.sibling;\r\n }\r\n nextFiber = nextFiber.parent;\r\n }\r\n\r\n return null;\r\n};\r\n\r\nconst render = (element, container) => {\r\n const rootFiber = {\r\n dom: container,\r\n props: {\r\n children: [element],\r\n },\r\n };\r\n\r\n workInProgressFiber = rootFiber;\r\n nextUnitOfWork = rootFiber;\r\n\r\n requestIdleCallback(workLoop);\r\n};\r\n\r\nconst workLoop = (deadline) => {\r\n while (nextUnitOfWork && deadline.timeRemaining() > 0) {\r\n nextUnitOfWork = performUnitOfWork(nextUnitOfWork);\r\n }\r\n\r\n if (nextUnitOfWork) {\r\n requestIdleCallback(workLoop);\r\n }\r\n};\r\n\r\nconst updateFunctionComponent = (fiber) => {\r\n const children = [fiber.type(fiber.props)];\r\n reconcileChildren(fiber, children);\r\n};\r\n\r\nconst updateHostComponent = (fiber) => {\r\n if (!fiber.dom) {\r\n fiber.dom = createDom(fiber);\r\n }\r\n\r\n reconcileChildren(fiber, fiber.props.children);\r\n};\r\n\r\nconst reconcileChildren = (fiber, children) => {\r\n let index = 0;\r\n let oldFiber = fiber.alternate ? fiber.alternate.child : null;\r\n let prevSibling = null;\r\n\r\n while (index < children.length || oldFiber) {\r\n const child = children[index];\r\n let newFiber = null;\r\n const sameType = oldFiber && child && child.type === oldFiber.type;\r\n\r\n if (sameType) {\r\n newFiber = {\r\n type: oldFiber.type,\r\n props: child.props,\r\n dom: oldFiber.dom,\r\n parent: fiber,\r\n alternate: oldFiber,\r\n effectTag: 'UPDATE',\r\n };\r\n }\r\n\r\n if (child && !sameType) {\r\n newFiber = {\r\n type: child.type,\r\n props: child.props,\r\n dom: null,\r\n parent: fiber,\r\n alternate: null,\r\n effectTag: 'PLACEMENT',\r\n };\r\n }\r\n\r\n if (oldFiber && !sameType) {\r\n oldFiber.effectTag = 'DELETION';\r\n deletions.push(oldFiber);\r\n }\r\n\r\n if (oldFiber) {\r\n oldFiber = oldFiber.sibling;\r\n }\r\n\r\n if (index === 0) {\r\n fiber.child = newFiber;\r\n } else if (child) {\r\n prevSibling.sibling = newFiber;\r\n }\r\n\r\n prevSibling = newFiber;\r\n\r\n index++;\r\n }\r\n};\r\n```\r\n\r\n在这个示例中，我们定义了一个名为 `performUnitOfWork` 的函数，用于执行一个 Fiber 节点上的任务。这个函数会根据 Fiber 节点的类型，执行不同的操作，并返回下一个待处理的 Fiber 节点。\r\n\r\n在 `updateFunctionComponent` 和 `updateHostComponent` 函数中，我们分别根据 Fiber 节点的类型执行函数组件和普通组件的更新操作。通过 `reconcileChildren` 函数，我们可以将一个组件的子节点拆分成多个 Fiber 节点，并在 `performUnitOfWork` 函数中进行遍历和处理。\r\n\r\nReact Fiber 实现任务分割的核心思想是将一个大的渲染任务切割成多个小任务，每个小任务只负责一小部分 DOM 更新。通过在 Fiber 树上进行遍历和操作，我们可以实现任务分割，提高应用程序的响应性和性能。\r\n\r\n\r\n### react fiber 是如何实现任务优先级的？用代码简单示范一下\r\n\r\nReact Fiber 的任务优先级是通过创建多个优先级队列，并使用一个时间片策略来调度任务的。以下是一个简单的示例代码，用于演示 React Fiber 的优先级队列和任务优先级机制。\r\n\r\n```jsx\r\nconst MAX_PRIORITY_LEVEL = 5;\r\n\r\nconst NoWork = 0;\r\nconst Sync = 1;\r\nconst DefaultPriority = 3;\r\nconst IdlePriority = 4;\r\nconst AnimationPriority = 5;\r\n\r\nconst initialScheduler = {\r\n didTimeout: false,\r\n enqueuedTasks: [],\r\n scheduledCallback: null,\r\n scheduledCallbackTimeout: null,\r\n taskQueue: [],\r\n currentTime: 0,\r\n};\r\n\r\nlet currentScheduler = initialScheduler;\r\n\r\nconst enableScheduler = () => {\r\n // ...初始化 scheduler 的代码...\r\n};\r\n\r\nconst requestCallback = (callback, options) => {\r\n const currentTime = getCurrentTime();\r\n const timeout = options != null && options.timeout != null ? options.timeout : -1;\r\n const expirationTime =\r\n timeout > 0 ? currentTime + timeout : currentTime + 5 * 1000;\r\n const newTask = {\r\n callback,\r\n priorityLevel: DefaultPriority,\r\n startTime: currentTime,\r\n expirationTime,\r\n };\r\n\r\n currentScheduler.taskQueue.push(newTask);\r\n ensureHostCallbackIsScheduled();\r\n};\r\n\r\nconst ensureHostCallbackIsScheduled = () => {\r\n if (currentScheduler.scheduledCallback === null) {\r\n currentScheduler.scheduledCallback = performSchedulerWork;\r\n currentScheduler.scheduledCallbackTimeout = setTimeout(() => {\r\n performSchedulerWork(currentTime);\r\n }, 0);\r\n }\r\n};\r\n\r\nconst performSchedulerWork = (currentTime) => {\r\n performConcurrentWorkOnRoots();\r\n\r\n if (currentScheduler.taskQueue.length > 0) {\r\n const firstTask = currentScheduler.taskQueue[0];\r\n if (firstTask.startTime <= currentTime) {\r\n currentScheduler.taskQueue.shift();\r\n firstTask.callback({ didTimeout: false });\r\n return;\r\n }\r\n }\r\n};\r\n\r\nconst performConcurrentWorkOnRoots = () => {\r\n const priorityLevel = AnimationPriority;\r\n const deadline = {\r\n timeRemaining() {\r\n return Infinity;\r\n },\r\n };\r\n while (currentScheduler.taskQueue.length > 0) {\r\n const task = findHighestPriorityTask();\r\n if (task.priorityLevel > priorityLevel || task.expirationTime <= currentScheduler.currentTime) {\r\n break;\r\n }\r\n const root = task.callback(deadline);\r\n\r\n if (root !== null) {\r\n // ...执行任务更新...\r\n }\r\n }\r\n};\r\n\r\nconst findHighestPriorityTask = () => {\r\n let highestPriorityTask = null;\r\n let highestPriorityLevel = NoWork;\r\n\r\n for (let i = 0; i < currentScheduler.taskQueue.length; i++) {\r\n const task = currentScheduler.taskQueue[i];\r\n const priorityLevel = task.priorityLevel;\r\n if (priorityLevel > highestPriorityLevel) {\r\n highestPriorityLevel = priorityLevel;\r\n highestPriorityTask = task;\r\n }\r\n }\r\n\r\n return highestPriorityTask;\r\n};\r\n```\r\n\r\n在这个示例中，我们定义了多个优先级常量和优先级队列，以及与之相关的一些变量和函数。我们通过 `requestCallback` 函数，将任务以优先级的方式插入到任务队列中。在 `performConcurrentWorkOnRoots` 函数中，我们按照优先级顺序遍历任务队列，并将任务的回调函数传递给 `callback` 函数执行更新操作。\r\n\r\n通过在任务队列和调度器中使用优先级的方式来调度和执行任务，我们可以在保证页面响应性的同时，最大化利用浏览器的空闲时间，提高应用程序整体的性能和用户体验。\r\n\r\n",{"_58":912,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/327/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/327/timeline",{"_58":915,"_60":61,"_62":916,"_64":917,"_66":918,"_68":919,"_70":920,"_72":921,"_74":922,"_76":923,"_78":924,"_111":925,"_131":132,"_133":24,"_134":927,"_136":928,"_158":151,"_152":930,"_154":931,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":932,"_170":933,"_176":934,"_178":935,"_190":937,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/326","https://api.github.com/repos/pro-collection/interview-question/issues/326/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/326/comments","https://api.github.com/repos/pro-collection/interview-question/issues/326/events","https://github.com/pro-collection/interview-question/issues/326",1696273536,"I_kwDOJGDC6c5lGxSA",326,"[React] diff 算法【热度: 538】",{"_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},[926],{"_70":388,"_72":389,"_58":390,"_117":391,"_119":392,"_121":24,"_122":393},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":929,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-05-04T15:45:10Z","2023-05-04T15:45:11Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：react16 架构、react Reconciler、react commit 阶段、react 协调器\n\n在 react 中：一个`DOM`节点在某一时刻最多会有4个节点和他相关。\n\n一个DOM节点在某一时刻最多会有4个节点和他相关。\n\n1. `JSX对象`。即ClassComponent的render方法的返回结果，或FunctionComponent的调用结果。JSX对象中包含描述DOM节点的信息。\n\n2. `workInProgress Fiber`。如果该DOM节点将在本次更新中渲染到页面中，workInProgress Fiber代表该DOM节点对应的Fiber节点。\n\n3. `current Fiber`。如果该DOM节点已在页面中，current Fiber代表该DOM节点对应的Fiber节点。\n\n4. `DOM节点本身`。\n\n**Diff算法的本质是对比1和2，生成3。**\n\n### 概览\n\n#### Diff的瓶颈以及React如何应对\n\n由于Diff操作本身也会带来性能损耗，即使在最前沿的算法中，将前后两棵树完全比对的算法的复杂程度为 O(n 3 )，其中n是树中元素的数量。\n\n如果在React中使用了该算法，那么展示1000个元素所需要执行的计算量将在十亿的量级范围\n\n为了降低算法复杂度，**React的diff会预设三个限制**：\n\n1. 只对同级元素进行Diff。如果一个DOM节点在前后两次更新中跨越了层级，那么React不会尝试复用他。\n\n2. 两个不同类型的元素会产生出不同的树。如果元素由div变为p，React会销毁div及其子孙节点，并新建p及其子孙节点。\n\n3. 开发者可以通过 key prop来暗示哪些子元素在不同的渲染下能保持稳定。\n\n#### Diff是如何实现的\n\n我们从Diff的入口函数reconcileChildFibers出发，该函数会根据newChild（即JSX对象）类型调用不同的处理函数。\n\n从同级的节点数量将Diff分为两类：\n\n1. 当newChild类型为object、number、string，代表同级只有一个节点\n\n2. 当newChild类型为Array，同级有多个节点\n\n### 单节点 diff\n\n路程图： \n![image](https://user-images.githubusercontent.com/22188674/235393691-d5355bfb-da2a-4ffd-9961-04a3927ebd11.png)\n\nReact通过先判断key是否相同，如果key相同则判断type是否相同，只有都相同时一个DOM节点才能复用。\n\n### 多节点 diff\n\n主要分为以下几种情况\n\n- 节点更新\n - 节点属性变化\n - 节点类型更新\n- 节点新增或减少\n- 节点位置变化\n\n#### diff 思路\n\nReact 团队发现，在日常开发中，相较于新增和删除，更新组件发生的频率更高。所以Diff会优先判断当前节点是否属于更新。\n\n本质上是进行了两轮遍历：\n- 第一轮遍历：处理更新的节点。\n- 第二轮遍历：处理剩下的不属于更新的节点。\n\n**为何不用双向指针的方式**？\n\n虽然本次更新的JSX对象 newChildren为数组形式，但是和newChildren中每个组件进行比较的是current fiber，同级的Fiber节点是由sibling指针链接形成的单链表，即不支持双指针遍历。\n\n即 newChildren[0]与fiber比较，newChildren[1]与fiber.sibling比较。\n\n所以无法使用双指针优化。\n\n\n#### 第一次遍历\n\n第一轮遍历步骤如下：\n\n1. `let i = 0`，遍历`newChildren`，将`newChildren[i]`与`oldFiber`比较，判断DOM节点是否可复用。\n\n2. 如果可复用，`i++`，继续比较`newChildren[i]`与`oldFiber.sibling`，可以复用则继续遍历。\n\n3. 如果不可复用，分两种情况：\n\n- key不同导致不可复用，立即跳出整个遍历，第一轮遍历结束。\n\n- key相同type不同导致不可复用，会将`oldFiber`标记为`DELETION`，并继续遍历\n\n4. 如果`newChildren`遍历完（即`i === newChildren.length - 1`）或者`oldFiber`遍历完（即`oldFiber.sibling === null`），跳出遍历，第一轮遍历结束。\n\n源码如下： https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactChildFiber.new.js#L818\n\n\n#### 第二轮遍历\n\n\n**`newChildren`与`oldFiber`同时遍历完**\n\n那就是最理想的情况：只需在第一轮遍历进行组件更新 \n\n> 源码如下： https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactChildFiber.new.js#L825\n\n**`newChildren`没遍历完，`oldFiber`遍历完**\n\n已有的DOM节点都复用了，这时还有新加入的节点，意味着本次更新有新节点插入，我们只需要遍历剩下的`newChildren`为生成的`workInProgress fiber`依次标记`Placement`。\n\n> 源码如下： https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactChildFiber.new.js#L869\n\n**`newChildren`遍历完，`oldFiber`没遍历完**\n\n意味着本次更新比之前的节点数量少，有节点被删除了。所以需要遍历剩下的`oldFiber`，依次标记`Deletion`。\n\n> https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactChildFiber.new.js#L863\n\n**`newChildren`与`oldFiber`都没遍历完**\n\n这意味着有节点在这次更新中改变了位置。\n\n这是Diff算法最精髓也是最难懂的部分。我们接下来会重点讲解。\n\n> 源码： https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactChildFiber.new.js#L893\n\n\n#### 处理移动的节点\n\n由于有节点改变了位置，所以不能再用位置索引i对比前后的节点，那么如何才能将同一个节点在两次更新中对应上呢？\n\n我们需要使用key。\n\n为了快速的找到key对应的`oldFiber`，我们将所有还未处理的`oldFiber`存入以key为key，`oldFiber`为`value`的`Map`中。\n\n`const existingChildren = mapRemainingChildren(returnFiber, oldFiber);` \n\n> 源码： https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactChildFiber.new.js#L890\n\n接下来遍历剩余的`newChildren`，通过`newChildren[i].key`就能在`existingChildren`中找到`key`相同的`oldFiber`。\n\n#### 标记节点是否移动\n\n既然我们的目标是寻找移动的节点，那么我们需要明确：节点是否移动是以什么为参照物？\n\n我们的参照物是：最后一个可复用的节点在`oldFiber`中的位置索引（用变量`lastPlacedIndex`表示）。\n\n由于本次更新中节点是按`newChildren`的顺序排列。在遍历`newChildren`过程中，每个遍历到的可复用节点一定是当前遍历到的所有可复用节点中最靠右的那个，即一定在`lastPlacedIndex`对应的可复用的节点在本次更新中位置的后面。\n\n那么我们只需要比较遍历到的可复用节点在上次更新时是否也在`lastPlacedIndex`对应的`oldFiber`后面，就能知道两次更新中这两个节点的相对位置改变没有。\n\n我们用变量`oldIndex`表示遍历到的可复用节点在`oldFiber`中的位置索引。如果`oldIndex < lastPlacedIndex`，代表本次更新该节点需要向右移动。\n\n`lastPlacedIndex`初始为0，每遍历一个可复用的节点，如果`oldIndex >= lastPlacedIndex`，则`lastPlacedIndex = oldIndex`。\n\n\n### 参考文档\n\n- https://react.iamkasong.com/diff/prepare.html\n",{"_58":936,"_181":196,"_182":196,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/326/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/326/timeline",{"_58":939,"_60":61,"_62":940,"_64":941,"_66":942,"_68":943,"_70":944,"_72":945,"_74":946,"_76":947,"_78":948,"_111":949,"_131":132,"_133":24,"_134":951,"_136":952,"_158":151,"_152":954,"_154":954,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":955,"_170":956,"_176":957,"_178":958,"_190":960,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/325","https://api.github.com/repos/pro-collection/interview-question/issues/325/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/325/comments","https://api.github.com/repos/pro-collection/interview-question/issues/325/events","https://github.com/pro-collection/interview-question/issues/325",1689980021,"I_kwDOJGDC6c5kuwx1",325,"[React] commit 阶段的执行过程【热度: 534】",{"_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},[950],{"_70":388,"_72":389,"_58":390,"_117":391,"_119":392,"_121":24,"_122":393},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":953,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-04-30T16:18:01Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：react16 架构、react Reconciler、react commit 阶段、react 协调器\n\ncommitRoot方法是commit阶段工作的起点。fiberRootNode会作为传参。 `commitRoot(root);`\n\n如何走到 commit 阶段的，可以参考这个文档：https://github.com/pro-collection/interview-question/issues/324\n\n在rootFiber.firstEffect上保存了一条需要执行副作用的Fiber节点的单向链表effectList，这些Fiber节点的updateQueue中保存了变化的props。\n\n这些副作用对应的DOM操作在commit阶段执行。\n\n除此之外，一些生命周期钩子（比如componentDidXXX）、hook（比如useEffect）需要在commit阶段执行。\n\ncommit阶段的主要工作（即Renderer的工作流程）分为三部分：\n\nbefore mutation阶段（执行DOM操作前）\n\nmutation阶段（执行DOM操作）\n\nlayout阶段（执行DOM操作后）\n\n你可以从这里看到commit阶段的完整代码： https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js#L2001\n\n在before mutation阶段之前和layout阶段之后还有一些额外工作，涉及到比如useEffect的触发、优先级相关的重置、ref的绑定/解绑。\n\n### before mutation之前\n\n`commitRootImpl`方法中直到第一句`if (firstEffect !== null)`之前属于`before mutation之前`。\n\n我们大体看下他做的工作，现在你还不需要理解他们：\n\n```ts\ndo {\n // 触发useEffect回调与其他同步任务。由于这些任务可能触发新的渲染，所以这里要一直遍历执行直到没有任务\n flushPassiveEffects();\n } while (rootWithPendingPassiveEffects !== null);\n\n // root指 fiberRootNode\n // root.finishedWork指当前应用的rootFiber\n const finishedWork = root.finishedWork;\n\n // 凡是变量名带lane的都是优先级相关\n const lanes = root.finishedLanes;\n if (finishedWork === null) {\n return null;\n }\n root.finishedWork = null;\n root.finishedLanes = NoLanes;\n\n // 重置Scheduler绑定的回调函数\n root.callbackNode = null;\n root.callbackId = NoLanes;\n\n let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);\n // 重置优先级相关变量\n markRootFinished(root, remainingLanes);\n\n // 清除已完成的discrete updates，例如：用户鼠标点击触发的更新。\n if (rootsWithPendingDiscreteUpdates !== null) {\n if (\n !hasDiscreteLanes(remainingLanes) &&\n rootsWithPendingDiscreteUpdates.has(root)\n ) {\n rootsWithPendingDiscreteUpdates.delete(root);\n }\n }\n\n // 重置全局变量\n if (root === workInProgressRoot) {\n workInProgressRoot = null;\n workInProgress = null;\n workInProgressRootRenderLanes = NoLanes;\n } else {\n }\n\n // 将effectList赋值给firstEffect\n // 由于每个fiber的effectList只包含他的子孙节点\n // 所以根节点如果有effectTag则不会被包含进来\n // 所以这里将有effectTag的根节点插入到effectList尾部\n // 这样才能保证有effect的fiber都在effectList中\n let firstEffect;\n if (finishedWork.effectTag > PerformedWork) {\n if (finishedWork.lastEffect !== null) {\n finishedWork.lastEffect.nextEffect = finishedWork;\n firstEffect = finishedWork.firstEffect;\n } else {\n firstEffect = finishedWork;\n }\n } else {\n // 根节点没有effectTag\n firstEffect = finishedWork.firstEffect;\n }\n```\n\n可以看到，before mutation之前主要做一些变量赋值，状态重置的工作。\n\n这一长串代码我们只需要关注最后赋值的firstEffect，在commit的三个子阶段都会用到他。\n\n### layout之后\n接下来让我们简单看下layout阶段执行完后的代码，现在你还不需要理解他们：\n\n```ts\nconst rootDidHavePassiveEffects = rootDoesHavePassiveEffects;\n\n// useEffect相关\nif (rootDoesHavePassiveEffects) {\n rootDoesHavePassiveEffects = false;\n rootWithPendingPassiveEffects = root;\n pendingPassiveEffectsLanes = lanes;\n pendingPassiveEffectsRenderPriority = renderPriorityLevel;\n} else {}\n\n// 性能优化相关\nif (remainingLanes !== NoLanes) {\n if (enableSchedulerTracing) {\n // ...\n }\n} else {\n // ...\n}\n\n// 性能优化相关\nif (enableSchedulerTracing) {\n if (!rootDidHavePassiveEffects) {\n // ...\n }\n}\n\n// ...检测无限循环的同步任务\nif (remainingLanes === SyncLane) {\n // ...\n} \n\n// 在离开commitRoot函数前调用，触发一次新的调度，确保任何附加的任务被调度\nensureRootIsScheduled(root, now());\n\n// ...处理未捕获错误及老版本遗留的边界问题\n\n\n// 执行同步任务，这样同步任务不需要等到下次事件循环再执行\n// 比如在 componentDidMount 中执行 setState 创建的更新会在这里被同步执行\n// 或useLayoutEffect\nflushSyncCallbackQueue();\n\nreturn null;\n```\n\n主要包括三点内容：\n\n1. useEffect相关的处理。\n\n2. 性能追踪相关。\n源码里有很多和interaction相关的变量。他们都和追踪React渲染时间、性能相关，在Profiler API 和DevTools 中使用。\n \n3. 在commit阶段会触发一些生命周期钩子（如 componentDidXXX）和hook（如useLayoutEffect、useEffect）。\n\n\n### before mutation 阶段\n\nRenderer工作的阶段被称为commit阶段。commit阶段可以分为三个子阶段：\n\nbefore mutation阶段（执行DOM操作前）\n\nmutation阶段（执行DOM操作）\n\nlayout阶段（执行DOM操作后）\n\n本节我们看看before mutation阶段（执行DOM操作前）都做了什么。\n\n#### 概览\nbefore mutation阶段的代码很短，整个过程就是遍历effectList并调用commitBeforeMutationEffects函数处理。\n\n```ts\n// 保存之前的优先级，以同步优先级执行，执行完毕后恢复之前优先级\nconst previousLanePriority = getCurrentUpdateLanePriority();\nsetCurrentUpdateLanePriority(SyncLanePriority);\n\n// 将当前上下文标记为CommitContext，作为commit阶段的标志\nconst prevExecutionContext = executionContext;\nexecutionContext |= CommitContext;\n\n// 处理focus状态\nfocusedInstanceHandle = prepareForCommit(root.containerInfo);\nshouldFireAfterActiveInstanceBlur = false;\n\n// beforeMutation阶段的主函数\ncommitBeforeMutationEffects(finishedWork);\n\nfocusedInstanceHandle = null;\n```\n\n我们重点关注beforeMutation阶段的主函数commitBeforeMutationEffects做了什么。\n\n#### commitBeforeMutationEffects\n\n```ts\nfunction commitBeforeMutationEffects() {\n while (nextEffect !== null) {\n const current = nextEffect.alternate;\n\n if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {\n // ...focus blur相关\n }\n\n const effectTag = nextEffect.effectTag;\n\n // 调用getSnapshotBeforeUpdate\n if ((effectTag & Snapshot) !== NoEffect) {\n commitBeforeMutationEffectOnFiber(current, nextEffect);\n }\n\n // 调度useEffect\n if ((effectTag & Passive) !== NoEffect) {\n if (!rootDoesHavePassiveEffects) {\n rootDoesHavePassiveEffects = true;\n scheduleCallback(NormalSchedulerPriority, () => {\n flushPassiveEffects();\n return null;\n });\n }\n }\n nextEffect = nextEffect.nextEffect;\n }\n}\n```\n\n整体可以分为三部分：\n\n- 处理DOM节点渲染/删除后的 autoFocus、blur 逻辑。\n\n- 调用getSnapshotBeforeUpdate生命周期钩子。\n\n- 调度useEffect。\n\n#### 调用 getSnapshotBeforeUpdate\n\ncommitBeforeMutationEffectOnFiber是commitBeforeMutationLifeCycles的别名。\n\n在该方法内会调用getSnapshotBeforeUpdate。\n\n从Reactv16开始，componentWillXXX钩子前增加了UNSAFE_前缀。\n\n究其原因，是因为Stack Reconciler重构为Fiber Reconciler后，render阶段的任务可能中断/重新开始，对应的组件在render阶段的生命周期钩子（即componentWillXXX）可能触发多次。\n\n这种行为和Reactv15不一致，所以标记为UNSAFE_。\n\n更详细的解释参照这里(opens new window)\n\n为此，React提供了替代的生命周期钩子getSnapshotBeforeUpdate。\n\n我们可以看见，getSnapshotBeforeUpdate是在commit阶段内的before mutation阶段调用的，由于commit阶段是同步的，所以不会遇到多次调用的问题。\n\n#### 调度useEffect\n在这几行代码内，scheduleCallback方法由Scheduler模块提供，用于以某个优先级异步调度一个回调函数。\n\n```ts\n// 调度useEffect\nif ((effectTag & Passive) !== NoEffect) {\n if (!rootDoesHavePassiveEffects) {\n rootDoesHavePassiveEffects = true;\n scheduleCallback(NormalSchedulerPriority, () => {\n // 触发useEffect\n flushPassiveEffects();\n return null;\n });\n }\n}\n```\n\n在此处，被异步调度的回调函数就是触发useEffect的方法flushPassiveEffects。\n\n我们接下来讨论useEffect如何被异步调度，以及为什么要异步（而不是同步）调度。\n\n#### 如何异步调度\n\n在flushPassiveEffects方法内部会从全局变量rootWithPendingPassiveEffects获取effectList。\n\n关于flushPassiveEffects的具体讲解参照useEffect与useLayoutEffect一节\n\n在completeWork一节我们讲到，effectList中保存了需要执行副作用的Fiber节点。其中副作用包括\n\n- 插入DOM节点（Placement）\n- 更新DOM节点（Update）\n- 删除DOM节点（Deletion）\n\n除此外，当一个FunctionComponent含有useEffect或useLayoutEffect，他对应的Fiber节点也会被赋值effectTag。\n\n在flushPassiveEffects方法内部会遍历rootWithPendingPassiveEffects（即effectList）执行effect回调函数。\n\n如果在此时直接执行，rootWithPendingPassiveEffects === null。\n\n那么rootWithPendingPassiveEffects会在何时赋值呢？\n\n在上一节layout之后的代码片段中会根据rootDoesHavePassiveEffects === true?决定是否赋值rootWithPendingPassiveEffects。\n\n```ts\nconst rootDidHavePassiveEffects = rootDoesHavePassiveEffects;\nif (rootDoesHavePassiveEffects) {\n rootDoesHavePassiveEffects = false;\n rootWithPendingPassiveEffects = root;\n pendingPassiveEffectsLanes = lanes;\n pendingPassiveEffectsRenderPriority = renderPriorityLevel;\n}\n```\n\n**所以整个useEffect异步调用分为三步**：\n\n- `before mutation`阶段在`scheduleCallback`中调度`flushPassiveEffects`\n- `layout阶段`之后将`effectList`赋值给`rootWithPendingPassiveEffects`\n- `scheduleCallback`触发`flushPassiveEffects`，`flushPassiveEffects`内部遍历`rootWithPendingPassiveEffects`\n\n#### 为什么需要异步调用\n\n与 componentDidMount、componentDidUpdate 不同的是，在浏览器完成布局与绘制之后，传给 useEffect 的函数会延迟调用。这使得它适用于许多常见的副作用场景，比如设置订阅和事件处理等情况，因此不应在函数中执行阻塞浏览器更新屏幕的操作。\n\n可见，useEffect异步执行的原因主要是防止同步执行时阻塞浏览器渲染。\n\n### mutation阶段\n\n终于到了执行DOM操作的mutation阶段。\n\n#### 概览\n类似before mutation阶段，mutation阶段也是遍历effectList，执行函数。这里执行的是commitMutationEffects。\n\n```ts\nnextEffect = firstEffect;\ndo {\n try {\n commitMutationEffects(root, renderPriorityLevel);\n } catch (error) {\n invariant(nextEffect !== null, 'Should be working on an effect.');\n captureCommitPhaseError(nextEffect, error);\n nextEffect = nextEffect.nextEffect;\n }\n} while (nextEffect !== null);\n```\n\n#### commitMutationEffects\n代码如下：\n```ts\nfunction commitMutationEffects(root: FiberRoot, renderPriorityLevel) {\n // 遍历effectList\n while (nextEffect !== null) {\n\n const effectTag = nextEffect.effectTag;\n\n // 根据 ContentReset effectTag重置文字节点\n if (effectTag & ContentReset) {\n commitResetTextContent(nextEffect);\n }\n\n // 更新ref\n if (effectTag & Ref) {\n const current = nextEffect.alternate;\n if (current !== null) {\n commitDetachRef(current);\n }\n }\n\n // 根据 effectTag 分别处理\n const primaryEffectTag =\n effectTag & (Placement | Update | Deletion | Hydrating);\n switch (primaryEffectTag) {\n // 插入DOM\n case Placement: {\n commitPlacement(nextEffect);\n nextEffect.effectTag &= ~Placement;\n break;\n }\n // 插入DOM 并更新DOM\n case PlacementAndUpdate: {\n // 插入\n commitPlacement(nextEffect);\n\n nextEffect.effectTag &= ~Placement;\n\n // 更新\n const current = nextEffect.alternate;\n commitWork(current, nextEffect);\n break;\n }\n // SSR\n case Hydrating: {\n nextEffect.effectTag &= ~Hydrating;\n break;\n }\n // SSR\n case HydratingAndUpdate: {\n nextEffect.effectTag &= ~Hydrating;\n\n const current = nextEffect.alternate;\n commitWork(current, nextEffect);\n break;\n }\n // 更新DOM\n case Update: {\n const current = nextEffect.alternate;\n commitWork(current, nextEffect);\n break;\n }\n // 删除DOM\n case Deletion: {\n commitDeletion(root, nextEffect, renderPriorityLevel);\n break;\n }\n }\n\n nextEffect = nextEffect.nextEffect;\n }\n}\n```\n\n\ncommitMutationEffects会遍历effectList，对每个Fiber节点执行如下三个操作：\n\n- 根据ContentReset effectTag重置文字节点\n- 更新ref\n- 根据effectTag分别处理，其中effectTag包括(Placement | Update | Deletion | Hydrating)\n\n我们关注步骤三中的`Placement | Update | Deletion`。Hydrating作为服务端渲染相关，我们先不关注。\n\n#### Placement effect\n当Fiber节点含有Placement effectTag，意味着该Fiber节点对应的DOM节点需要插入到页面中。\n\n调用的方法为commitPlacement。\n\n该方法所做的工作分为三步：\n\n1. 获取父级DOM节点。其中finishedWork为传入的Fiber节点。\n```ts\nconst parentFiber = getHostParentFiber(finishedWork);\n// 父级DOM节点\nconst parentStateNode = parentFiber.stateNode;\n```\n\n2. 获取Fiber节点的DOM兄弟节点\n```ts\n获取Fiber节点的DOM兄弟节点\n```\n\n3. 根据DOM兄弟节点是否存在决定调用parentNode.insertBefore或parentNode.appendChild执行DOM插入操作。\n```ts\n// parentStateNode是否是rootFiber\nif (isContainer) {\n insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);\n} else {\n insertOrAppendPlacementNode(finishedWork, before, parent);\n}\n```\n\n值得注意的是，getHostSibling（获取兄弟DOM节点）的执行很耗时，当在同一个父Fiber节点下依次执行多个插入操作，getHostSibling算法的复杂度为指数级。\n\n这是由于Fiber节点不只包括HostComponent，所以Fiber树和渲染的DOM树节点并不是一一对应的。要从Fiber节点找到DOM节点很可能跨层级遍历。\n\n```tsx\nfunction Item() {\n return

;\n}\n\nfunction App() {\n return (\n

\n \n

\n )\n}\n\nReactDOM.render(, document.getElementById('root'));\n```\n\n对应的Fiber树和DOM树结构为：\n```\n// Fiber树\n child child child child\nrootFiber -----> App -----> div -----> Item -----> li\n\n// DOM树\n#root ---> div ---> li\n```\n\n当在div的子节点Item前插入一个新节点p，即App变为：\n\n```tsx\nfunction App() {\n return (\n

\n \n

\n )\n}\n```\n\n对应的Fiber树和DOM树结构为：\n\n```\n// Fiber树\n child child child\nrootFiber -----> App -----> div -----> p \n | sibling child\n | -------> Item -----> li \n// DOM树\n#root ---> div ---> p\n |\n ---> li\n```\n\n此时DOM节点 p的兄弟节点为li，而Fiber节点 p对应的兄弟DOM节点为： `fiberP.sibling.child`\n\n即fiber p的兄弟fiber Item的子fiber li\n\n#### Update effect\n\n当Fiber节点含有Update effectTag，意味着该Fiber节点需要更新。调用的方法为commitWork，他会根据Fiber.tag分别处理。\n\n这里我们主要关注FunctionComponent和HostComponent。\n\n#### FunctionComponent mutation\n\n当fiber.tag为FunctionComponent，会调用commitHookEffectListUnmount。该方法会遍历effectList，执行所有useLayoutEffect hook的销毁函数。\n\n所谓“销毁函数”，见如下例子\n```ts\nuseLayoutEffect(() => {\n // ...一些副作用逻辑\n\n return () => {\n // ...这就是销毁函数\n }\n})\n```\n\n你不需要很了解useLayoutEffect，我们会在下一节详细介绍。你只需要知道在mutation阶段会执行useLayoutEffect的销毁函数。\n\n#### HostComponent mutation\n\n当fiber.tag为HostComponent，会调用commitUpdate。\n\n最终会在updateDOMProperties (opens new window)中将render阶段 completeWork (opens new window)中为Fiber节点赋值的updateQueue对应的内容渲染在页面上。\n\n```ts\nfor (let i = 0; i < updatePayload.length; i += 2) {\n const propKey = updatePayload[i];\n const propValue = updatePayload[i + 1];\n\n // 处理 style\n if (propKey === STYLE) {\n setValueForStyles(domElement, propValue);\n // 处理 DANGEROUSLY_SET_INNER_HTML\n } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {\n setInnerHTML(domElement, propValue);\n // 处理 children\n } else if (propKey === CHILDREN) {\n setTextContent(domElement, propValue);\n } else {\n // 处理剩余 props\n setValueForProperty(domElement, propKey, propValue, isCustomComponentTag);\n }\n}\n```\n\n#### Deletion effect\n\n当Fiber节点含有Deletion effectTag，意味着该Fiber节点对应的DOM节点需要从页面中删除。调用的方法为commitDeletion。\n\n该方法会执行如下操作：\n\n- 递归调用Fiber节点及其子孙Fiber节点中fiber.tag为ClassComponent的componentWillUnmount (opens new window)生命周期钩子，从页面移除Fiber节点对应DOM节点\n- 解绑ref\n- 调度useEffect的销毁函数\n\n### layout阶段\n\n该阶段之所以称为layout，因为该阶段的代码都是在DOM渲染完成（mutation阶段完成）后执行的。\n\n该阶段触发的生命周期钩子和hook可以直接访问到已经改变后的DOM，即该阶段是可以参与DOM layout的阶段。\n\n与前两个阶段类似，layout阶段也是遍历effectList，执行函数。\n\n具体执行的函数是commitLayoutEffects。\n\n\n#### commitLayoutEffects\n\ncommitLayoutEffects一共做了两件事：\n\n1. commitLayoutEffectOnFiber（调用生命周期钩子和hook相关操作）\n\n2. commitAttachRef（赋值 ref）\n\n#### commitLayoutEffectOnFiber\n\ncommitLayoutEffectOnFiber方法会根据fiber.tag对不同类型的节点分别处理。\n\n- 对于ClassComponent，他会通过current === null?区分是mount还是update，调用componentDidMount (opens new window)或componentDidUpdate\n\n触发状态更新的this.setState如果赋值了第二个参数回调函数，也会在此时调用。\n\n- 对于FunctionComponent及相关类型，他会调用useLayoutEffect hook的回调函数，调度useEffect的销毁与回调函数\n\n相关类型指特殊处理后的FunctionComponent，比如ForwardRef、React.memo包裹的FunctionComponent\n\nmutation阶段会执行useLayoutEffect hook的销毁函数。\n\n结合这里我们可以发现，useLayoutEffect hook从上一次更新的销毁函数调用到本次更新的回调函数调用是同步执行的。\n\n而useEffect则需要先调度，在Layout阶段完成后再异步执行。\n\n这就是useLayoutEffect与useEffect的区别。\n\n- 对于HostRoot，即rootFiber，如果赋值了第三个参数回调函数，也会在此时调用。\n\n#### commitAttachRef\n\ncommitLayoutEffects会做的第二件事是commitAttachRef。\n\n代码逻辑很简单：获取DOM实例，更新ref。\n\n#### current Fiber树切换\n\n至此，整个layout阶段就结束了。\n\n\n\n\n",{"_58":959,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/325/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/325/timeline",{"_58":962,"_60":61,"_62":963,"_64":964,"_66":965,"_68":966,"_70":967,"_72":968,"_74":969,"_76":970,"_78":971,"_111":972,"_131":132,"_133":24,"_134":974,"_136":975,"_158":151,"_152":977,"_154":978,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":979,"_170":980,"_176":981,"_178":982,"_190":984,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/324","https://api.github.com/repos/pro-collection/interview-question/issues/324/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/324/comments","https://api.github.com/repos/pro-collection/interview-question/issues/324/events","https://github.com/pro-collection/interview-question/issues/324",1689968075,"I_kwDOJGDC6c5kut3L",324,"[React] render 阶段的执行过程【热度: 1,793】",{"_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},[973],{"_70":388,"_72":389,"_58":390,"_117":391,"_119":392,"_121":24,"_122":393},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":976,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-04-30T15:45:51Z","2023-04-30T15:45:52Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：react16 架构、react Reconciler、react fiber、react 协调器\n\nrender阶段开始于`performSyncWorkOnRoot`或`performConcurrentWorkOnRoot`方法的调用。这取决于本次更新是同步更新还是异步更新。\n\n```js\n// performSyncWorkOnRoot会调用该方法\nfunction workLoopSync() {\n while (workInProgress !== null) {\n performUnitOfWork(workInProgress);\n }\n}\n\n// performConcurrentWorkOnRoot会调用该方法\nfunction workLoopConcurrent() {\n while (workInProgress !== null && !shouldYield()) {\n performUnitOfWork(workInProgress);\n }\n}\n```\n\n可以看到，他们唯一的区别是是否调用shouldYield。如果当前浏览器帧没有剩余时间，shouldYield会中止循环，直到浏览器有空闲时间后再继续遍历。\n\nworkInProgress代表当前已创建的workInProgress fiber。\n\nperformUnitOfWork方法会创建下一个Fiber节点并赋值给workInProgress，并将workInProgress与已创建的Fiber节点连接起来构成Fiber树。\n\n通过遍历的方式实现可中断的递归，所以performUnitOfWork的工作可以分为两部分：“递”和“归”。\n\n### 创建节点\n\n首先从rootFiber开始向下深度优先遍历。为遍历到的每个Fiber节点调用`beginWork`方法 (opens new window)。\n\n该方法会根据传入的Fiber节点创建子Fiber节点，并将这两个Fiber节点连接起来。\n\n当遍历到叶子节点（即没有子组件的组件）时就会进入“归”阶段。\n\n在“归”阶段会调用`completeWork` (opens new window)处理Fiber节点。\n\n当某个Fiber节点执行完completeWork，如果其存在兄弟Fiber节点（即fiber.sibling !== null），会进入其兄弟Fiber的“递”阶段。\n\n如果不存在兄弟Fiber，会进入父级Fiber的“归”阶段。\n\n“递”和“归”阶段会交错执行直到“归”到rootFiber。至此，render阶段的工作就结束了。\n\n**举例**\n\n代码如下：\n\n```js\nfunction App() {\n return (\n

\n i am\n KaSong\n

\n )\n}\n\nReactDOM.render(, document.getElementById(\"root\"));\n```\n\n对应的 fiber 树结构如下 \n![image](https://user-images.githubusercontent.com/22188674/235359287-0f448fa3-657d-40b4-8cff-92327ef5414c.png)\n\nrender 阶段会依次执行\n\n```\n1. rootFiber beginWork\n2. App Fiber beginWork\n3. div Fiber beginWork\n4. \"i am\" Fiber beginWork\n5. \"i am\" Fiber completeWork\n6. span Fiber beginWork\n7. span Fiber completeWork\n8. div Fiber completeWork\n9. App Fiber completeWork\n10. rootFiber completeWork\n```\n\n### beginWork\n\n源码链接： https://github.com/facebook/react/blob/1fb18e22ae66fdb1dc127347e169e73948778e5a/packages/react-reconciler/src/ReactFiberBeginWork.new.js#L3075\n\n工作流程图：\n![image](https://user-images.githubusercontent.com/22188674/235361451-6440499a-09dc-4478-81e4-e0585e815f0b.png)\n\nbeginWork的工作是传入当前Fiber节点，创建子Fiber节点，我们从传参来看看具体是如何做的。\n\n**传参**\n\n```ts\nfunction beginWork(\n current: Fiber | null, // 当前组件对应的Fiber节点在上一次更新时的Fiber节点，即workInProgress.alternate\n workInProgress: Fiber, // 当前组件对应的Fiber节点\n renderLanes: Lanes, // 优先级相关，在讲解Scheduler时再讲解\n): Fiber | null {\n // ...省略函数体\n}\n```\n\nbeginWork的工作可以分为两部分:\n\n- `update`时：如果current存在，在满足一定条件时可以复用current节点，这样就能克隆current.child作为workInProgress.child，而不需要新建workInProgress.child。\n- `mount`时：除fiberRootNode以外，current === null。会根据fiber.tag不同，创建不同类型的子Fiber节点\n\n```ts\nfunction beginWork(\n current: Fiber | null,\n workInProgress: Fiber,\n renderLanes: Lanes\n): Fiber | null {\n\n // update时：如果current存在可能存在优化路径，可以复用current（即上一次更新的Fiber节点）\n if (current !== null) {\n // ...省略\n\n // 复用current\n return bailoutOnAlreadyFinishedWork(\n current,\n workInProgress,\n renderLanes,\n );\n } else {\n didReceiveUpdate = false;\n }\n\n // mount时：根据tag不同，创建不同的子Fiber节点\n switch (workInProgress.tag) {\n case IndeterminateComponent:\n // ...省略\n case LazyComponent:\n // ...省略\n case FunctionComponent:\n // ...省略\n case ClassComponent:\n // ...省略\n case HostRoot:\n // ...省略\n case HostComponent:\n // ...省略\n case HostText:\n // ...省略\n // ...省略其他类型\n }\n}\n```\n\n#### update时\n\n满足如下情况时didReceiveUpdate === false（即可以直接复用前一次更新的子Fiber，不需要新建子Fiber）\n\n```ts\nif (current !== null) {\n const oldProps = current.memoizedProps;\n const newProps = workInProgress.pendingProps;\n\n if (\n oldProps !== newProps ||\n hasLegacyContextChanged() ||\n (__DEV__ ? workInProgress.type !== current.type : false)\n ) {\n didReceiveUpdate = true;\n } else if (!includesSomeLane(renderLanes, updateLanes)) {\n didReceiveUpdate = false;\n switch (workInProgress.tag) {\n // 省略处理\n }\n return bailoutOnAlreadyFinishedWork(\n current,\n workInProgress,\n renderLanes,\n );\n } else {\n didReceiveUpdate = false;\n }\n} else {\n didReceiveUpdate = false;\n}\n```\n\n1. `oldProps === newProps && workInProgress.type === current.type`，即props与fiber.type不变\n2. `!includesSomeLane(renderLanes, updateLanes)`，即当前Fiber节点优先级不够，会在讲解Scheduler时介绍\n\n#### mount\n\n当不满足优化路径时，我们就进入第二部分，新建子Fiber。\n\n```ts\n// mount时：根据tag不同，创建不同的Fiber节点\nswitch (workInProgress.tag) {\n case IndeterminateComponent:\n // ...省略\n case LazyComponent:\n // ...省略\n case FunctionComponent:\n // ...省略\n case ClassComponent:\n // ...省略\n case HostRoot:\n // ...省略\n case HostComponent:\n // ...省略\n case HostText:\n // ...省略\n // ...省略其他类型\n}\n```\n\n我们可以看到，根据fiber.tag不同，进入不同类型Fiber的创建逻辑。\n\n对于我们常见的组件类型，如`（FunctionComponent/ClassComponent/HostComponent）`，最终会进入`reconcileChildren` (opens new window)方法。\n\n#### reconcileChildren\n\n- 对于mount的组件，他会创建新的子Fiber节点\n- 对于update的组件，他会将当前组件与该组件在上次更新时对应的Fiber节点比较（也就是俗称的Diff算法），将比较的结果生成新Fiber节点\n\n```ts\nexport function reconcileChildren(\n current: Fiber | null,\n workInProgress: Fiber,\n nextChildren: any,\n renderLanes: Lanes\n) {\n if (current === null) {\n // 对于mount的组件\n workInProgress.child = mountChildFibers(\n workInProgress,\n null,\n nextChildren,\n renderLanes,\n );\n } else {\n // 对于update的组件\n workInProgress.child = reconcileChildFibers(\n workInProgress,\n current.child,\n nextChildren,\n renderLanes,\n );\n }\n}\n```\n\n从代码可以看出，和beginWork一样，他也是通过current === null ?区分mount与update。\n\n不论走哪个逻辑，最终他会生成新的子Fiber节点并赋值给workInProgress.child，作为本次beginWork返回值 (opens new window)\n，并作为下次performUnitOfWork执行时workInProgress的传参\n\n#### effectTag\n\n我们知道，render阶段的工作是在内存中进行，当工作结束后会通知Renderer需要执行的DOM操作。要执行DOM操作的具体类型就保存在fiber.effectTag中。\n\n```ts\n// DOM需要插入到页面中\nexport const Placement = /* */ 0b00000000000010;\n// DOM需要更新\nexport const Update = /* */ 0b00000000000100;\n// DOM需要插入到页面中并更新\nexport const PlacementAndUpdate = /* */ 0b00000000000110;\n// DOM需要删除\nexport const Deletion = /* */ 0b00000000001000;\n```\n\n通过二进制表示effectTag，可以方便的使用位操作为fiber.effectTag赋值多个effect。\n\n那么，如果要通知Renderer将Fiber节点对应的DOM节点插入页面中，需要满足两个条件：\n\n1. `fiber.stateNode`存在，即Fiber节点中保存了对应的DOM节点\n\n2. `(fiber.effectTag & Placement) !== 0`，即 `Fiber节点存在Placement effectTag`\n\n我们知道，mount时，fiber.stateNode === null，且在reconcileChildren中调用的mountChildFibers不会为Fiber节点赋值effectTag。那么首屏渲染如何完成呢？\n\n针对第一个问题，`fiber.stateNode`会在`completeWork`中创建，我们会在下一节介绍。\n\n第二个问题的答案十分巧妙：假设`mountChildFibers`也会赋值effectTag，那么可以预见mount时整棵Fiber树所有节点都会有Placement\neffectTag。那么commit阶段在执行DOM操作时每个节点都会执行一次插入操作，这样大量的DOM操作是极低效的。\n\n为了解决这个问题，**在mount时只有rootFiber会赋值Placement effectTag**，在commit阶段只会执行一次插入操作。\n\n### completeWork\n\n流程图：\n![image](https://user-images.githubusercontent.com/22188674/235362048-ce278ddf-b944-4ed6-a6af-e3b1502fb6c7.png)\n\n类似beginWork，completeWork也是针对不同fiber.tag调用不同的处理逻辑。\n\n```ts\nfunction completeWork(\n current: Fiber | null,\n workInProgress: Fiber,\n renderLanes: Lanes,\n): Fiber | null {\n const newProps = workInProgress.pendingProps;\n\n switch (workInProgress.tag) {\n case IndeterminateComponent:\n case LazyComponent:\n case SimpleMemoComponent:\n case FunctionComponent:\n case ForwardRef:\n case Fragment:\n case Mode:\n case Profiler:\n case ContextConsumer:\n case MemoComponent:\n return null;\n case ClassComponent: {\n // ...省略\n return null;\n }\n case HostRoot: {\n // ...省略\n updateHostContainer(workInProgress);\n return null;\n }\n case HostComponent: {\n // ...省略\n return null;\n }\n // ...省略\n }\n // ...省略\n}\n```\n\n我们重点关注页面渲染所必须的 `HostComponent`（即原生DOM组件对应的Fiber节点），其他类型Fiber的处理留在具体功能实现时讲解。\n\n#### 处理 HostComponent\n\n和`beginWork`一样，我们根据 `current === null` ?判断是mount还是`update`。\n\n同时针对 `HostComponent`，判断 `update` 时我们还需要考虑 `workInProgress.stateNode != null` ?（即该Fiber节点是否存在对应的DOM节点）\n\n```ts\ncase\nHostComponent: {\n popHostContext(workInProgress);\n const rootContainerInstance = getRootHostContainer();\n const type = workInProgress.type;\n\n if (current !== null && workInProgress.stateNode != null) {\n // update的情况\n // ...省略\n } else {\n // mount的情况\n // ...省略\n }\n return null;\n}\n```\n\n#### update 时\n\n当update时，Fiber节点已经存在对应DOM节点，所以不需要生成DOM节点。需要做的主要是处理props，比如：\n\n- `onClick、onChange` 等回调函数的注册\n- 处理 `style prop`\n- 处理 `DANGEROUSLY_SET_INNER_HTML prop`\n- 处理 `children prop`\n\n我们去掉一些当前不需要关注的功能（比如ref）。可以看到最主要的逻辑是调用updateHostComponent方法。\n\n```ts\nif (current !== null && workInProgress.stateNode != null) {\n // update的情况\n updateHostComponent(\n current,\n workInProgress,\n type,\n newProps,\n rootContainerInstance,\n );\n}\n```\n\n在updateHostComponent内部，被处理完的props会被赋值给workInProgress.updateQueue，并最终会在commit阶段被渲染在页面上。\n\n`workInProgress.updateQueue = (updatePayload: any);`\n\n其中updatePayload为数组形式，他的偶数索引的值为变化的prop key，奇数索引的值为变化的prop value。\n\n#### mount 时\n\n同样，我们省略了不相关的逻辑。可以看到，mount时的主要逻辑包括三个：\n\n- 为Fiber节点生成对应的DOM节点\n- 将子孙DOM节点插入刚生成的DOM节点中\n- 与update逻辑中的updateHostComponent类似的处理props的过程\n\n```ts\n// mount的情况\n\n// ...省略服务端渲染相关逻辑\n\nconst currentHostContext = getHostContext();\n// 为fiber创建对应DOM节点\nconst instance = createInstance(\n type,\n newProps,\n rootContainerInstance,\n currentHostContext,\n workInProgress,\n );\n// 将子孙DOM节点插入刚生成的DOM节点中\nappendAllChildren(instance, workInProgress, false, false);\n// DOM节点赋值给fiber.stateNode\nworkInProgress.stateNode = instance;\n\n// 与update逻辑中的updateHostComponent类似的处理props的过程\nif (\n finalizeInitialChildren(\n instance,\n type,\n newProps,\n rootContainerInstance,\n currentHostContext,\n )\n) {\n markUpdate(workInProgress);\n}\n```\n\nmount时只会在rootFiber存在Placement effectTag。那么commit阶段是如何通过一次插入DOM操作（对应一个Placement effectTag）将整棵DOM树插入页面的呢？\n\n原因就在于 `completeWork中的appendAllChildren` 方法。\n\n由于`completeWork`属于“归”阶段调用的函数，每次调用`appendAllChildren`时都会将已生成的子孙DOM节点插入当前生成的DOM节点下。那么当“归”到rootFiber时，我们已经有一个构建好的离屏DOM树。\n\n#### effectList\n\n至此render阶段的绝大部分工作就完成了。\n\n还有一个问题：作为DOM操作的依据，commit阶段需要找到所有有effectTag的Fiber节点并依次执行effectTag对应操作。难道需要在commit阶段再遍历一次Fiber树寻找effectTag !== null的Fiber节点么？\n\n这显然是很低效的。\n\n为了解决这个问题，在completeWork的上层函数completeUnitOfWork中，每个执行完completeWork且存在effectTag的Fiber节点会被保存在一条被称为effectList的单向链表中。\n\neffectList中第一个Fiber节点保存在fiber.firstEffect，最后一个元素保存在fiber.lastEffect。\n\n类似appendAllChildren，在“归”阶段，所有有effectTag的Fiber节点都会被追加在effectList中，最终形成一条以rootFiber.firstEffect为起点的单向链表。\n\n```\n nextEffect nextEffect\nrootFiber.firstEffect -----------> fiber -----------> fiber\n```\n\n这样，在commit阶段只需要遍历`effectList`就能执行所有`effect`了。\n\n### 流程结尾\n至此，render阶段全部工作完成。在performSyncWorkOnRoot函数中fiberRootNode被传递给commitRoot方法，开启commit阶段工作流程。\n\n`commitRoot(root);`\n\n\n",{"_58":983,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/324/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/324/timeline",{"_58":986,"_60":61,"_62":987,"_64":988,"_66":989,"_68":990,"_70":991,"_72":992,"_74":993,"_76":994,"_78":995,"_111":996,"_131":132,"_133":24,"_134":998,"_136":999,"_158":151,"_152":1001,"_154":1002,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":1003,"_170":1004,"_176":1005,"_178":1006,"_190":1008,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/323","https://api.github.com/repos/pro-collection/interview-question/issues/323/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/323/comments","https://api.github.com/repos/pro-collection/interview-question/issues/323/events","https://github.com/pro-collection/interview-question/issues/323",1688900261,"I_kwDOJGDC6c5kqpKl",323,"[React] Fiber的含义与数据结构【热度: 1,778】",{"_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},[997],{"_70":388,"_72":389,"_58":390,"_117":391,"_119":392,"_121":24,"_122":393},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":1000,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-04-28T17:31:23Z","2023-04-28T17:31:24Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：react16 架构、react Reconciler、react fiber、react 协调器\n\n### Fiber的含义\n\n1. 作为架构来说，之前React15的Reconciler采用递归的方式执行，数据保存在递归调用栈中，所以被称为stack Reconciler。React16的Reconciler基于Fiber节点实现，被称为Fiber Reconciler。\n\n2. 作为静态的数据结构来说，每个Fiber节点对应一个React element，保存了该组件的类型（函数组件/类组件/原生组件...）、对应的DOM节点等信息。\n\n3. 作为动态的工作单元来说，每个Fiber节点保存了本次更新中该组件改变的状态、要执行的工作（需要被删除/被插入页面中/被更新...）。\n\n### Fiber的结构\n\n总的属性如下：\n```js\nfunction FiberNode(\n tag: WorkTag,\n pendingProps: mixed,\n key: null | string,\n mode: TypeOfMode,\n) {\n // 作为静态数据结构的属性\n this.tag = tag;\n this.key = key;\n this.elementType = null;\n this.type = null;\n this.stateNode = null;\n\n // 用于连接其他Fiber节点形成Fiber树\n this.return = null;\n this.child = null;\n this.sibling = null;\n this.index = 0;\n\n this.ref = null;\n\n // 作为动态的工作单元的属性\n this.pendingProps = pendingProps;\n this.memoizedProps = null;\n this.updateQueue = null;\n this.memoizedState = null;\n this.dependencies = null;\n\n this.mode = mode;\n\n this.effectTag = NoEffect;\n this.nextEffect = null;\n\n this.firstEffect = null;\n this.lastEffect = null;\n\n // 调度优先级相关\n this.lanes = NoLanes;\n this.childLanes = NoLanes;\n\n // 指向该fiber在另一次更新时对应的fiber\n this.alternate = null;\n}\n```\n\n可以按三层含义将他们分类来看\n\n#### 作为架构\n\n每个Fiber节点有个对应的React element，多个Fiber节点是如何连接形成树呢？靠如下三个属性：\n\n```js\n// 指向父级Fiber节点\nthis.return = null;\n// 指向子Fiber节点\nthis.child = null;\n// 指向右边第一个兄弟Fiber节点\nthis.sibling = null;\n```\n\n举个例子，如下的组件结构：\n\n```js\nfunction App() {\n return (\n

\n i am\n KaSong\n

\n )\n}\n```\n\n对应的Fiber树结构： \n![image](https://user-images.githubusercontent.com/22188674/235214339-4efeccaf-95fd-420f-8ac2-7a9b89c301c0.png)\n\n#### 作为静态的数据结构\n\n作为一种静态的数据结构，保存了组件相关的信息：\n\n```js\n// Fiber对应组件的类型 Function/Class/Host...\nthis.tag = tag;\n// key属性\nthis.key = key;\n// 大部分情况同type，某些情况不同，比如FunctionComponent使用React.memo包裹\nthis.elementType = null;\n// 对于 FunctionComponent，指函数本身，对于ClassComponent，指class，对于HostComponent，指DOM节点tagName\nthis.type = null;\n// Fiber对应的真实DOM节点\nthis.stateNode = null;\n```\n\n#### 作为动态的工作单元\n作为动态的工作单元，Fiber中如下参数保存了本次更新相关的信息，我们会在后续的更新流程中使用到具体属性时再详细介绍\n\n```js\n// 保存本次更新造成的状态改变相关信息\nthis.pendingProps = pendingProps;\nthis.memoizedProps = null;\nthis.updateQueue = null;\nthis.memoizedState = null;\nthis.dependencies = null;\n\nthis.mode = mode;\n\n// 保存本次更新会造成的DOM操作\nthis.effectTag = NoEffect;\nthis.nextEffect = null;\n\nthis.firstEffect = null;\nthis.lastEffect = null;\n\n// 调度优先级相关\nthis.lanes = NoLanes;\nthis.childLanes = NoLanes;\n```\n\n\n\n\n\n",{"_58":1007,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/323/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/323/timeline",{"_58":1010,"_60":61,"_62":1011,"_64":1012,"_66":1013,"_68":1014,"_70":1015,"_72":1016,"_74":1017,"_76":1018,"_78":1019,"_111":1020,"_131":132,"_133":24,"_134":1022,"_136":1023,"_158":151,"_152":1025,"_154":1026,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":1027,"_170":1028,"_176":1029,"_178":1030,"_190":1032,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/322","https://api.github.com/repos/pro-collection/interview-question/issues/322/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/322/comments","https://api.github.com/repos/pro-collection/interview-question/issues/322/events","https://github.com/pro-collection/interview-question/issues/322",1688824333,"I_kwDOJGDC6c5kqWoN",322,"[React] fiber 架构的工作原理？【热度: 1,774】",{"_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},[1021],{"_70":388,"_72":389,"_58":390,"_117":391,"_119":392,"_121":24,"_122":393},[],{"_58":325,"_68":326,"_62":327,"_70":328,"_72":329,"_74":330,"_76":331,"_122":332,"_146":1024,"_148":334,"_150":151,"_131":132,"_152":335,"_154":336,"_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},"2023-04-28T16:23:02Z","2023-04-28T16:37:43Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：react16 架构、react Reconciler、react fiber、react 协调器\r\n\r\n### 双缓存Fiber树\r\n\r\n如果当前帧画面计算量比较大，导致清除上一帧画面到绘制当前帧画面之间有较长间隙，就会出现白屏。\r\n\r\n为了解决这个问题，就有了图像处理中的**双缓存技术**。 \r\n\r\n双缓存是一种技术，用于在图像处理中减少闪烁和图像模糊等视觉问题。在使用双缓存时，图像处理器会将图像绘制到一个“后台缓存”中，而不是直接绘制到屏幕上。一旦绘制完成，新的图像将与当前显示的图像交换，使得新图像无缝地显示在屏幕上，避免了闪烁和模糊的问题。因此，双缓存有助于提高图像处理的质量和可靠性，特别是在高速显示和实时处理应用中。\r\n\r\nReact使用“双缓存”来完成Fiber树的构建与替换——对应着DOM树的创建与更新。\r\n\r\n\r\n在React中最多会同时存在两棵Fiber树。当前屏幕上显示内容对应的Fiber树称为current Fiber树，正在内存中构建的Fiber树称为workInProgress Fiber树。\r\n\r\nReact Fiber 的双缓存机制是一种优化技术，用于在 UI 更新过程中避免视觉问题，如闪烁、撕裂和卡顿等。React Double Buffer 在 React Fiber 内部实现了两个缓存区域：当前显示的缓存（Current Buffer）和等待显示的缓存（Work Buffer）。\r\n\r\n```js\r\ncurrentFiber.alternate === workInProgressFiber;\r\nworkInProgressFiber.alternate === currentFiber;\r\n```\r\n\r\n\r\n当应用程序状态发生更改，并需要更新 UI 时，React Fiber 首先在 Work Buffer 中执行所有渲染操作，以避免将中间状态呈现在屏幕上。一旦 Work Buffer 中的所有渲染操作完成，React Fiber 将当前缓存与工作缓存进行切换，即将 Work Buffer 设置为当前缓存，以此来更新屏幕上的 UI。\r\n\r\n这样一来，React Fiber 就可以确保在任何时候，所有呈现在屏幕上的内容都是完整和稳定的。\r\n\r\n### mount与update 场景\r\n\r\n当组件第一次被挂载时：\r\n\r\n```jsx\r\nclass MyComponent extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n count: 0,\r\n };\r\n }\r\n\r\n handleClick = () => {\r\n this.setState((prevState) => ({\r\n count: prevState.count + 1,\r\n }));\r\n }\r\n\r\n render() {\r\n return (\r\n

\r\n Click me: {this.state.count}\r\n

\r\n );\r\n }\r\n}\r\n\r\nReactDOM.render(, document.getElementById('root'));\r\n```\r\n\r\n当我们将 `` 挂载到页面上时，React Fiber 首先会在内存中创建一个空的 Fiber 树，然后根据组件的定义，为组件创建一个初始的“工作单元”（Work In Progress）。\r\n\r\n在这个工作单元内部，React Fiber 会为状态和 props 建立初始的 Fiber 对象，并在之后的更新过程中使用这些 Fiber 对象来跟踪组件的状态和变化。这样可以确保任何时候都可以根据状态和 props 的变化来更新 UI，而不会出现任何问题。\r\n\r\n接下来，React Fiber 开始在工作单元中执行所有的渲染操作，生成一棵虚拟 DOM 树，并将其添加到 Work Buffer 中。然后，React Fiber 会检查 Work Buffer 是否有更改，如果有更改，就将 Work Buffer 与 Current Buffer 进行对比，以查找差异并更新到 DOM 上。\r\n\r\n这个初次渲染的过程不太会涉及到双缓存树，因为当前缓存是空的，所有的操作都是在 Work Buffer 中进行的。但是，一旦初次渲染完成，并且组件状态发生变化时，双缓存树就开始发挥作用了。\r\n\r\n当我们通过点击按钮更新组件状态时，React Fiber 将启动一个新的渲染周期，并为更新创建一个新的工作单元。React Fiber 会在新的工作单元中更新状态、生成新的虚拟 DOM 树，并将其添加到 Work Buffer 中。\r\n\r\n然后，React Fiber 会将 Work Buffer 与 Current Buffer 进行对比，找出差异并将其更新到 DOM 上。但是，由于双缓存树的存在，React Fiber 不会立即将 Work Buffer 切换到 Current Buffer，以避免将中间状态显示在屏幕上。\r\n\r\n### 执行流程\r\n好的，下面是 React Fiber 在页面初次更新时的工作过程的流程图：\r\n\r\n1. 应用程序启动，ReactDOM 调用 `ReactDOM.render()` 方法，并将组件渲染到 DOM 中，React Fiber 创建一个空的 Fiber 树。\r\n2. React Fiber 为组件创建初始的“工作单元”，并在其中创建状态和 props 的 Fiber 对象。\r\n3. React Fiber 执行组件的 `render()` 方法，生成虚拟 DOM 树并添加到工作单元中。\r\n4. React Fiber 将工作单元中的虚拟 DOM 树添加到 Work Buffer 中。\r\n5. React Fiber 检查 Work Buffer 是否有更改，如果有更改，则将其与 Current Buffer 进行对比，并将差异更新到 DOM 上。\r\n6. 由于这是初次渲染，Current Buffer 为空，所有更新操作都在 Work Buffer 中完成，然后将 Work Buffer 设置为 Current Buffer。\r\n7. React Fiber 在内存中保留 Fiber 树的副本，并用于后续的更新操作。此时，组件初次渲染流程结束。\r\n\r\n\r\n",{"_58":1031,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/322/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/322/timeline","pagination",{"_1035":1036,"_167":1037},"value",25,32,"actionData","errors"]