Name: {data.name}

Age: {data.age}

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

Friends:\n

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

\n )}\n \n );\n};\n\n// 使用 MyProvider 包裹需要使用 context 的组件\nconst App = () => {\n return (\n \n \n \n );\n};\n\nexport default App;\n```\n\n在上面的示例中，我们使用了 useMemo 对复杂的数据对象进行了缓存。这样，当 context 中的值变化时，只会重新计算数据对象的值，而不是重新创建一个新的对象。这样可以有效地减少不必要的渲染。\n",{"_58":277,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/465/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/465/timeline",{"_58":280,"_60":61,"_62":281,"_64":282,"_66":283,"_68":284,"_70":285,"_72":286,"_74":287,"_76":288,"_78":289,"_111":290,"_131":132,"_133":24,"_134":-5,"_135":293,"_137":294,"_159":152,"_153":296,"_155":297,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":298,"_170":299,"_176":300,"_178":301,"_190":303,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/457","https://api.github.com/repos/pro-collection/interview-question/issues/457/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/457/comments","https://api.github.com/repos/pro-collection/interview-question/issues/457/events","https://github.com/pro-collection/interview-question/issues/457",1755218558,"I_kwDOJGDC6c5onoJ-",457,"JS里的类就是构造函数的语法糖，这个说法是否正确【热度: 541】",{"_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},[291,292],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":295,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-13T15:58:17Z","2023-06-13T15:58:18Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：JS构造函数、JS类的语法糖\n\n这个说法是正确的。\n\n在 JavaScript 中，类实际上是构造函数的语法糖，也就是说，通过类的语法创建的对象和通过构造函数创建的对象是一样的。\n\n例如，下面是一个通过构造函数创建对象的示例：\n\n```javascript\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\n\nPerson.prototype.sayHello = function() {\n console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n};\n\nconst person1 = new Person(\"Alice\", 30);\nperson1.sayHello(); // 输出：Hello, my name is Alice and I am 30 years old.\n```\n\n而使用类的语法创建对象的示例代码如下：\n\n```javascript\nclass Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n \n sayHello() {\n console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n }\n}\n\nconst person2 = new Person(\"Bob\", 25);\nperson2.sayHello(); // 输出：Hello, my name is Bob and I am 25 years old.\n```\n\n可以看到，使用类的语法创建对象时，实际上是在创建一个与构造函数相同的对象。在类中，类名即为构造函数的名称，类中的构造函数即为类的构造函数，类中的方法即为构造函数的原型方法。\n\n在 JavaScript 中，类实际上是构造函数的语法糖，可以通过以下几个方面来体现：\n\n1. 类的名称即为构造函数的名称，在类中通过 `constructor` 方法来初始化对象：\n\n```javascript\nclass Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n\n sayHello() {\n console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n }\n}\n\nconst person = new Person(\"Tom\", 20);\nconsole.log(person instanceof Person); // true\n```\n\n这里定义的 Person 类实际上就是一个构造函数，通过 `new` 关键字创建的对象也是一个 Person 类型的对象。\n\n2. 在类中定义的方法即为构造函数的原型方法：\n\n```javascript\nclass Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n\n sayHello() {\n console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);\n }\n}\n\nconst person = new Person(\"Tom\", 20);\nperson.sayHello(); // 输出：Hello, my name is Tom and I am 20 years old.\n```\n\n可以看到，在类中定义的 `sayHello` 方法实际上就是 Person 构造函数的原型方法。\n\n3. 子类继承父类时，使用 `super()` 方法调用父类的构造函数：\n\n```javascript\nclass Animal {\n constructor(name) {\n this.name = name;\n }\n\n speak() {\n console.log(this.name + ' makes a noise.');\n }\n}\n\nclass Dog extends Animal {\n constructor(name, breed) {\n super(name);\n this.breed = breed;\n }\n\n speak() {\n console.log(this.name + ' barks.');\n }\n}\n\nconst dog = new Dog('Max', 'Labrador');\ndog.speak(); // 输出：Max barks.\n```\n\n这里定义了一个 Animal 类和一个继承自 Animal 类的 Dog 类，Dog 类在构造函数中通过 `super()` 方法调用了父类 Animal 的构造函数，实现了继承功能。可以看到，这里使用的 `super()` 方法也体现了类是构造函数的语法糖。\n\n综上所述，JavaScript 中的类实际上是构造函数的语法糖，通过类的语法创建的对象和通过构造函数创建的对象是一样的。\n\n\n\n",{"_58":302,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/457/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/457/timeline",{"_58":305,"_60":61,"_62":306,"_64":307,"_66":308,"_68":309,"_70":310,"_72":311,"_74":312,"_76":313,"_78":314,"_111":315,"_131":132,"_133":24,"_134":-5,"_135":318,"_137":319,"_159":321,"_153":322,"_155":323,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":324,"_170":325,"_176":326,"_178":327,"_190":329,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/438","https://api.github.com/repos/pro-collection/interview-question/issues/438/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/438/comments","https://api.github.com/repos/pro-collection/interview-question/issues/438/events","https://github.com/pro-collection/interview-question/issues/438",1748179206,"I_kwDOJGDC6c5oMxkG",438,"为什么函数的 arguments 参数是类数组而不是数组？【热度: 669】",{"_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},[316,317],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":320,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},5,"2023-06-08T15:42:57Z","2025-02-21T15:34:45Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：arguments 参数、arguments 参数遍历\r\n\r\n在 JavaScript 中，函数的 `arguments` 参数被设计为类数组对象，而不是真正的数组。这是因为 `arguments` 对象包含了函数调用时传入的所有参数，包括未命名的参数。它提供了一种方便的方式来访问和操作这些参数。\r\n\r\n要遍历类数组对象，可以使用以下方法：\r\n\r\n1. 使用 for 循环和索引：通过使用普通的 for 循环和索引来遍历类数组对象。\r\n```javascript\r\nfunction sum() {\r\n for (let i = 0; i < arguments.length; i++) {\r\n console.log(arguments[i]);\r\n }\r\n}\r\n\r\nsum(1, 2, 3); // 输出：1 2 3\r\n```\r\n\r\n2. 使用 for...of 循环：`arguments` 是特殊的类数组，因为他实现了`[Symbol.iterator]`迭代器，故可以使用 for...of 循环\r\n```javascript\r\nfunction sum() {\r\n for (let arg of arguments) {\r\n console.log(arg);\r\n }\r\n}\r\n\r\nsum(1, 2, 3); // 输出：1 2 3\r\n```\r\n\r\n3. 将类数组对象转换为真正的数组后遍历：可以使用上述提到的类数组转换方法将类数组对象转换为真正的数组，然后使用数组的遍历方法进行遍历，如 `forEach()`、`map()` 等。\r\n```javascript\r\nfunction sum() {\r\n const args = Array.from(arguments);\r\n args.forEach(arg => {\r\n console.log(arg);\r\n });\r\n}\r\n\r\nsum(1, 2, 3); // 输出：1 2 3\r\n```\r\n\r\n这些方法都可以用于遍历类数组对象，根据需求选择适合的方式进行操作。\r\n",{"_58":328,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/438/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/438/timeline",{"_58":331,"_60":61,"_62":332,"_64":333,"_66":334,"_68":335,"_70":336,"_72":337,"_74":338,"_76":339,"_78":340,"_111":341,"_131":132,"_133":24,"_134":-5,"_135":350,"_137":351,"_159":152,"_153":353,"_155":354,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":355,"_170":356,"_176":357,"_178":358,"_190":360,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/411","https://api.github.com/repos/pro-collection/interview-question/issues/411/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/411/comments","https://api.github.com/repos/pro-collection/interview-question/issues/411/events","https://github.com/pro-collection/interview-question/issues/411",1740404569,"I_kwDOJGDC6c5nvHdZ",411,"什么是文档的预解析【热度: 1,133】",{"_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},[342,349],{"_70":343,"_72":344,"_58":345,"_117":346,"_119":347,"_121":24,"_122":348},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":352,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-04T14:28:06Z","2023-06-04T14:28:07Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：文档预解析\n\n文档的预解析（Document Preloading）是浏览器在解析 HTML 文档时的一个优化技术，用于提前获取页面所需的外部资源，如样式表、脚本、字体等。通过在解析过程中预先获取这些资源，可以加快页面加载速度和渲染时间。\n\n浏览器在解析 HTML 文档时，会遇到外部资源的引用，比如 `` 标签引入的样式表和 `\n\n```\n\n这样在代码中引入 `jquery` 模块时，`webpack` 就会将其作为外部依赖进行处理，而不是将其打包进输出文件中。\n\n需要注意的是，使用 `externals` 配置项需要谨慎，因为如果在运行时无法正确获取到指定的外部依赖，就会导致代码运行出错。",{"_58":629,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/288/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/288/timeline",{"_58":632,"_60":61,"_62":633,"_64":634,"_66":635,"_68":636,"_70":637,"_72":638,"_74":639,"_76":640,"_78":641,"_111":642,"_131":132,"_133":24,"_134":-5,"_135":645,"_137":646,"_159":152,"_153":648,"_155":649,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":650,"_170":651,"_176":652,"_178":653,"_190":655,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/287","https://api.github.com/repos/pro-collection/interview-question/issues/287/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/287/comments","https://api.github.com/repos/pro-collection/interview-question/issues/287/events","https://github.com/pro-collection/interview-question/issues/287",1669996048,"I_kwDOJGDC6c5jih4Q",287,"[webpack] 异步加载原理是啥",{"_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},[643,644],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":259,"_68":260,"_62":261,"_70":262,"_72":263,"_74":264,"_76":265,"_122":266,"_147":647,"_149":268,"_151":152,"_131":132,"_153":269,"_155":270,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-16T14:27:01Z","2023-04-16T14:27:02Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### Webpack 异步加载模块的方式主要有以下几种\n\n1. 使用动态 import: 使用 ES6 的 `import()` 语法，动态加载模块。\n\n```javascript\nimport('./path/to/module')\n .then(module => {\n // do something with module\n })\n .catch(error => {\n // handle error\n });\n```\n\n2. 使用 require.ensure: 异步加载模块并将其放置到指定的 chunk 中。\n\n```javascript\nrequire.ensure(['./path/to/module'], function(require) {\n const module = require('./path/to/module');\n // do something with module\n});\n```\n\n3. 使用 bundle-loader: 将模块放置到一个单独的文件中，按需加载。\n\n```javascript\nconst load = require('bundle-loader!./path/to/module');\nload(function(module) {\n // do something with module\n});\n```\n\n4. 使用webpack的require.ensure API\n\n```javascript\nrequire.ensure([], function(require) {\n // require dependencies\n var foo = require(\"./foo\");\n // ...\n});\n```\n\n5. 使用webpack的import动态导入\n\n```javascript\nimport(\"./dynamic-module.js\").then(module => {\n // do something with module\n});\n```\n\n这些方式都可以在 Webpack 中使用，具体使用哪种方式，取决于具体的场景和需求。\n\n### 动态加载的原理\n在 Webpack 中，异步加载组件的原理是利用动态导入（Dynamic import）特性。使用动态导入可以将模块的加载从编译时刻延迟到运行时刻。\n\n具体来说，当 Webpack 打包代码时，遇到动态导入语句时不会将其打包进入主文件，而是将其单独打包为一个新的文件。在运行时，当代码需要加载该组件时，会通过网络请求动态加载该文件。\n\n这样做的好处是可以减小主文件的体积，从而加快页面的加载速度，并且也可以提高代码的灵活性和可维护性。同时，Webpack 还可以对动态加载的文件进行代码分割和按需加载，进一步优化页面的性能。\n\n在使用动态导入时，需要注意一些细节。例如，在支持动态导入的浏览器中，需要使用 `import()` 函数进行动态导入；而在不支持动态导入的浏览器中，需要使用 Webpack 提供的 `require.ensure` 或 `require.include` 等方法进行模块的异步加载。同时，还需要注意动态导入的兼容性和性能问题。\n",{"_58":654,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/287/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/287/timeline",{"_58":657,"_60":61,"_62":658,"_64":659,"_66":660,"_68":661,"_70":662,"_72":663,"_74":664,"_76":665,"_78":666,"_111":667,"_131":132,"_133":24,"_134":-5,"_135":670,"_137":671,"_159":152,"_153":673,"_155":674,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":675,"_170":676,"_176":677,"_178":678,"_190":680,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/286","https://api.github.com/repos/pro-collection/interview-question/issues/286/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/286/comments","https://api.github.com/repos/pro-collection/interview-question/issues/286/events","https://github.com/pro-collection/interview-question/issues/286",1669976171,"I_kwDOJGDC6c5jidBr",286,"[React] 父组件调用子组件的方法",{"_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},[668,669],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":672,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-16T13:45:21Z","2023-04-16T13:45:22Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"在React中，我们经常在子组件中调用父组件的方法，一般用props回调即可。但是有时候也需要在父组件中调用子组件的方法，通过这种方法实现高内聚。有多种方法，请按需服用。\n\n### 类组件中\n\n#### React.createRef()\n\n* 优点：通俗易懂，用ref指向。\n\n* 缺点：使用了HOC的子组件不可用，无法指向真是子组件\n\n 比如一些常用的写法，mobx的@observer包裹的子组件就不适用此方法。\n\n```scala\nimport React, { Component } from 'react';\n\nclass Sub extends Component {\n callback() {\n console.log('执行回调');\n }\n render() {\n return

子组件

;\n }\n}\n\nclass Super extends Component {\n constructor(props) {\n super(props);\n this.sub = React.createRef();\n }\n handleOnClick() {\n this.sub.callback();\n }\n render() {\n return (\n

\n \n

\n );\n }\n}\n\n\n```\n\n#### ref的函数式声明\n\n* 优点：ref写法简洁\n* 缺点：使用了HOC的子组件不可用，无法指向真是子组件（同上）\n\n使用方法和上述的一样，就是定义ref的方式不同。\n\n```csharp\n...\n\n_{this.sub = ref}>}\n\n...\n\n\n```\n\n#### 使用props自定义onRef属性\n\n* 优点：假如子组件是嵌套了HOC，也可以指向真实子组件。\n* 缺点：需要自定义props属性\n\n```typescript\nimport React, { Component } from 'react';\nimport { observer } from 'mobx-react'\n\n@observer\nclass Sub extends Component {\n\tcomponentDidMount(){\n // 将子组件指向父组件的变量\n\t\tthis.props.onRef && this.props.onRef(this);\n\t}\n\tcallback(){\n\t\tconsole.log(\"执行我\")\n\t}\n\trender(){\n\t\treturn (

子组件

);\n\t}\n}\n\nclass Super extends Component {\n\thandleOnClick(){\n // 可以调用子组件方法\n\t\tthis.Sub.callback();\n\t}\n\trender(){\n\t\treturn (\n

\n\t\t\t

click

\n\t\t\t_{this.Sub = node }>}\n\t \t

)\n\t}\n}\n\n\n```\n\n### 函数组件、Hook组件\n\n#### useImperativeHandle\n\n* 优点： 1、写法简单易懂 2、假如子组件嵌套了HOC，也可以指向真实子组件\n* 缺点： 1、需要自定义props属性 2、需要自定义暴露的方法\n\n```javascript\nimport React, { useImperativeHandle } from 'react';\nimport { observer } from 'mobx-react'\n\n\nconst Parent = () => {\n let ChildRef = React.createRef();\n\n function handleOnClick() {\n ChildRef.current.func();\n }\n\n return (\n

\n \n \n

\n );\n};\n\nconst Child = observer(props => {\n //用useImperativeHandle暴露一些外部ref能访问的属性\n useImperativeHandle(props.onRef, () => {\n // 需要将暴露的接口返回出去\n return {\n func: func,\n };\n });\n function func() {\n console.log('执行我');\n }\n return

子组件

;\n});\n\nexport default Parent;\n\n```\n\n#### forwardRef\n\n使用forwardRef抛出子组件的ref\n\n这个方法其实更适合自定义HOC。但问题是，withRouter、connect、Form.create等方法并不能抛出ref，假如Child本身就需要嵌套这些方法，那基本就不能混着用了。forwardRef本身也是用来抛出子元素，如input等原生元素的ref的，并不适合做组件ref抛出，因为组件的使用场景太复杂了。\n\n```javascript\nimport React, { useRef, useImperativeHandle } from 'react';\nimport ReactDOM from 'react-dom';\nimport { observer } from 'mobx-react'\n\nconst FancyInput = React.forwardRef((props, ref) => {\n const inputRef = useRef();\n useImperativeHandle(ref, () => ({\n focus: () => {\n inputRef.current.focus();\n }\n }));\n\n return \n});\n\nconst Sub = observer(FancyInput)\n\nconst App = props => {\n const fancyInputRef = useRef();\n\n return (\n

\n \n fancyInputRef.current.focus()}\n >父组件调用子组件的 focus\n

\n )\n}\n\nexport default App;\n\n\n```\n\n### 总结\n\n父组件调子组件函数有两种情况\n\n* 子组件无HOC嵌套：推荐使用ref直接调用\n* 有HOC嵌套：推荐使用自定义props的方式\n",{"_58":679,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/286/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/286/timeline",{"_58":682,"_60":61,"_62":683,"_64":684,"_66":685,"_68":686,"_70":687,"_72":688,"_74":689,"_76":690,"_78":691,"_111":692,"_131":132,"_133":24,"_134":-5,"_135":695,"_137":696,"_159":152,"_153":698,"_155":699,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":700,"_170":701,"_176":702,"_178":703,"_190":705,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/277","https://api.github.com/repos/pro-collection/interview-question/issues/277/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/277/comments","https://api.github.com/repos/pro-collection/interview-question/issues/277/events","https://github.com/pro-collection/interview-question/issues/277",1662739503,"I_kwDOJGDC6c5jG2Qv",277,"[Vue] watch 和 computed 的区别和理解",{"_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},[693,694],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":697,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-11T15:23:05Z","2023-04-11T15:23:06Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**计算属性computed :**\n\n1. 支持缓存，只有依赖数据发生改变，才会重新进行计算，计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。computed是计算属性的; 它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。computed的值在getter执行后是会被缓存的。如果所依赖的数据发生改变时候, 就会重新调用getter来计算最新的结果。\n\n2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化\n\n3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值\n\n4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed\n\n5. 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。\n\n6. 适用于一些重复使用数据或复杂及费时的运算。我们可以把它放入computed中进行计算, 然后会在computed中缓存起来, 下次就可以直接获取了。\n\n7. 如果我们需要的数据依赖于其他的数据的话, 我们可以把该数据设计为computed中。\n\n8. computed 是基于响应性依赖来进行缓存的。只有在响应式依赖发生改变时它们才会重新求值, 也就是说, 当msg属性值没有发生改变时, 多次访问 reversedMsg 计算属性会立即返回之前缓存的计算结果, 而不会再次执行computed中的函数。但是methods方法中是每次调用, 都会执行函数的, methods它不是响应式的。\n\n9. computed中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set变成可读写属性, 但是methods中的成员没有这样的。\n\n\n**侦听属性watch：**\n\n1.watch它是一个对data的数据监听回调, 当依赖的data的数据变化时, 会执行回调。在回调中会传入newVal和oldVal两个参数。Vue实列将会在实例化时调用$watch(), 他会遍历watch对象的每一个属性。watch的使用场景是：当在data中的某个数据发生变化时, 我们需要做一些操作, 或者当需要在数据变化时执行异步或开销较大的操作时. 我们就可以使用watch来进行监听。watch普通监听和深度监听不支持缓存，数据变，直接会触发相应的操作；\n\n2.watch里面有一个属性为deep，含义是：是否深度监听某个对象的值, 该值默认为false。watch支持异步；\n\n3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；\n\n4.当一个属性发生变化时，需要执行对应的操作；一对多；\n\n5.监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，\n\n**watch 和 computed的区别是：**\n\n相同点：他们两者都是观察页面数据变化的。\n\n不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。 watch每次都需要执行函数。watch更适用于数据变化时的异步操作。\n\n当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是和computed最大的区别，请勿滥用。\n",{"_58":704,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/277/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/277/timeline",{"_58":707,"_60":61,"_62":708,"_64":709,"_66":710,"_68":711,"_70":712,"_72":713,"_74":714,"_76":715,"_78":716,"_111":717,"_131":132,"_133":24,"_134":-5,"_135":726,"_137":727,"_159":152,"_153":729,"_155":730,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":731,"_170":732,"_176":733,"_178":734,"_190":736,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/276","https://api.github.com/repos/pro-collection/interview-question/issues/276/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/276/comments","https://api.github.com/repos/pro-collection/interview-question/issues/276/events","https://github.com/pro-collection/interview-question/issues/276",1662664081,"I_kwDOJGDC6c5jGj2R",276,"const 和 readonly 的区别",{"_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},[718,725],{"_70":719,"_72":720,"_58":721,"_117":722,"_119":723,"_121":24,"_122":724},5232527330,"LA_kwDOJGDC6c8AAAABN-IH4g","https://api.github.com/repos/pro-collection/interview-question/labels/TypeScript","TypeScript","258B51","TypeScript 语法部分",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":728,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-11T14:48:36Z","2023-04-11T14:48:37Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"TypeScript 中不可变量的实现方法有两种：\n\n使用 ES6 的 const 关键字声明的值类型\n被 readonly 修饰的属性\n2、TypeScript 中 readonly：\n\nTypeScript 中的只读修饰符，可以声明更加严谨的可读属性。通常在 interface 、 Class 、 type 以及 array 和 tuple 类型中使用它，也可以用来定义一个函数的参数。\n\n3、两者区别：\n\n（1）const 用于变量， readonly 用于属性\n\n（2）const 在运行时检查， readonly 在编译时检查\n\n（3）const 声明的变量不得改变值，这意味着，const 一旦声明变量，就必须立即初始化，不能留到以后赋值； \nreadonly 修饰的属性能确保自身不能修改属性，但是当你把这个属性交给其它并没有这种保证的使用者（允许出于类型兼容性的原因），他们能改变。\n```typescript\nconst foo: {\n readonly bar: number;\n} = {\n bar: 123\n};\nfunction iMutateFoo(foo: { bar: number }) {\n foo.bar = 456;\n}\niMutateFoo(foo);\nconsole.log(foo.bar); // 456\n```\n\n（4）const 保证的不是变量的值不得改动，而是变量指向的那个内存地址不得改动，例如使用 const 变量保存的数组，可以使用 push ， pop 等方法。\n但是如果使用 ReadonlyArray 声明的数组不能使用 push ， pop 等方法。\n\n\n",{"_58":735,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/276/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/276/timeline",{"_58":738,"_60":61,"_62":739,"_64":740,"_66":741,"_68":742,"_70":743,"_72":744,"_74":745,"_76":746,"_78":747,"_111":748,"_131":132,"_133":24,"_134":-5,"_135":751,"_137":752,"_159":152,"_153":754,"_155":755,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":756,"_170":757,"_176":758,"_178":759,"_190":761,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/275","https://api.github.com/repos/pro-collection/interview-question/issues/275/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/275/comments","https://api.github.com/repos/pro-collection/interview-question/issues/275/events","https://github.com/pro-collection/interview-question/issues/275",1662655424,"I_kwDOJGDC6c5jGhvA",275,"枚举和常量枚举的区别",{"_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},[749,750],{"_70":719,"_72":720,"_58":721,"_117":722,"_119":723,"_121":24,"_122":724},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":753,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-11T14:44:32Z","2023-04-11T14:44:33Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"枚举和常量枚举（const枚举）：使用枚举可以清晰地表达意图或创建一组有区别的用例\n\n```typescript\n// 枚举\nenum Color { Red, Green, Blue }\n\n// 常量枚举\nconst enum Color { Red, Green, Blue }\n```\n\n区别：\n\n1. 枚举会被编译时会编译成一个对象，可以被当作对象使用\n\n```typescript\n// 枚举\nenum Color {\n Red,\n Green,\n Blue\n}\n\nvar sisterAn = Color.Red\n// 会被编译成 JavaScript 中的 var sisterAn = Color.Red\n// 即在运行执行时，它将会查找变量 Color 和 Color.Red\n```\n\n2. const 枚举会在 typescript 编译期间被删除，const 枚举成员在使用的地方会被内联进来，避免额外的性能开销\n\n```typescript\n// 常量枚举\nconst enum Color {\n Red,\n Green,\n Blue\n}\n\nvar sisterAn = Color.Red\n// 会被编译成 JavaScript 中的 var sisterAn = 0\n// 在运行时已经没有 Color 变量\n```\n\n由此可见，使用常量枚举会有更好的性能。\n\n定义的枚举，在经过编译器编译后是一个对象，这个对象我们可以在程序运行时使用，前面有说到。但有时定义枚举可能只是为了让程序可读性更好，而不需要编译后的代码，即不需要编译成对象。typescript中考虑到这种情况，所以加入了 const enum (完全嵌入的枚举)。\n\n\n",{"_58":760,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/275/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/275/timeline",{"_58":763,"_60":61,"_62":764,"_64":765,"_66":766,"_68":767,"_70":768,"_72":769,"_74":770,"_76":771,"_78":772,"_111":773,"_131":132,"_133":24,"_134":-5,"_135":776,"_137":777,"_159":195,"_153":779,"_155":780,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":781,"_170":782,"_176":783,"_178":784,"_190":786,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/273","https://api.github.com/repos/pro-collection/interview-question/issues/273/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/273/comments","https://api.github.com/repos/pro-collection/interview-question/issues/273/events","https://github.com/pro-collection/interview-question/issues/273",1659781732,"I_kwDOJGDC6c5i7kJk",273,"ts 中 type 和 interface的区别",{"_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},[774,775],{"_70":719,"_72":720,"_58":721,"_117":722,"_119":723,"_121":24,"_122":724},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":778,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T07:29:21Z","2023-08-06T07:44:59Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 相同点\n\n1. 都可以描述一个对象或者函数\n\n- interface\n\n```typescript\ninterface User {\n name: string\n age: number\n}\n\ninterface SetUser {\n (name: string, age: number): void;\n}\n```\n\n- ts\n\n```typescript\ntype User = {\n name: string\n age: number\n};\n\ntype SetUser = (name: string, age: number) => void;\n```\n\n2. 都允许拓展（extends） interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。\n\n### 差异点\n\n- **type**\n - type 可以声明基本类型别名，联合类型，元组等类型\n - type 语句中还可以使用 typeof 获取实例的类型进行赋值\n - 其他骚操作\n\n```typescript\ntype StringOrNumber = string | number;\ntype Text = string | { text: string };\ntype NameLookup = Dictionary;\ntype Callback = (data: T) => void;\ntype Pair = [T, T];\ntype Coordinates = Pair;\ntype Tree = T | { left: Tree, right: Tree };\n```\n\n- **interface**\n - interface 能够声明合并\n```typescript\ninterface User {\n name: string\n age: number\n}\n\ninterface User {\n sex: string\n}\n\n/*\nUser 接口为 {\n name: string\n age: number\n sex: string \n}\n*/\n```\n\n一般来说，如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果不能就用 type 。\n\n",{"_58":785,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/273/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/273/timeline",{"_58":788,"_60":61,"_62":789,"_64":790,"_66":791,"_68":792,"_70":793,"_72":794,"_74":795,"_76":796,"_78":797,"_111":798,"_131":132,"_133":24,"_134":-5,"_135":801,"_137":802,"_159":152,"_153":804,"_155":805,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":806,"_170":807,"_176":808,"_178":809,"_190":811,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/272","https://api.github.com/repos/pro-collection/interview-question/issues/272/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/272/comments","https://api.github.com/repos/pro-collection/interview-question/issues/272/events","https://github.com/pro-collection/interview-question/issues/272",1659780547,"I_kwDOJGDC6c5i7j3D",272,"[Vue] vue3 的响应式库是独立出来的，它单独使用的时候是什么效果",{"_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},[799,800],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":803,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T07:23:25Z","2023-04-09T07:23:26Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"vue3 的响应式库是独立出来的，它可以很方便的集成进 React，作为 React 的状态管理库使用！\n\n### 使用示范\n定义 store\n```typescript\n// store.ts\nimport { reactive, computed, effect } from '@vue/reactivity';\n\nexport const state = reactive({\n count: 0,\n});\n\nconst plusOne = computed(() => state.count + 1);\n\neffect(() => {\n console.log('plusOne changed: ', plusOne);\n});\n\nconst add = () => (state.count += 1);\n\nexport const mutations = {\n // mutation\n add,\n};\n\nexport const store = {\n state,\n computed: {\n plusOne,\n },\n};\n\nexport type Store = typeof store;\n```\n\n消费使用\n```js\n// Index.tsx\nimport { Provider, useStore } from 'rxv'\nimport { mutations, store, Store } from './store.ts'\nfunction Count() {\n const countState = useStore((store: Store) => {\n const { state, computed } = store;\n const { count } = state;\n const { plusOne } = computed;\n\n return {\n count,\n plusOne,\n };\n });\n\n return (\n \n

计数器

store中的count现在是 {countState.count}

computed值中的plusOne现在是 {countState.plusOne.value}

\n \n

\n \n );\n}\n\nexport default () => {\n return (\n \n \n \n );\n};\n```\n\n可以看出，store的定义只用到了@vue/reactivity，而rxv只是在组件中做了一层桥接，连通了Vue3和React，正如它名字的含义：React x Vue。\n\n### 如何实现\n只要effect能接入到React系统中，那么其他的api都没什么问题，因为它们只是去收集effect的依赖，去通知effect触发更新。\n\neffect接受的是一个函数，而且effect还支持通过传入schedule参数来自定义依赖更新的时候需要触发什么函数，\n\n而rxv的核心api: useStore接受的也是一个函数selector，它会让用户自己选择在组件中需要访问的数据。\n\n把selector包装在effect中执行，去收集依赖。\n\n指定依赖发生更新时，需要调用的函数是当前正在使用useStore的这个组件的forceUpdate强制渲染函数。\n\n简单的看一下核心实现\n\nshare.ts\n```typescript\nexport const useForceUpdate = () => {\n const [, forceUpdate] = useReducer(s => s + 1, 0);\n return forceUpdate;\n};\n\nexport const useEffection = (...effectArgs: Parameters) => {\n // 用一个ref存储effection\n // effect函数只需要初始化执行一遍\n const effectionRef = useRef();\n if (!effectionRef.current) {\n effectionRef.current = effect(...effectArgs);\n }\n\n // 卸载组件后取消effect\n const stopEffect = () => {\n stop(effectionRef.current!);\n };\n useEffect(() => stopEffect, []);\n\n return effectionRef.current\n};\n```\n\n核心逻辑在此\n```typescript\nimport React, { useContext } from 'react';\nimport { useForceUpdate, useEffection } from './share';\n\ntype Selector = (store: T) => S;\n\nconst StoreContext = React.createContext(null);\n\nconst useStoreContext = () => {\n const contextValue = useContext(StoreContext);\n if (!contextValue) {\n throw new Error(\n 'could not find store context value; please ensure the component is wrapped in a ',\n );\n }\n return contextValue;\n};\n\n/**\n * 在组件中读取全局状态\n * 需要通过传入的函数收集依赖\n */\nexport const useStore = (selector: Selector): S => {\n const forceUpdate = useForceUpdate();\n const store = useStoreContext();\n\n const effection = useEffection(() => selector(store), {\n scheduler: job => {\n if (job() === undefined) return;\n forceUpdate();\n },\n lazy: true,\n });\n\n const value = effection();\n return value;\n};\n\nexport const Provider = StoreContext.Provider;\n```\n\n参考文档：\n- https://github.com/sl1673495/react-composition-api\n- https://juejin.cn/post/6844904054192078855\n",{"_58":810,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/272/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/272/timeline",{"_58":813,"_60":61,"_62":814,"_64":815,"_66":816,"_68":817,"_70":818,"_72":819,"_74":820,"_76":821,"_78":822,"_111":823,"_131":132,"_133":24,"_134":-5,"_135":826,"_137":827,"_159":152,"_153":829,"_155":830,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":831,"_170":832,"_176":833,"_178":834,"_190":836,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/271","https://api.github.com/repos/pro-collection/interview-question/issues/271/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/271/comments","https://api.github.com/repos/pro-collection/interview-question/issues/271/events","https://github.com/pro-collection/interview-question/issues/271",1659775681,"I_kwDOJGDC6c5i7irB",271,"[Vue] Vue3 的响应式原理?",{"_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},[824,825],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":259,"_68":260,"_62":261,"_70":262,"_72":263,"_74":264,"_76":265,"_122":266,"_147":828,"_149":268,"_151":152,"_131":132,"_153":269,"_155":270,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T07:02:57Z","2023-04-09T07:02:58Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 该话题涉及的相关内容\n\n- 原理：Proxy、track、trigger\n- 新增属性\n- 遍历后新增\n- 遍历后删除或者清空\n- 获取 keys\n- 删除对象属性\n- 判断属性是否存在\n- 性能\n\n推荐阅读文档： https://juejin.cn/post/6844904122479542285\n\n### 响应式仓库\n\nVue3 不同于 Vue2 也体现在源码结构上，Vue3 把耦合性比较低的包分散在 `packages` 目录下单独发布成 `npm` 包。这也是目前很流行的一种大型项目管理方式 `Monorepo`。\n\n其中负责响应式部分的仓库就是 `@vue/reactivity`，它不涉及 Vue 的其他的任何部分，是非常非常「正交」的一种实现方式。\n\n甚至可以`轻松的集成进 React` https://juejin.cn/post/6844904095594381325\n\n### 区别\n\nProxy 和 Object.defineProperty 的使用方法看似很相似，其实 Proxy 是在「更高维度」上去拦截属性的修改的，怎么理解呢？\n\nVue2 中，对于给定的 data，如 `{ count: 1 }`，是需要根据具体的 key 也就是 `count`，去对「修改 data.count 」和「读取 data.count」进行拦截，也就是\n\n```javascript\nObject.defineProperty(data, 'count', {\n get() {},\n set() {},\n})\n```\n\n必须预先知道要拦截的 key 是什么，这也就是为什么 Vue2 里对于对象上的新增属性无能为力。\n\n而 Vue3 所使用的 Proxy，则是这样拦截的：\n\n```javascript\nnew Proxy(data, {\n get(key) { },\n set(key, value) { },\n})\n\n```\n\n可以看到，根本不需要关心具体的 key，它去拦截的是「修改 data 上的任意 key」和「读取 data 上的任意 key」。\n\n所以，不管是已有的 key 还是新增的 key，都逃不过它的魔爪。\n\n但是 Proxy 更加强大的地方还在于 Proxy 除了 get 和 set，还可以拦截更多的操作符。\n\n### 简单的例子🌰\n\n先写一个 Vue3 响应式的最小案例，本文的相关案例都只会用 `reactive` 和 `effect` 这两个 api。如果你了解过 React 中的 `useEffect`，相信你会对这个概念秒懂，Vue3 的 `effect` 不过就是去掉了手动声明依赖的「进化版」的 `useEffect`。\n\nReact 中手动声明 `[data.count]` 这个依赖的步骤被 Vue3 内部直接做掉了，在 `effect` 函数内部读取到 `data.count` 的时候，它就已经被收集作为依赖了。\n\nVue3：\n\n```kotlin\n// 响应式数据\nconst data = reactive({\n count: 1\n})\n\n// 观测变化\neffect(() => console.log('count changed', data.count))\n\n// 触发 console.log('count changed', data.count) 重新执行\ndata.count = 2\n\n```\n\nReact：\n\n```scss\n// 数据\nconst [data, setData] = useState({\n count: 1\n})\n\n// 观测变化需要手动声明依赖\nuseEffect(() => {\n console.log('count changed', data.count)\n}, [data.count])\n\n// 触发 console.log('count changed', data.count) 重新执行\nsetData({\n count: 2\n})\n\n```\n\n也可以把 `effect` 中的回调函数联想到视图的重新渲染、 watch 的回调函数等等…… 它们是同样基于这套响应式机制的。\n\n而本文的核心目的，就是探究这个基于 Proxy 的 reactive api，到底能强大到什么程度，能监听到用户对于什么程度的修改。\n\n### 讲讲原理\n\n先最小化的讲解一下响应式的原理，其实就是在 Proxy 第二个参数 `handler` 也就是陷阱操作符中，拦截各种取值、赋值操作，依托 `track` 和 `trigger` 两个函数进行依赖收集和派发更新。\n\n`track` 用来在读取时收集依赖。\n\n`trigger` 用来在更新时触发依赖。\n\n### track\n\n```vbnet\nfunction track(target: object, type: TrackOpTypes, key: unknown) {\n const depsMap = targetMap.get(target);\n // 收集依赖时通过 key 建立一个 set\n let dep = new Set()\n targetMap.set(ITERATE_KEY, dep)\n // 这个 effect 可以先理解为更新函数存放在 dep 里\n dep.add(effect)\n}\n\n```\n\n`target` 是原对象。\n\n`type` 是本次收集的类型，也就是收集依赖的时候用来标识是什么类型的操作，比如上文依赖中的类型就是 `get`，这个后续会详细讲解。\n\n`key` 是指本次访问的是数据中的哪个 key，比如上文例子中收集依赖的 key 就是 `count`\n\n首先全局会存在一个 `targetMap`，它用来建立 `数据 -> 依赖` 的映射，它是一个 WeakMap 数据结构。\n\n而 `targetMap` 通过数据 `target`，可以获取到 `depsMap`，它用来存放这个数据对应的所有响应式依赖。\n\n`depsMap` 的每一项则是一个 Set 数据结构，而这个 Set 就存放着对应 key 的更新函数。\n\n是不是有点绕？我们用一个具体的例子来举例吧。\n\n```ini\nconst target = { count: 1}\nconst data = reactive(target)\n\nconst effection = effect(() => {\n console.log(data.count)\n})\n\n```\n\n对于这个例子的依赖关系，\n\n1. 全局的 `targetMap` 是：\n\n```js\ntargetMap: {\n { count: 1 }: dep\n}\n\n```\n\n2. dep 则是\n\n```js\ndep: {\n count: Set { effection }\n}\n\n```\n\n这样一层层的下去，就可以通过 `target` 找到 `count` 对应的更新函数 `effection` 了。\n\n### trigger\n\n这里是最小化的实现，仅仅为了便于理解原理，实际上要复杂很多，\n\n其实 `type` 的作用很关键，先记住，后面会详细讲。\n\n```typescript\nexport function trigger(\n target: object,\n type: TriggerOpTypes,\n key?: unknown,\n) {\n // 简化来说就是通过 key 找到所有更新函数依次执行\n const dep = targetMap.get(target)\n dep.get(key).forEach(effect => effect())\n}\n```\n",{"_58":835,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/271/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/271/timeline",{"_58":838,"_60":61,"_62":839,"_64":840,"_66":841,"_68":842,"_70":843,"_72":844,"_74":845,"_76":846,"_78":847,"_111":848,"_131":132,"_133":24,"_134":-5,"_135":851,"_137":852,"_159":152,"_153":854,"_155":855,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":856,"_170":857,"_176":858,"_178":859,"_190":861,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/270","https://api.github.com/repos/pro-collection/interview-question/issues/270/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/270/comments","https://api.github.com/repos/pro-collection/interview-question/issues/270/events","https://github.com/pro-collection/interview-question/issues/270",1659768390,"I_kwDOJGDC6c5i7g5G",270,"小程序的大概原理?",{"_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},[849,850],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":853,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T06:30:09Z","2023-04-09T06:30:10Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"具体流程可以看下面这个图：\n![](https://foruda.gitee.com/images/1681021603016376642/cc6178f0_7819612.png)\n\n要了解小程序架构原理，要从以下几个方面入手探索\n- 宿主环境\n- 执行环境\n- 小程序整体架构\n- 运行机制\n- 更新机制\n- 数据通信机制\n- 登录机制\n- 性能方向问题\n- JSCore\n\n具体内容可以参考文档:\n- https://juejin.cn/post/6976805521407868958\n",{"_58":860,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/270/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/270/timeline",{"_58":863,"_60":61,"_62":864,"_64":865,"_66":866,"_68":867,"_70":868,"_72":869,"_74":870,"_76":871,"_78":872,"_111":873,"_131":132,"_133":24,"_134":-5,"_135":876,"_137":877,"_159":152,"_153":879,"_155":880,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":881,"_170":882,"_176":883,"_178":884,"_190":886,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/269","https://api.github.com/repos/pro-collection/interview-question/issues/269/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/269/comments","https://api.github.com/repos/pro-collection/interview-question/issues/269/events","https://github.com/pro-collection/interview-question/issues/269",1659765940,"I_kwDOJGDC6c5i7gS0",269,"前端路由的实现原理",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[874,875],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":259,"_68":260,"_62":261,"_70":262,"_72":263,"_74":264,"_76":265,"_122":266,"_147":878,"_149":268,"_151":152,"_131":132,"_153":269,"_155":270,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-09T06:18:33Z","2023-04-09T06:18:34Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"在使用Vue、React等前端框架时，我们都会发现项目中只有一个HTML文件，并且在该HTML中都存在一个根标签，起到了类似于容器的作用。容器内部的内容就由我们后续编写的每个视图决定，页面的切换就是容器中视图的切换。\n\n前端路由的实现原理简单来说，就是在不跳转或者刷新页面的前提下，为SPA应用中的每个视图匹配一个特殊的URL，之后的刷新、前进、后退等操作均通过这个特殊的URL实现。为实现上述要求，需要满足：\n\n改变URL且不会向服务器发起请求；\n\n可以监听到URL的变化，并渲染与之匹配的视图。\n\n主要有Hash路由和History路由两种实现方式。下文对两者的基本原理进行简单介绍，并分别实现了一个简易的路由Demo。\n\n### Hash路由\n原理就是通过键值对的形式保存路由及对应要执行的回调函数，当监听到页面hash发生改变时，根据最新的hash值调用注册好的回调函数，即改变页面。\n\n#### 创建路由\n```js\nclass Routers{\n constructor(){\n // 保存路由信息\n this.routes = {};\n this.currentUrl = '';\n window.addEventListener('load', this.refresh, false);\n window.addEventListener('hashchange', this.refresh, false);\n }\n\n // 用于注册路由的函数\n route = (path, callback) => {\n this.routes[path] = callback || function(){};\n }\n\n // 监听事件的回调，负责当页面hash改变时执行对应hash值的回调函数\n refresh = () => {\n this.currentUrl = location.hash.slice(1) || '/';\n this.routes[this.currentUrl]();\n }\n}\n\nwindow.Router = new Routers();\n```\n\n#### 注册路由\n使用route方法添加对应的路由及其回调函数即可。以下代码实现了一个根据不同hash改变页面颜色的路由，模拟了页面的切换，在实际的SPA应用中，对应的就是页面内容的变化了。\n\n```js\nvar content = document.querySelector('body');\n\nfunction changeBgColor(color){\n content.style.background = color;\n}\n\n// 添加路由\nRouter.route('/', () => {\n changeBgColor('yellow');\n});\nRouter.route('/red', () => {\n changeBgColor('red');\n});\nRouter.route('/green', () => {\n changeBgColor('green');\n});\nRouter.route('/blue', () => {\n changeBgColor('blue');\n});\n```\n\n\n### History路由\n在H5之前，浏览器的history仅支持页面之前的跳转，包括前进和后退等功能。\n\n在HTML5中，新增以下API：\n```js\nhistory.pushState();\t\t\t// 添加新状态到历史状态栈\nhistory.replaceState();\t\t// 用新状态代替当前状态\nhistory.state;\t\t\t\t\t\t// 获取当前状态对象\n```\n\nhistory.pushState()和history.replaceState()均接收三个参数：\n\n- state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。\n- title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。\n- url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址\n\n由于history.pushState()和 history.replaceState()都具有在改变页面URL的同时，不刷新页面的能力，因此也可以用来实现前端路由。\n\n#### 创建路由类\n```js\nclass Routers{\n constructor(){\n this.routes = {};\n window.addEventListener('popstate', e => {\n const path = e.state && e.state.path;\n this.routes[path] && this.routes[path]();\n })\n }\n\n init(path){\n history.replaceState({path: path}, null, path);\n this.routes[path] && this.routes[path]();\n }\n\n route(path, callback){\n this.routes[path] = callback || function(){};\n }\n\n go(path){\n history.pushState({path: path}, null, path);\n this.routes[path] && this.routes[path]();\n }\n}\n\nwindow.Router = new Routers();\n```\n\n\n#### 注册路由\n```js\nfunction changeBgColor(color){\n content.style.background = color;\n}\n\nRouter.route(location.pathname, () => {\n changeBgColor('yellow');\n});\nRouter.route('/red', () => {\n changeBgColor('red');\n});\nRouter.route('/green', () => {\n changeBgColor('green');\n});\nRouter.route('/blue', () => {\n changeBgColor('blue');\n});\n\nconst content = document.querySelector('body');\nRouter.init(location.pathname);\n```\n\n\n#### 触发事件\n在使用hash实现的路由中，我们通过hashchange事件来监听hash的变化，但是上述代码中history的改变本身不会触发任何事件，因此无法直接监听history的改变来改变页面。因此，对于不同的情况，我们选择不同的解决方案：\n\n- 点击浏览器的前进或者后退按钮：监听popstate事件，获取相应路径并执行回调函数\n- 点击a标签：阻止其默认行为，获取其href属性，手动调用history.pushState()，并执行相应回调。\n\n```js\nconst ul = document.querySelector('ul');\n\nul.addEventListener('click', e => {\n if(e.target.tagName === 'A'){\n e.preventDefault();\n Router.go(e.target.getAttribute('href'));\n }\n})\n```\n\n### 对比\n基于hash的路由：\n\n缺点：\n- 看起来比较丑\n- 会导致锚点功能失效\n\n优点： \n- 兼容性更好\n- 无需服务器配合\n",{"_58":885,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/269/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/269/timeline",{"_58":888,"_60":61,"_62":889,"_64":890,"_66":891,"_68":892,"_70":893,"_72":894,"_74":895,"_76":896,"_78":897,"_111":898,"_131":132,"_133":24,"_134":-5,"_135":901,"_137":902,"_159":152,"_153":904,"_155":905,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":906,"_170":907,"_176":908,"_178":909,"_190":911,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/261","https://api.github.com/repos/pro-collection/interview-question/issues/261/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/261/comments","https://api.github.com/repos/pro-collection/interview-question/issues/261/events","https://github.com/pro-collection/interview-question/issues/261",1659556289,"I_kwDOJGDC6c5i6tHB",261,"[Vue] 使用Proxy实现简易的vue双向数据绑定",{"_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},[899,900],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":259,"_68":260,"_62":261,"_70":262,"_72":263,"_74":264,"_76":265,"_122":266,"_147":903,"_149":268,"_151":152,"_131":132,"_153":269,"_155":270,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-08T15:28:09Z","2023-04-08T15:28:10Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### proxy 的基本使用\n可以直接看这个链接： https://github.com/pro-collection/interview-question/issues/8\n\n使用proxy实现数据劫持\n```js\nlet data = {\n name: YoLinDeng,\n height: '176cm'\n}\n\nconst p = new Proxy(data, {\n get(target, prop) {\n return Reflect.get(...arguments)\n },\n set(target, prop, newValue) {\n return Reflect.set(...arguments)\n }\n})\n```\n\n\n### 关于vue中数据响应式的原理\n\n#### 对数据进行侦测\n\n* 在vue2.X中，实现一个`observe`类，对于对象数据，通过`Object.defineProperty`来劫持对象的属性，实现`getter`和`setter`方法，这样就可以在getter的时候知道谁（订阅者）读取了数据，即谁依赖了当前的数据，将它通过`Dep类`（订阅器）收集统一管理，在setter的时候调用Dep类中的`notify`方法通知所以相关的订阅者进行更新视图。如果对象的属性也是一个对象的话，则需要递归调用`observe`进行处理。\n* 对于数组则需要另外处理，通过实现一个拦截器类，并将它挂载到数组数据的原型上，当调用`push/pop/shift/unshift/splice/sort/reverse`修改数组数据时候，相当于调用的是拦截器中重新定义的方法，这样在拦截器中就可以侦测到数据改变了，并通知订阅者更新视图。\n* vue3中使用Proxy替代了Object.defineProperty，优点在于可以直接监听对象而非属性、可以直接监听数组的变化、多达13种拦截方法。缺点是兼容性还不够好。Proxy作为新标准将受到浏览器厂商重点持续的性能优化。\n\n#### 对模板字符串进行编译\n\n* 实现Compile解析器类，将`template`中的模板字符串通过正则等方式进行处理生成对应的ast（抽象语法树），通过调用定义的不同钩子函数进行处理，包括开始标签（`start`）并判断是否自闭和以及解析属性、结束标签（`end`）、文本（`chars`）、注释（`comment`）\n* 将通过html解析与文本解析的ast进行优化处理，在静态节点上打标记，为后面`dom-diff`算法中性能优化使用，即在对比前后vnode的时候会跳过静态节点不作对比。\n* 最后根据处理好的ast生产`render`函数，在组件挂载的时候调用`render`函数就可以得到虚拟dom。\n\n#### 虚拟dom\n\n* vnode的类型包括注释节点、文本节点、元素节点、组件节点、函数式组件节点、克隆节点，`VNode`可以描述的多种节点类型，它们本质上都是`VNode`类的实例，只是在实例化的时候传入的属性参数不同而已。\n* 通过将模板字符串编译生成虚拟dom并缓存起来，当数据发生变化时，通过对比变化前后虚拟dom，以变化后的虚拟dom为基准，更新旧的虚拟dom，使它和新的一样。把dom-diff过程叫做`patch`的过程，其主要做了三件事，分别是创建/删除/更新节点。\n* 对于子节点的更新策略，vue中为了避免双重循环数据量大时候造成时间复杂度高带来的性能问题，而选择先从子节点数组中4个特殊位置进行对比，分别是：新前与旧前，新后与旧后，新后与旧前，新前与旧后。如果四种情况都没有找到相同的节点，则再通过循环方式查找。\n\n### 实现简易的vue双向数据绑定\nvue的双向数据绑定主要是指，数据变化更新视图变化，视图变化更新数据。 \n\n**实现代码如下**\n```handlebars\n\n\n\n \n \n Document\n \n\n\n

\n {{name}}\n

\n \n {{test}}\n

\n \n\n\n```\n\n```js\nclass vue extends EventTarget {\n constructor(option) {\n super()\n this.option = option\n this._data = this.option.data\n this.el = document.querySelector(this.option.el)\n this.compileNode(this.el)\n this.observe(this._data)\n }\n // 实现监听器方法\n observe(data) {\n const context = this\n // 使用proxy代理，劫持数据\n this._data = new Proxy(data, {\n set(target, prop, newValue) {\n // 自定义事件\n let event = new CustomEvent(prop, {\n detail: newValue\n })\n // 发布自定义事件\n context.dispatchEvent(event)\n return Reflect.set(...arguments)\n }\n })\n }\n // 实现解析器方法，解析模板\n compileNode(el) {\n let child = el.childNodes\n let childArr = [...child]\n childArr.forEach(node => {\n if (node.nodeType === 3) {\n let text = node.textContent\n let reg = /\\{\\{\\s*([^\\s\\{\\}]+)\\s*\\}\\}/g\n if (reg.test(text)) {\n let $1 = RegExp.$1\n this._data[$1] && (node.textContent = text.replace(reg, this._data[$1]))\n // 监听数据更改事件\n this.addEventListener($1, e => {\n node.textContent = text.replace(reg, e.detail)\n })\n }\n } else if (node.nodeType === 1) { // 如果是元素节点\n let attr = node.attributes\n // 判断属性中是否含有v-model\n if (attr.hasOwnProperty('v-model')) {\n let keyName = attr['v-model'].nodeValue\n node.value = this._data[keyName]\n node.addEventListener('input', e => {\n this._data[keyName] = node.value\n })\n }\n // 递归调用解析器方法\n this.compileNode(node)\n }\n })\n }\n}\n```\n\n",{"_58":910,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/261/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/261/timeline",{"_58":913,"_60":61,"_62":914,"_64":915,"_66":916,"_68":917,"_70":918,"_72":919,"_74":920,"_76":921,"_78":922,"_111":923,"_131":132,"_133":24,"_134":-5,"_135":926,"_137":927,"_159":152,"_153":929,"_155":930,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":931,"_170":932,"_176":933,"_178":934,"_190":936,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/242","https://api.github.com/repos/pro-collection/interview-question/issues/242/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/242/comments","https://api.github.com/repos/pro-collection/interview-question/issues/242/events","https://github.com/pro-collection/interview-question/issues/242",1650979765,"I_kwDOJGDC6c5iZ_O1",242,"[Redux] react-redux 是如何更新到 UI 的, 写一下这部分的核心源码",{"_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},[924,925],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":218,"_68":219,"_62":220,"_70":221,"_72":222,"_74":223,"_76":224,"_122":225,"_147":928,"_149":227,"_151":152,"_131":132,"_153":228,"_155":229,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-02T14:58:02Z","2023-04-02T14:58:03Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### react-redux 和 redux 的关系\n\nRedux 和 React-Redux 是两个独立的库，但它们通常一起使用，因为 Redux 库本身并不针对 React，而是一个通用的状态管理库，而 React-Redux 则是一个用于将 Redux 集成到 React 应用程序中的库。\n\nReact-Redux 提供了一组 React 组件和钩子，使得在 React 应用程序中使用 Redux 变得更加容易。它提供了一个 `Provider` 组件，可以将 Redux store 注入到整个 React 应用程序中，并且可以使用 `connect` 函数将组件连接到 Redux store，使它们可以访问和修改 store 中的数据。\n\n使用 React-Redux，我们可以将 Redux 的状态管理能力与 React 的组件化能力结合起来，使得应用程序的状态可以很方便地被管理和共享，并且组件也可以方便地访问和修改应用程序的状态。\n\n### react-redux 是如何集成到 UI 的？\n\n`react-redux` 提供了两个主要的组件 `Provider` 和 `connect`，它们用于将 Redux 状态管理与 React 组件相结合。\n\n首先，使用 `Provider` 组件将 Redux store 传递给整个应用程序。可以将 `` 组件作为最高层的组件，这样在应用程序中的所有组件中都可以访问到 Redux store。\n\n下一步，使用 `connect` 函数连接 Redux store 和组件。`connect` 函数是一个高阶函数，它接收两个参数：`mapStateToProps` 和 `mapDispatchToProps`，并返回另一个函数，这个函数接受一个组件作为参数，并返回一个增强版的组件。\n\n`mapStateToProps` 函数用于从 Redux store 中获取需要的 state 数据，并将其映射到组件的 props 上。`mapDispatchToProps` 函数用于将 action creator 映射到组件的 props 上，这样组件就可以直接调用 action creator 发起 action，而不需要手动分发 dispatch。\n\n使用 `connect` 函数生成的增强版组件可以访问到 Redux store 中的 state 和 dispatch，并将它们作为 props 传递给原始组件。在组件中，可以直接使用这些 props 来获取和更新 state，以及发起 action。当组件中的 state 或 props 发生变化时，`connect` 函数会自动更新组件，以反映最新的 state 和 props。\n\n通过这种方式，`react-redux` 让我们可以在 React 组件中使用 Redux 进行状态管理，实现了 Redux 和 React 的无缝集成。\n\n### 简单写一下更新 UI 核心代码实现\n\nreact-redux 是基于 React 和 Redux 的，主要用于将 Redux 的状态管理功能集成到 React 应用程序中。它主要包括两个部分：Provider 和 connect。\n\nProvider 组件是 react-redux 的核心，它将 Redux 的 store 作为 props 传递给 React 组件，并通过 React 的上下文（Context）使得后代组件能够访问到 store。\n\nconnect 函数用于连接 React 组件与 Redux store，返回一个新的组件。该函数的主要作用是在组件中提供 mapStateToProps 和 mapDispatchToProps 函数，从而使组件能够从 Redux store 中读取数据，并向 store 分发 action。\n\n下面是一个简单的实现，用于说明 react-redux 是如何集成到 UI 的：\n\n```javascript\n// Provider.js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nexport const StoreContext = React.createContext();\n\nexport default function Provider(props) {\n const { store, children } = props;\n return (\n \n {children}\n \n );\n}\n\nProvider.propTypes = {\n store: PropTypes.object.isRequired,\n children: PropTypes.any,\n};\n\n// connect.js\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { StoreContext } from './Provider';\n\nexport default function connect(mapStateToProps, mapDispatchToProps) {\n return function wrapWithConnect(WrappedComponent) {\n class Connect extends React.Component {\n componentDidMount() {\n const { store } = this.context;\n this.unsubscribe = store.subscribe(this.handleChange.bind(this));\n }\n\n componentWillUnmount() {\n this.unsubscribe();\n }\n\n handleChange() {\n this.forceUpdate();\n }\n\n render() {\n const { store } = this.context;\n const props = {\n ...this.props,\n ...mapStateToProps(store.getState(), this.props),\n ...mapDispatchToProps(store.dispatch, this.props),\n };\n return ;\n }\n }\n\n Connect.contextType = StoreContext;\n Connect.propTypes = {\n store: PropTypes.object,\n };\n Connect.displayName = `Connect(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;\n\n return Connect;\n };\n}\n```\n\n这里的 Provider 组件用于将 Redux 的 store 传递给 React 组件：\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { createStore } from 'redux';\nimport { Provider } from 'react-redux';\nimport App from './App';\nimport rootReducer from './reducers';\n\nconst store = createStore(rootReducer);\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n```\n\n而 connect 函数用于将 React 组件连接到 Redux store：\n\n```javascript\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { increment } from './actions';\n\nfunction Counter(props) {\n const { count, increment } = props;\n return (\n

Count: {count}

\n \n

\n );\n}\n\nconst mapStateToProps = state => {\n return {\n count: state.count,\n };\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n increment: () => dispatch(increment()),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Counter);\n```\n",{"_58":935,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/242/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/242/timeline",{"_58":938,"_60":61,"_62":939,"_64":940,"_66":941,"_68":942,"_70":943,"_72":944,"_74":945,"_76":946,"_78":947,"_111":948,"_131":132,"_133":24,"_134":-5,"_135":951,"_137":952,"_159":152,"_153":954,"_155":955,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":956,"_170":957,"_176":958,"_178":959,"_190":961,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/241","https://api.github.com/repos/pro-collection/interview-question/issues/241/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/241/comments","https://api.github.com/repos/pro-collection/interview-question/issues/241/events","https://github.com/pro-collection/interview-question/issues/241",1650975637,"I_kwDOJGDC6c5iZ-OV",241,"[Redux] 简单实现一下核心源码",{"_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},[949,950],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":259,"_68":260,"_62":261,"_70":262,"_72":263,"_74":264,"_76":265,"_122":266,"_147":953,"_149":268,"_151":152,"_131":132,"_153":269,"_155":270,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-02T14:46:40Z","2023-04-02T15:04:35Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"实现 Redux 的源码主要包括以下几个步骤：\r\n\r\n1. 实现 createStore 函数，创建 store 对象，该函数接收一个 reducer 函数作为参数，返回一个对象。\r\n2. 在 createStore 函数内部，定义一个 state 变量来存储当前的状态值，定义一个 listeners 数组来存储所有的监听函数。\r\n3. 实现 getState 方法，返回当前的状态值。\r\n4. 实现 dispatch 方法，接收一个 action 对象作为参数，将当前的状态值和 action 对象传给 reducer 函数，更新状态值。然后遍历 listeners 数组，调用所有的监听函数。\r\n5. 实现 subscribe 方法，接收一个监听函数作为参数，将该函数添加到 listeners 数组中，以便在状态更新时调用。\r\n6. 实现 combineReducers 函数，将多个 reducer 函数合并成一个 reducer 函数。\r\n7. 在 createStore 函数内部，将传入的 reducer 函数或者合并后的 reducer 函数赋值给一个内部的 currentReducer 变量。\r\n8. 在 dispatch 方法内部，将 currentReducer 赋值给一个局部变量，以保证在 reducer 函数中调用 dispatch 方法时可以获取到最新的 reducer 函数。\r\n\r\n下面是代码实现：\r\n\r\n```javascript\r\n// 实现 createStore 函数\r\nfunction createStore(reducer) {\r\n let state;\r\n const listeners = [];\r\n\r\n function getState() {\r\n return state;\r\n }\r\n\r\n function dispatch(action) {\r\n state = reducer(state, action);\r\n for (let i = 0; i < listeners.length; i++) {\r\n listeners[i]();\r\n }\r\n }\r\n\r\n function subscribe(listener) {\r\n listeners.push(listener);\r\n }\r\n\r\n dispatch({});\r\n\r\n return {\r\n getState,\r\n dispatch,\r\n subscribe\r\n };\r\n}\r\n\r\n// 实现 combineReducers 函数\r\nfunction combineReducers(reducers) {\r\n return function(state = {}, action) {\r\n const nextState = {};\r\n for (const key in reducers) {\r\n nextState[key] = reducers[key](state[key], action);\r\n }\r\n return nextState;\r\n };\r\n}\r\n```\r\n\r\n在使用时，可以先定义 reducer 函数：\r\n\r\n```javascript\r\nfunction todos(state = [], action) {\r\n switch (action.type) {\r\n case \"ADD_TODO\":\r\n return [\r\n ...state,\r\n {\r\n id: action.id,\r\n text: action.text,\r\n completed: false\r\n }\r\n ];\r\n case \"TOGGLE_TODO\":\r\n return state.map(todo =>\r\n todo.id === action.id ? { ...todo, completed: !todo.completed } : todo\r\n );\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nfunction visibilityFilter(state = \"SHOW_ALL\", action) {\r\n switch (action.type) {\r\n case \"SET_VISIBILITY_FILTER\":\r\n return action.filter;\r\n default:\r\n return state;\r\n }\r\n}\r\n```\r\n\r\n然后将它们传入 combineReducers 函数，创建一个 reducer 函数：\r\n\r\n```javascript\r\nconst reducer = combineReducers({\r\n todos,\r\n visibilityFilter\r\n});\r\n```\r\n\r\n最后调用 createStore 函数，创建一个 store 对象：\r\n\r\n```javascript\r\nconst store = createStore(reducer);\r\n```\r\n\r\n现在就可以使用 store 对象来获取状态值、派发 action、监听状态变化了。\r\n\r\n\r\n可以参考文档: https://juejin.cn/post/6844903785689546760",{"_58":960,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/241/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/241/timeline",{"_58":963,"_60":61,"_62":964,"_64":965,"_66":966,"_68":967,"_70":968,"_72":969,"_74":970,"_76":971,"_78":972,"_111":973,"_131":132,"_133":24,"_134":-5,"_135":976,"_137":977,"_159":152,"_153":979,"_155":980,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":981,"_170":982,"_176":983,"_178":984,"_190":986,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/240","https://api.github.com/repos/pro-collection/interview-question/issues/240/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/240/comments","https://api.github.com/repos/pro-collection/interview-question/issues/240/events","https://github.com/pro-collection/interview-question/issues/240",1650974107,"I_kwDOJGDC6c5iZ92b",240,"[Redux] 的存储过程",{"_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},[974,975],{"_70":250,"_72":251,"_58":252,"_117":253,"_119":254,"_121":24,"_122":255},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":978,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-02T14:42:37Z","2023-04-02T14:42:38Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"Redux 的存储过程可以简单地分为以下几个步骤：\n\n1. Action Creator 函数被调用，生成一个 Action 对象；\n2. Action 对象被传递给 Store.dispatch() 方法；\n3. Redux Store 调用 Reducer 函数，将当前的 State 和 Action 作为参数传入；\n4. Reducer 函数根据 Action 的类型，生成一个新的 State；\n5. Redux Store 将新的 State 存储下来，用于下一次的状态更新；\n6. 组件通过调用 Store.subscribe() 方法，监听 Store 中 State 的变化；\n7. 当 State 发生变化时，Store 会通知所有的订阅者，订阅者会重新渲染相应的组件。\n\n这个过程可以简单地描述为：Action -> Reducer -> Store -> View。其中，Action 是一个纯对象，它描述了发生的事件；Reducer 是一个纯函数，它接收当前的 State 和 Action，返回一个新的 State；Store 是将 Action 和 Reducer 结合起来的对象，它维护了应用程序的 State；View 则是 React 组件，它通过 Store.subscribe() 方法监听 State 的变化，根据 State 的变化重新渲染页面。",{"_58":985,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/240/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/240/timeline",{"_58":988,"_60":61,"_62":989,"_64":990,"_66":991,"_68":992,"_70":993,"_72":994,"_74":995,"_76":996,"_78":997,"_111":998,"_131":132,"_133":24,"_134":-5,"_135":1001,"_137":1002,"_159":152,"_153":1004,"_155":1005,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1006,"_170":1007,"_176":1008,"_178":1009,"_190":1011,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/239","https://api.github.com/repos/pro-collection/interview-question/issues/239/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/239/comments","https://api.github.com/repos/pro-collection/interview-question/issues/239/events","https://github.com/pro-collection/interview-question/issues/239",1648001921,"I_kwDOJGDC6c5iOoOB",239,"如何在前端团队快速落地代码规范",{"_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},[999,1000],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":259,"_68":260,"_62":261,"_70":262,"_72":263,"_74":264,"_76":265,"_122":266,"_147":1003,"_149":268,"_151":152,"_131":132,"_153":269,"_155":270,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-30T17:10:42Z","2023-03-31T01:22:24Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"// todo 待整理\r\n\r\n- https://juejin.cn/post/7033210664844066853\r\n- https://juejin.cn/post/7007419705543622669\r\n- https://juejin.cn/post/7167707693333872647\r\n- https://juejin.cn/post/6844904142289240071\r\n",{"_58":1010,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/239/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/239/timeline",{"_58":1013,"_60":61,"_62":1014,"_64":1015,"_66":1016,"_68":1017,"_70":1018,"_72":1019,"_74":1020,"_76":1021,"_78":1022,"_111":1023,"_131":132,"_133":24,"_134":-5,"_135":1026,"_137":1027,"_159":152,"_153":1029,"_155":1030,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1031,"_170":1032,"_176":1033,"_178":1034,"_190":1036,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/238","https://api.github.com/repos/pro-collection/interview-question/issues/238/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/238/comments","https://api.github.com/repos/pro-collection/interview-question/issues/238/events","https://github.com/pro-collection/interview-question/issues/238",1647970228,"I_kwDOJGDC6c5iOge0",238,"如何保证用户的使用体验",{"_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},[1024,1025],{"_70":448,"_72":449,"_58":450,"_117":451,"_119":452,"_121":24,"_122":453},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":259,"_68":260,"_62":261,"_70":262,"_72":263,"_74":264,"_76":265,"_122":266,"_147":1028,"_149":268,"_151":152,"_131":132,"_153":269,"_155":270,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-30T16:47:54Z","2023-03-30T16:47:55Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"【如何保证用户的使用体验】这个也是一个较为复杂的话题，这个也不是问题了，这个算是话题吧；\n\n主要从以下几个方面思考问题：\n\n1. 性能方向的思考\n\n2. 用户线上问题反馈，线上 on call 的思考\n\n3. 用户使用体验的思考，交互体验使用方向\n\n4. 提升用户能效方向思考\n",{"_58":1035,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/238/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/238/timeline","pagination",{"_1039":264,"_167":223},"value","actionData","errors"]