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","reactions",{"_54":170,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/242/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/242/timeline","performed_via_github_app","state_reason","score",1,{"_54":187,"_56":57,"_58":188,"_60":189,"_62":190,"_64":191,"_66":192,"_68":193,"_70":194,"_72":195,"_74":196,"_107":197,"_127":128,"_129":26,"_130":-5,"_131":200,"_133":201,"_155":148,"_149":214,"_151":215,"_154":-5,"_158":159,"_160":216,"_165":-5,"_166":217,"_168":218,"_180":220,"_182":-5,"_183":-5,"_184":185},"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] 简单实现一下核心源码",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[198,199],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":210,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},425,"2023-03-06T15:00:27Z","2025-02-10T16:49:33Z","2023-04-02T14:46:40Z","2023-04-02T15:04:35Z",{"_162":148,"_163":148,"_164":148},"实现 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",{"_54":219,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/241/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/241/timeline",{"_54":222,"_56":57,"_58":223,"_60":224,"_62":225,"_64":226,"_66":227,"_68":228,"_70":229,"_72":230,"_74":231,"_107":232,"_127":128,"_129":26,"_130":-5,"_131":235,"_133":236,"_155":148,"_149":249,"_151":250,"_154":-5,"_158":159,"_160":251,"_165":-5,"_166":252,"_168":253,"_180":255,"_182":-5,"_183":-5,"_184":185},"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] 的存储过程",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[233,234],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":245,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},491,"2023-03-06T15:00:15Z","2025-02-10T16:32:39Z","2023-04-02T14:42:37Z","2023-04-02T14:42:38Z",{"_162":148,"_163":148,"_164":148},"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 的变化重新渲染页面。",{"_54":254,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/240/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/240/timeline",{"_54":257,"_56":57,"_58":258,"_60":259,"_62":260,"_64":261,"_66":262,"_68":263,"_70":264,"_72":265,"_74":266,"_107":267,"_127":128,"_129":26,"_130":-5,"_131":270,"_133":271,"_155":148,"_149":273,"_151":274,"_154":-5,"_158":159,"_160":275,"_165":-5,"_166":276,"_168":277,"_180":279,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/217","https://api.github.com/repos/pro-collection/interview-question/issues/217/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/217/comments","https://api.github.com/repos/pro-collection/interview-question/issues/217/events","https://github.com/pro-collection/interview-question/issues/217",1644109965,"I_kwDOJGDC6c5h_yCN",217,"[Vue] 响应式原理中 Object.defineProperty 有什么缺陷",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[268,269],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":272,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-28T14:43:24Z","2024-04-13T14:00:17Z",{"_162":148,"_163":148,"_164":148},"Vue 2 中使用`Object.defineProperty`来实现其响应式系统存在一些限制和问题：\r\n\r\n1. **深度检测**：\r\n Vue 2中对于对象的处理是递归的；对于每个属性，Vue会逐层使用`Object.defineProperty`将其转换成 getter/setter。这样，当你访问或修改嵌套较深的属性时（如`a.b.c`），Vue已经提前将`a`、`a.b`和`a.b.c`的属性转换为响应式，能够追踪它们的变化。\r\n\r\n2. **数组限制**：\r\n `Object.defineProperty`无法检测到数组索引的变化，因此Vue重写了数组的变异方法（如`push`、`pop`、`splice`等）来实现对数组的响应式监听。\r\n\r\n3. **对象属性添加或删除的限制**：\r\n 因为`Object.defineProperty`只能在初始化的时候应用于属性，当你在一个已经创建的Vue实例上添加新属性时，这个新属性是非响应式的。如果你想要它是响应式的，需要使用`Vue.set()`或`this.$set()`方法添加新属性。\r\n\r\n4. **性能问题**：\r\n 因为`Object.defineProperty`是递归地对对象的每一个属性进行处理，所以在处理具有大量属性或深层嵌套对象时，可能会有较大的性能开销。\r\n\r\n关于处理`a.b.c`类型的属性，Vue 2内部会递归地遍历对象`a`的所有属性，为它们各自使用`Object.defineProperty`定义getter和setter。如果`b`是`a`的属性，那么同样会针对`b`做这样的处理，以及它的所有属性，包括`c`等。这样，在访问或修改`a.b.c`时，Vue可以追踪到这些变化并触发相关的更新。\r\n\r\n```javascript\r\nfunction defineReactive(obj, key, val) {\r\n Object.defineProperty(obj, key, {\r\n enumerable: true,\r\n configurable: true,\r\n get: function reactiveGetter() {\r\n // 依赖收集等操作\r\n return val;\r\n },\r\n set: function reactiveSetter(newVal) {\r\n if (newVal === val) return;\r\n val = newVal;\r\n // 触发更新视图等操作\r\n }\r\n });\r\n\r\n // 如果val本身还是对象，则递归处理\r\n if (typeof val === 'object') {\r\n reactive(val);\r\n }\r\n}\r\n\r\nfunction reactive(obj) {\r\n for (let key in obj) {\r\n defineReactive(obj, key, obj[key]);\r\n }\r\n}\r\n```\r\n\r\n在上面的`reactive`函数中，我们将一个对象转换成响应式对象。这是Vue内部实现响应式的简化版原理。不过，Vue的响应式系统要复杂得多，它还涉及依赖收集和派发更新等机制。",{"_54":278,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/217/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/217/timeline",{"_54":281,"_56":57,"_58":282,"_60":283,"_62":284,"_64":285,"_66":286,"_68":287,"_70":288,"_72":289,"_74":290,"_107":291,"_127":128,"_129":26,"_130":-5,"_131":293,"_133":294,"_155":148,"_149":296,"_151":297,"_154":-5,"_158":159,"_160":298,"_165":-5,"_166":299,"_168":300,"_180":302,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/215","https://api.github.com/repos/pro-collection/interview-question/issues/215/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/215/comments","https://api.github.com/repos/pro-collection/interview-question/issues/215/events","https://github.com/pro-collection/interview-question/issues/215",1644102532,"I_kwDOJGDC6c5h_wOE",215,"[Vue] 双向绑定和单向数据流原则是否冲突？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[292],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":295,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-28T14:39:19Z","2023-03-28T14:43:42Z",{"_162":148,"_163":148,"_164":148},"Vue 的双向绑定和单向数据流原则不冲突，因为它们是针对不同的场景和目的而提出的。\n\nVue 的双向绑定是指，在模板中通过 `v-model` 指令可以实现表单元素和组件数据之间的双向绑定，当表单元素的值发生变化时，组件数据也会同步更新；反过来，当组件数据发生变化时，表单元素的值也会同步更新。这种双向绑定的机制可以减少手动编写事件监听器的工作量，提高代码的可读性和可维护性。\n\n而单向数据流原则是指，在 Vue 应用中，数据的流动是单向的，即自上而下单向流动。父组件通过 props 把数据传递给子组件，子组件通过 $emit 事件把数据传递给父组件或者其他祖先组件。这种单向数据流的机制使得数据的变化更加可控和可预测，方便进行状态管理和调试。\n\n双向绑定和单向数据流原则虽然在实现机制上有所不同，但它们都是为了解决不同的问题和提高代码的可维护性和可读性。在实际开发中，可以根据实际情况选择合适的机制来使用。",{"_54":301,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/215/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/215/timeline",{"_54":304,"_56":57,"_58":305,"_60":306,"_62":307,"_64":308,"_66":309,"_68":310,"_70":311,"_72":312,"_74":313,"_107":314,"_127":128,"_129":26,"_130":-5,"_131":321,"_133":322,"_155":148,"_149":324,"_151":325,"_154":-5,"_158":159,"_160":326,"_165":-5,"_166":327,"_168":328,"_180":330,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/209","https://api.github.com/repos/pro-collection/interview-question/issues/209/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/209/comments","https://api.github.com/repos/pro-collection/interview-question/issues/209/events","https://github.com/pro-collection/interview-question/issues/209",1642284080,"I_kwDOJGDC6c5h40Qw",209,"[Redux] 为什么 Redux 的 reducer 中不能做异步操作？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[315,316],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":317,"_68":318,"_54":319,"_113":320,"_115":125,"_117":26,"_118":126},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":323,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-27T15:06:54Z","2023-03-27T15:06:55Z",{"_162":148,"_163":148,"_164":148},"Redux 的 reducer 是纯函数，它的作用是接收一个旧的状态和一个操作，返回一个新的状态，是一个纯粹的状态转换函数，因此在 reducer 中不能执行异步操作，否则会破坏 reducer 的纯函数特性。如果在 reducer 中执行异步操作，会导致 reducer 不可预测和不可重现，因为异步操作的结果是不确定的，而 reducer 必须保证在相同的输入条件下，产生相同的输出结果。同时，在 reducer 中执行异步操作可能会导致应用的状态不一致或者有延迟的问题。\n\n为了解决这个问题，Redux 提供了中间件的机制，比如 `redux-thunk`、`redux-saga` 等，可以在中间件中进行异步操作，然后再将异步操作的结果传递给 reducer 进行状态更新。这样就可以避免在 reducer 中执行异步操作，保证 reducer 的纯函数特性，同时也可以完成异步操作的需求。",{"_54":329,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/209/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/209/timeline",{"_54":332,"_56":57,"_58":333,"_60":334,"_62":335,"_64":336,"_66":337,"_68":338,"_70":339,"_72":340,"_74":341,"_107":342,"_127":128,"_129":26,"_130":-5,"_131":344,"_133":345,"_155":148,"_149":347,"_151":348,"_154":-5,"_158":159,"_160":349,"_165":-5,"_166":350,"_168":351,"_180":353,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/179","https://api.github.com/repos/pro-collection/interview-question/issues/179/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/179/comments","https://api.github.com/repos/pro-collection/interview-question/issues/179/events","https://github.com/pro-collection/interview-question/issues/179",1640821953,"I_kwDOJGDC6c5hzPTB",179,"[React] useEffect的第二个参数，如何判断依赖是否发生变化？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[343],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":346,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T08:36:21Z","2023-03-26T08:37:57Z",{"_162":148,"_163":148,"_164":148},"`useEffect`的第二个参数是一个依赖数组，用于判断副作用函数的依赖是否发生变化。React使用JavaScript的`Object.is`方法来判断依赖项是否发生变化。在比较依赖项时，React首先检查依赖项的值是否相等。如果依赖项的值是引用类型，React会比较它们的引用地址，而不是比较它们的属性值。因此，在比较引用类型时，即使对象具有相同的属性值，但它们的引用地址不同，React仍然认为它们是不同的。\n\n需要注意的是，如果依赖项是一个数组或对象，由于它们是引用类型，因此即使数组或对象中的元素或属性没有发生变化，但数组或对象本身的引用地址发生变化，也会导致React重新执行副作用函数。在这种情况下，我们可以使用`useCallback`和`useMemo`来缓存回调函数和计算结果，以便避免在依赖数组发生变化时重新计算和创建。",{"_54":352,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/179/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/179/timeline",{"_54":355,"_56":57,"_58":356,"_60":357,"_62":358,"_64":359,"_66":360,"_68":361,"_70":362,"_72":363,"_74":364,"_107":365,"_127":128,"_129":26,"_130":-5,"_131":367,"_133":368,"_155":148,"_149":370,"_151":371,"_154":-5,"_158":159,"_160":372,"_165":-5,"_166":373,"_168":374,"_180":376,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/178","https://api.github.com/repos/pro-collection/interview-question/issues/178/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/178/comments","https://api.github.com/repos/pro-collection/interview-question/issues/178/events","https://github.com/pro-collection/interview-question/issues/178",1640820151,"I_kwDOJGDC6c5hzO23",178,"[React] useRef、ref、forwardsRef 的区别是什么?",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[366],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":369,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T08:29:41Z","2023-03-26T08:36:50Z",{"_162":148,"_163":148,"_164":148},"在 React 中，`ref` 是一种用于访问 DOM 元素或组件实例的方法，`useRef` 和 `forwardRef` 是 `ref` 的两个相关 Hook 和高阶组件。\n\n1. `ref`：`ref` 是 React 中用于访问 DOM 元素或组件实例的方法。在函数组件中，可以使用 `useRef` Hook 来创建一个 `ref` 对象，然后将其传递给需要引用的元素或组件。在类组件中，可以直接在类中定义 `ref` 属性，并将其设置为元素或组件的实例。\n\n2. `useRef`：`useRef` 是 React 中的 Hook，用于创建一个 `ref` 对象，并在组件生命周期内保持其不变。`useRef` 可以用于访问 DOM 元素或组件实例，并且在每次渲染时都会返回同一个 `ref` 对象。通常情况下，`useRef` 更适合用于存储不需要触发重新渲染的值，例如定时器的 ID 或者其他副作用。\n\n3. `forwardRef`：`forwardRef` 是一个高阶组件，用于将 `ref` 属性转发给其子组件。通常情况下，如果一个组件本身并不需要使用 `ref` 属性，但是其子组件需要使用 `ref` 属性，那么可以使用 `forwardRef` 来传递 `ref` 属性。`forwardRef` 接受一个函数作为参数，并将 `ref` 对象作为第二个参数传递给该函数，然后返回一个新的组件，该组件接受 `ref` 属性并将其传递给子组件。\n\n简而言之，`ref` 是 React 中访问 DOM 元素或组件实例的方法，`useRef` 是一个 Hook，用于创建并保持一个不变的 `ref` 对象，`forwardRef` 是一个高阶组件，用于传递 `ref` 属性给子组件。",{"_54":375,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/178/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/178/timeline",{"_54":378,"_56":57,"_58":379,"_60":380,"_62":381,"_64":382,"_66":383,"_68":384,"_70":385,"_72":386,"_74":387,"_107":388,"_127":128,"_129":26,"_130":-5,"_131":390,"_133":391,"_155":207,"_149":393,"_151":394,"_154":-5,"_158":159,"_160":395,"_165":-5,"_166":396,"_168":397,"_180":399,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/173","https://api.github.com/repos/pro-collection/interview-question/issues/173/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/173/comments","https://api.github.com/repos/pro-collection/interview-question/issues/173/events","https://github.com/pro-collection/interview-question/issues/173",1640814488,"I_kwDOJGDC6c5hzNeY",173,"为什么小程序里拿不到dom相关的api",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[389],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":392,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T08:08:34Z","2023-09-19T07:16:43Z",{"_162":148,"_163":148,"_164":148},"小程序为了追求更高的性能和更好的安全性，采用了类Webview的渲染方案，并使用了自己的渲染引擎，与浏览器的渲染引擎不同。因此，小程序的API和浏览器的API并不完全相同。\r\n\r\n在小程序中，开发者可以使用WXML语言构建页面，WXML是一种类似HTML的标记语言，但并不是真正的HTML。小程序中的组件是由开发者提前定义好的，而不是由开发者在运行时动态生成的，因此在小程序中无法直接访问和操作DOM。相反，开发者需要使用小程序提供的API来操作组件。\r\n\r\n同时，小程序为了保证安全性，也限制了一些操作，如不允许使用eval函数和Function构造函数等动态生成代码的方式。",{"_54":398,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/173/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/173/timeline",{"_54":401,"_56":57,"_58":402,"_60":403,"_62":404,"_64":405,"_66":406,"_68":407,"_70":408,"_72":409,"_74":410,"_107":411,"_127":128,"_129":26,"_130":-5,"_131":413,"_133":414,"_155":148,"_149":426,"_151":427,"_154":-5,"_158":159,"_160":428,"_165":-5,"_166":429,"_168":430,"_180":432,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/171","https://api.github.com/repos/pro-collection/interview-question/issues/171/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/171/comments","https://api.github.com/repos/pro-collection/interview-question/issues/171/events","https://github.com/pro-collection/interview-question/issues/171",1640813104,"I_kwDOJGDC6c5hzNIw",171,"[Vue] 响应式数据流驱动页面和传统的事件绑定命令式驱动页面，有何优劣？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[412],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":415,"_64":416,"_58":417,"_66":418,"_68":419,"_70":185,"_72":420,"_118":421,"_143":422,"_145":423,"_147":148,"_127":128,"_149":424,"_151":425,"_153":-5,"_154":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2023-03-26T08:04:06Z","2023-03-26T08:04:21Z",{"_162":148,"_163":148,"_164":148},"Vue 响应式数据流驱动页面和传统的事件绑定命令式驱动页面是两种不同的前端开发方式，它们的优劣势主要体现在代码编写方式、页面效果、开发效率和维护难度上。\n\n* 响应式数据流驱动页面：Vue 使用响应式的数据流来驱动页面的渲染和更新。Vue 的响应式系统会自动侦测数据的变化，并且重新渲染页面，开发者只需要专注于数据和页面的关系，而不用手动操作 DOM 元素。相比传统的命令式开发方式，响应式数据流驱动页面的代码更简洁、易于维护，开发效率更高。同时，Vue 的组件化开发模式也可以让开发者轻松地实现组件复用和代码复用。\n\n* 传统的事件绑定命令式驱动页面：传统的事件绑定命令式驱动页面是通过手动绑定事件和操作 DOM 元素来实现页面交互效果。这种开发方式需要编写大量的事件处理函数和 DOM 操作代码，容易出现逻辑混乱和代码冗余的问题。同时，由于每个事件都需要手动绑定和处理，开发效率也会受到一定的影响。\n\n综上所述，响应式数据流驱动页面和传统的事件绑定命令式驱动页面都有其优缺点，选择何种开发方式需要根据具体的需求和实际情况来决定。一般来说，响应式数据流驱动页面更适合用于构建数据驱动的、组件化的页面，而传统的事件绑定命令式驱动页面更适合用于构建交互性强、动态性高的页面。",{"_54":431,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/171/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/171/timeline",{"_54":434,"_56":57,"_58":435,"_60":436,"_62":437,"_64":438,"_66":439,"_68":440,"_70":441,"_72":442,"_74":443,"_107":444,"_127":128,"_129":26,"_130":-5,"_131":446,"_133":447,"_155":148,"_149":449,"_151":449,"_154":-5,"_158":159,"_160":450,"_165":-5,"_166":451,"_168":452,"_180":454,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/169","https://api.github.com/repos/pro-collection/interview-question/issues/169/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/169/comments","https://api.github.com/repos/pro-collection/interview-question/issues/169/events","https://github.com/pro-collection/interview-question/issues/169",1640809930,"I_kwDOJGDC6c5hzMXK",169,"[koa] body-parser 中间件实现原理？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[445],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":448,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T07:53:06Z",{"_162":148,"_163":148,"_164":148},"Koa 中间件 `koa-bodyparser` 的原理是将 HTTP 请求中的 `request body` 解析成 JavaScript 对象，并将其挂载到 `ctx.request.body` 属性上，方便后续的处理。\n\n具体来说，`koa-bodyparser` 中间件会监听 HTTP 请求的 `data` 事件和 `end` 事件，然后将请求中的数据流解析成一个 JavaScript 对象，并将其作为参数传递给 `ctx.request.body` 属性，最后调用 `await next()`，将控制权交给下一个中间件。\n\n在实现过程中，`koa-bodyparser` 中间件会根据请求头中的 `Content-Type` 字段来判断请求体的类型，支持解析的请求体类型有 `application/json`、`application/x-www-form-urlencoded` 和 `multipart/form-data`。对于其他类型的请求体，`koa-bodyparser` 会将其解析成一个空对象 `{}`。\n\n下面是一个简单的 `koa-bodyparser` 中间件的实现示例：\n\n```javascript\nfunction bodyParser() {\n return async (ctx, next) => {\n if (ctx.request.method === 'POST' || ctx.request.method === 'PUT') {\n let data = '';\n ctx.req.on('data', (chunk) => {\n data += chunk;\n });\n ctx.req.on('end', () => {\n if (ctx.request.headers['content-type'] === 'application/json') {\n ctx.request.body = JSON.parse(data);\n } else if (ctx.request.headers['content-type'] === 'application/x-www-form-urlencoded') {\n ctx.request.body = querystring.parse(data);\n } else if (ctx.request.headers['content-type'].startsWith('multipart/form-data')) {\n // 解析 multipart/form-data 请求体\n // ...\n } else {\n ctx.request.body = {};\n }\n return next();\n });\n } else {\n return next();\n }\n };\n}\n```\n\n在这个实现中，如果请求方法为 `POST` 或者 `PUT`，则开始监听 `data` 事件和 `end` 事件，将请求体数据解析成一个 JavaScript 对象并挂载到 `ctx.request.body` 上，最后调用 `next()` 将控制权交给下一个中间件。对于其他请求方法，则直接调用 `next()` 交给下一个中间件处理。注意，这个实现只支持解析 `application/json` 和 `application/x-www-form-urlencoded` 类型的请求体，对于其他类型的请求体需要进行特殊处理。",{"_54":453,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/169/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/169/timeline",{"_54":456,"_56":57,"_58":457,"_60":458,"_62":459,"_64":460,"_66":461,"_68":462,"_70":463,"_72":464,"_74":465,"_107":466,"_127":128,"_129":26,"_130":-5,"_131":468,"_133":469,"_155":148,"_149":471,"_151":471,"_154":-5,"_158":159,"_160":472,"_165":-5,"_166":473,"_168":474,"_180":476,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/168","https://api.github.com/repos/pro-collection/interview-question/issues/168/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/168/comments","https://api.github.com/repos/pro-collection/interview-question/issues/168/events","https://github.com/pro-collection/interview-question/issues/168",1640809431,"I_kwDOJGDC6c5hzMPX",168,"[koa] 在没有async await 的时候, koa是怎么实现的洋葱模型？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[467],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":470,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T07:51:12Z",{"_162":148,"_163":148,"_164":148},"在没有 `async/await` 的时候，Koa 通过使用 ES6 的生成器函数来实现洋葱模型。具体来说，Koa 中间件函数是一个带有 `next` 参数的生成器函数，当中间件函数调用 `next` 方法时，它会挂起当前的执行，转而执行下一个中间件函数，直到执行完最后一个中间件函数，然后将执行权返回到前一个中间件函数，继续执行下面的代码。这个过程就像一层一层剥开洋葱一样，因此被称为洋葱模型。\n\n下面是一个使用生成器函数实现的简单的 Koa 中间件函数：\n\n```javascript\nfunction* myMiddleware(next) {\n // 中间件函数的代码\n console.log('Start');\n yield next;\n console.log('End');\n}\n```\n\n在这个中间件函数中，`yield next` 表示挂起当前的执行，执行下一个中间件函数。假设我们有两个中间件函数 `middleware1` 和 `middleware2`，它们的代码如下：\n\n```javascript\nfunction* middleware1(next) {\n console.log('middleware1 Start');\n yield next;\n console.log('middleware1 End');\n}\n\nfunction* middleware2(next) {\n console.log('middleware2 Start');\n yield next;\n console.log('middleware2 End');\n}\n```\n\n我们可以使用 `compose` 函数将它们组合成一个洋葱模型：\n\n```scss\nscssCopy codeconst compose = require('koa-compose');\n\nconst app = compose([middleware1, middleware2]);\n\napp();\n```\n\n在这个例子中，`compose` 函数将 `middleware1` 和 `middleware2` 组合成一个函数 `app`，然后调用这个函数即可执行整个中间件链。执行的结果如下：\n\n```sql\nsqlCopy codemiddleware1 Start\nmiddleware2 Start\nmiddleware2 End\nmiddleware1 End\n```\n\n可以看到，这个结果与洋葱模型的特点相符。",{"_54":475,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/168/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/168/timeline",{"_54":478,"_56":57,"_58":479,"_60":480,"_62":481,"_64":482,"_66":483,"_68":484,"_70":485,"_72":486,"_74":487,"_107":488,"_127":128,"_129":26,"_130":-5,"_131":490,"_133":491,"_155":148,"_149":493,"_151":493,"_154":-5,"_158":159,"_160":494,"_165":-5,"_166":495,"_168":496,"_180":498,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/164","https://api.github.com/repos/pro-collection/interview-question/issues/164/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/164/comments","https://api.github.com/repos/pro-collection/interview-question/issues/164/events","https://github.com/pro-collection/interview-question/issues/164",1640805442,"I_kwDOJGDC6c5hzLRC",164,"[koa] 中间件的异常处理是怎么做的？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[489],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":492,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T07:34:30Z",{"_162":148,"_163":148,"_164":148},"在 Koa 中，中间件函数的异常处理可以通过两种方式来实现：\n\n1. 使用 `try...catch` 捕获异常：在中间件函数中使用 `try...catch` 语句来捕获异常，然后通过 `ctx.throw()` 方法抛出异常信息，例如：\n\n```vbnet\nvbnetCopy codeasync function myMiddleware(ctx, next) {\n try {\n await next();\n } catch (err) {\n ctx.throw(500, 'Internal Server Error');\n }\n}\n```\n\n在这个例子中，`await next()` 表示调用下一个中间件函数，如果这个函数抛出异常，就会被捕获到，然后通过 `ctx.throw()` 方法抛出一个包含错误状态码和错误信息的异常。\n\n2. 使用 Koa 的错误处理中间件：Koa 提供了一个错误处理中间件 `koa-json-error`，可以通过在应用程序中使用该中间件来处理异常。这个中间件会自动捕获应用程序中未被处理的异常，并将错误信息以 JSON 格式返回给客户端。例如：\n\n```javascript\nconst Koa = require('koa');\nconst jsonError = require('koa-json-error');\n\nconst app = new Koa();\n\n// 注册错误处理中间件\napp.use(jsonError());\n\n// 中间件函数\nasync function myMiddleware(ctx, next) {\n await next();\n throw new Error('Internal Server Error');\n}\n\n// 应用中间件\napp.use(myMiddleware);\n\n// 启动服务器\napp.listen(3000);\n```\n\n在这个例子中，`koa-json-error` 中间件会自动捕获应用程序中未被处理的异常，并将错误信息以 JSON 格式返回给客户端。开发人员可以通过自定义错误处理函数来处理异常，例如：\n\n```javascript\nconst Koa = require('koa');\nconst jsonError = require('koa-json-error');\n\nconst app = new Koa();\n\n// 自定义错误处理函数\nfunction errorHandler(err, ctx) {\n ctx.status = err.status || 500;\n ctx.body = {\n message: err.message,\n status: ctx.status\n };\n}\n\n// 注册错误处理中间件\napp.use(jsonError(errorHandler));\n\n// 中间件函数\nasync function myMiddleware(ctx, next) {\n await next();\n throw new Error('Internal Server Error');\n}\n\n// 应用中间件\napp.use(myMiddleware);\n\n// 启动服务器\napp.listen(3000);\n```\n\n在这个例子中，我们自定义了一个错误处理函数 `errorHandler`，将错误信息格式化为 JSON 格式，并设置响应状态码。然后将这个函数作为参数传递给 `koa-json-error` 中间件，用于处理异常。\n",{"_54":497,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/164/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/164/timeline",{"_54":500,"_56":57,"_58":501,"_60":502,"_62":503,"_64":504,"_66":505,"_68":506,"_70":507,"_72":508,"_74":509,"_107":510,"_127":128,"_129":26,"_130":-5,"_131":512,"_133":513,"_155":148,"_149":515,"_151":516,"_154":-5,"_158":159,"_160":517,"_165":-5,"_166":518,"_168":519,"_180":521,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/161","https://api.github.com/repos/pro-collection/interview-question/issues/161/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/161/comments","https://api.github.com/repos/pro-collection/interview-question/issues/161/events","https://github.com/pro-collection/interview-question/issues/161",1640793753,"I_kwDOJGDC6c5hzIaZ",161,"如何实现洋葱模式？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[511],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":514,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T06:44:01Z","2023-03-26T06:44:02Z",{"_162":148,"_163":148,"_164":148},"**思路**\n\n* 首先调用 `use` 方法收集中间件，调用 `listen` 方法执行中间件。\n* 每一个中间件都有一个`next`参数（暂时不考虑ctx参数），`next`参数可以控制进入下一个中间件的时机。\n\n**需要解决的问题**\n- 最后一个中间件调用next如何处理\n- 如何解决同一个中间件多次调用next\n\n\n**完整代码**\n\n其中最精华的部分就是`compose`函数，细数一下，只有`11`行代码，1比1还原了`koa`的`compose`函数（去除了不影响主逻辑判断）。\n\n> koa是利用koa-compose这个库进行组合中间件的，在koa-compose里面，next返回的都是一个promise函数。\n\n```js\nfunction Koa () {\n this.middleares = [];\n}\nKoa.prototype.use = function (middleare) {\n this.middleares.push(middleare);\n return this;\n}\nKoa.prototype.listen = function () {\n const fn = compose(this.middleares);\n}\nfunction compose(middleares) {\n let index = -1;\n const dispatch = (i) => {\n if(i <= index) throw new Error('next（）不能调用多次');\n index = i;\n if(i >= middleares.length) return;\n const middleare = middleares[i];\n return middleare('ctx', dispatch.bind(null, i + 1));\n }\n return dispatch(0);\n}\n\nconst app = new Koa();\napp.use(async (ctx, next) => {\n console.log('1');\n next();\n console.log('2');\n});\napp.use(async (ctx, next) => {\n console.log('3');\n next();\n console.log('4');\n});\napp.use(async (ctx, next) => {\n console.log('5');\n next();\n console.log('6');\n});\n\napp.listen();\n\n```\n\n\n**使用**\n\n```js\nconst Koa = require('koa');\nconst app = new Koa();\n\n// 中间件过多，可以创建一个middleares文件夹，将cors函数放到middleares/cors.js文件里面\nconst cors = () => {\n return async (ctx, next) => {\n ctx.set('Access-Control-Allow-Headers', 'X-Requested-With')\n ctx.set('Access-Control-Allow-Origin', '*')\n ctx.set('Access-Control-Allow-Methods', 'GET,HEAD,PUT,POST,DELETE,PATCH')\n await next();\n }\n};\n\napp.use(cors());\napp.use(async (ctx, next) => {\n console.log('第一个中间件', ctx.request.method,ctx.request.url);\n await next();\n ctx.body = 'hello world'\n});\n\n```\n\n`koa`的中间件都是有固定模板的，首先是一个函数，并且返回一个`async`函数（闭包的应用），这个`async`函数有两个参数，一个是`koa`的`context`，一个是`next`函数。\n\n",{"_54":520,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/161/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/161/timeline",{"_54":523,"_56":57,"_58":524,"_60":525,"_62":526,"_64":527,"_66":528,"_68":529,"_70":530,"_72":531,"_74":532,"_107":533,"_127":128,"_129":26,"_130":-5,"_131":535,"_133":536,"_155":148,"_149":538,"_151":538,"_154":-5,"_158":159,"_160":539,"_165":-5,"_166":540,"_168":541,"_180":543,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/160","https://api.github.com/repos/pro-collection/interview-question/issues/160/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/160/comments","https://api.github.com/repos/pro-collection/interview-question/issues/160/events","https://github.com/pro-collection/interview-question/issues/160",1640792637,"I_kwDOJGDC6c5hzII9",160,"什么是洋葱模型？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[534],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":537,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T06:38:58Z",{"_162":148,"_163":148,"_164":148},"说到洋葱模型，就必须聊一聊中间件，中间件这个概念，我们并不陌生，比如平时我们用的 `redux`、`express` 、`koa` 这些库里，都离不开中间件。\n\n那 `koa` 里面的中间件是什么样的呢？其本质上是一个函数，这个函数有着特定，单一的功能，`koa`将一个个中间件注册进来，通过**组合**实现强大的功能。\n\n先看 `demo` ：\n\n```js\n// index.js\nconst Koa = require(\"koa\")\nconst app = new Koa();\n\n// 中间件1\napp.use(async (ctx, next) => {\n console.log(\"1\")\n await next()\n console.log(\"2\")\n});\n// 中间件2\napp.use(async (ctx, next) => {\n console.log(\"3\")\n await next()\n console.log(\"4\")\n});\n// 中间件3\napp.use(async (ctx, next) => {\n console.log(\"5\")\n await next()\n console.log(\"6\")\n});\napp.listen(8002);\n\n\n```\n\n先后注册了三个中间件，运行一下`index.js` ，可以看到输出结果为：\n\n```js\n1\n3\n5\n6\n4\n2\n\n```\n\n没接触过洋葱模型的人第一眼可能会疑惑，为什么调用了一个 `next` 之后，直接从`1` 跳到了 `3` ，而不是先输出`1` ，再输出`2`呢。其实这就是洋葱模型特点，下图是它的执行过程：\n\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80798be002944d67a46c456d4af3c03c~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?) 一开始我们先后注册了三个中间件，分别是中间件1，中间件2，中间件3，调用`listen`方法，打开对应端口的页面，触发了中间件的执行。\n\n首先会先执行第一个中间件的 `next` 的前置语句，相当于 `demo` 里面的 `console.log('1')` ，当调用 `next()` 之后，会直接进入第二个中间件，继续重复上述逻辑，直至最后一个中间件，就会执行 `next` 的后置语句，然后继续上一个中间件的后置语句，继续重复上述逻辑，直至执行第一个中间件的后置语句，最后输出。\n\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/935675e49480426eb517a68c224673c7~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?) 正是因为它这种执行机制，才被称为**洋葱模型**。\n\n\n",{"_54":542,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/160/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/160/timeline",{"_54":545,"_56":57,"_58":546,"_60":547,"_62":548,"_64":549,"_66":550,"_68":551,"_70":552,"_72":553,"_74":554,"_107":555,"_127":128,"_129":26,"_130":-5,"_131":557,"_133":558,"_155":148,"_149":560,"_151":561,"_154":-5,"_158":159,"_160":562,"_165":-5,"_166":563,"_168":564,"_180":566,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/159","https://api.github.com/repos/pro-collection/interview-question/issues/159/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/159/comments","https://api.github.com/repos/pro-collection/interview-question/issues/159/events","https://github.com/pro-collection/interview-question/issues/159",1640791850,"I_kwDOJGDC6c5hzH8q",159,"[Vue] 父子组件通信方式有哪些？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[556],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":559,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T06:34:56Z","2023-03-26T06:35:48Z",{"_162":148,"_163":148,"_164":148},"Vue 父子组件通信\r\n\r\n- Prop（常用）\r\n- $emit (组件封装用的较多)\r\n- .sync语法糖（较少）\r\n- $attrs & $listeners (组件封装用的较多)\r\n- provide & inject （高阶组件/组件库用的较多）\r\n- slot-scope & v-slot （vue@2.6.0+）新增\r\n- scopedSlots 属性\r\n- 其他方式通信\r\n\r\n\r\n具体使用场景参考链接：https://juejin.cn/post/6844903700243316749\r\n\r\n",{"_54":565,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/159/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/159/timeline",{"_54":568,"_56":57,"_58":569,"_60":570,"_62":571,"_64":572,"_66":573,"_68":574,"_70":575,"_72":576,"_74":577,"_107":578,"_127":128,"_129":26,"_130":-5,"_131":580,"_133":581,"_155":148,"_149":583,"_151":584,"_154":-5,"_158":159,"_160":585,"_165":-5,"_166":586,"_168":587,"_180":589,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/144","https://api.github.com/repos/pro-collection/interview-question/issues/144/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/144/comments","https://api.github.com/repos/pro-collection/interview-question/issues/144/events","https://github.com/pro-collection/interview-question/issues/144",1637852500,"I_kwDOJGDC6c5hn6VU",144,"[vue] 是怎么解析template的?",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[579],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":582,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-23T16:16:59Z","2023-03-23T16:18:45Z",{"_162":148,"_163":148,"_164":148},"整体流程图：\r\n![image](https://user-images.githubusercontent.com/22188674/227268064-b92063be-ca08-419b-9241-d23f7980847c.png)\r\n\r\n\r\n\r\n参考文档：\r\n- [Vue 编译三部曲：如何将 template 编译成 AST ?](https://juejin.cn/post/7116296421816418311)\r\n- [Vue 编译三部曲：模型树优化](https://juejin.cn/post/7117085295798911012)\r\n- [Vue 编译三部曲：最后一曲，render code 生成](https://juejin.cn/post/7121504219588198413)\r\n",{"_54":588,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/144/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/144/timeline",{"_54":591,"_56":57,"_58":592,"_60":593,"_62":594,"_64":595,"_66":596,"_68":597,"_70":598,"_72":599,"_74":600,"_107":601,"_127":128,"_129":26,"_130":-5,"_131":603,"_133":604,"_155":148,"_149":606,"_151":607,"_154":-5,"_158":159,"_160":608,"_165":-5,"_166":609,"_168":610,"_180":612,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/143","https://api.github.com/repos/pro-collection/interview-question/issues/143/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/143/comments","https://api.github.com/repos/pro-collection/interview-question/issues/143/events","https://github.com/pro-collection/interview-question/issues/143",1637821593,"I_kwDOJGDC6c5hnyyZ",143,"[vue] 双向数据绑定原理?",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[602],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":605,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-23T15:59:38Z","2023-03-23T15:59:39Z",{"_162":148,"_163":148,"_164":148},"> 在目前的前端面试中，vue的双向数据绑定已经成为了一个非常容易考到的点，即使不能当场写出来，至少也要能说出原理。本篇文章中我将会仿照vue写一个双向数据绑定的实例，名字就叫myVue吧。结合注释，希望能让大家有所收获。\n\n### 1、原理\n\nVue的双向数据绑定的原理相信大家也都十分了解了，主要是通过`Object对象的defineProperty属性，重写data的set和get函数来实现的`,这里对原理不做过多描述，主要还是来实现一个实例。为了使代码更加的清晰，这里只会实现最基本的内容，主要实现v-model，v-bind 和v-click三个命令，其他命令也可以自行补充。\n\n添加网上的一张图\n\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/4/10/162ad3d5be3e5105~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image)\n\n### 2、实现\n\n页面结构很简单，如下\n\n```xml\n

\n \n

\n\n```\n\n包含：\n\n```css\n1. 一个input，使用v-model指令\n2. 一个button，使用v-click指令\n3. 一个h3，使用v-bind指令。\n\n```\n\n我们最后会通过类似于vue的方式来使用我们的双向数据绑定，结合我们的数据结构添加注释\n\n```php\nvar app = new myVue({\n el:'#app',\n data: {\n number: 0\n },\n methods: {\n increment: function() {\n this.number ++;\n },\n }\n })\n\n```\n\n首先我们需要定义一个myVue构造函数：\n\n```javascript\nfunction myVue(options) {\n\n}\n\n```\n\n为了初始化这个构造函数，给它添加一个\\_init属性\n\n```kotlin\nfunction myVue(options) {\n this._init(options);\n}\nmyVue.prototype._init = function (options) {\n this.$options = options; // options 为上面使用时传入的结构体，包括el,data,methods\n this.$el = document.querySelector(options.el); // el是 #app, this.$el是id为app的Element元素\n this.$data = options.data; // this.$data = {number: 0}\n this.$methods = options.methods; // this.$methods = {increment: function(){}}\n }\n\n```\n\n接下来实现\\_obverse函数，对data进行处理，重写data的set和get函数\n\n并改造\\_init函数\n\n```javascript\n myVue.prototype._obverse = function (obj) { // obj = {number: 0}\n var value;\n for (key in obj) { //遍历obj对象\n if (obj.hasOwnProperty(key)) {\n value = obj[key];\n if (typeof value === 'object') { //如果值还是对象，则遍历处理\n this._obverse(value);\n }\n Object.defineProperty(this.$data, key, { //关键\n enumerable: true,\n configurable: true,\n get: function () {\n console.log(`获取${value}`);\n return value;\n },\n set: function (newVal) {\n console.log(`更新${newVal}`);\n if (value !== newVal) {\n value = newVal;\n }\n }\n })\n }\n }\n }\n\n myVue.prototype._init = function (options) {\n this.$options = options;\n this.$el = document.querySelector(options.el);\n this.$data = options.data;\n this.$methods = options.methods;\n\n this._obverse(this.$data);\n }\n\n```\n\n接下来我们写一个指令类Watcher，用来绑定更新函数，实现对DOM元素的更新\n\n```kotlin\nfunction Watcher(name, el, vm, exp, attr) {\n this.name = name; //指令名称，例如文本节点，该值设为\"text\"\n this.el = el; //指令对应的DOM元素\n this.vm = vm; //指令所属myVue实例\n this.exp = exp; //指令对应的值，本例如\"number\"\n this.attr = attr; //绑定的属性值，本例为\"innerHTML\"\n\n this.update();\n }\n\n Watcher.prototype.update = function () {\n this.el[this.attr] = this.vm.$data[this.exp]; //比如 H3.innerHTML = this.data.number; 当number改变时，会触发这个update函数，保证对应的DOM内容进行了更新。\n }\n\n```\n\n更新\\_init函数以及\\_obverse函数\n\n```javascript\nmyVue.prototype._init = function (options) {\n //...\n this._binding = {}; //_binding保存着model与view的映射关系，也就是我们前面定义的Watcher的实例。当model改变时，我们会触发其中的指令类更新，保证view也能实时更新\n //...\n }\n\n myVue.prototype._obverse = function (obj) {\n //...\n if (obj.hasOwnProperty(key)) {\n this._binding[key] = { // 按照前面的数据，_binding = {number: _directives: []} \n _directives: []\n };\n //...\n var binding = this._binding[key];\n Object.defineProperty(this.$data, key, {\n //...\n set: function (newVal) {\n console.log(`更新${newVal}`);\n if (value !== newVal) {\n value = newVal;\n binding._directives.forEach(function (item) { // 当number改变时，触发_binding[number]._directives 中的绑定的Watcher类的更新\n item.update();\n })\n }\n }\n })\n }\n }\n }\n\n```\n\n那么如何将view与model进行绑定呢？接下来我们定义一个\\_compile函数，用来解析我们的指令（v-bind,v-model,v-clickde）等，并在这个过程中对view与model进行绑定。\n\n```ini\n myVue.prototype._init = function (options) {\n //...\n this._complie(this.$el);\n }\n\nmyVue.prototype._complie = function (root) { root 为 id为app的Element元素，也就是我们的根元素\n var _this = this;\n var nodes = root.children;\n for (var i = 0; i < nodes.length; i++) {\n var node = nodes[i];\n if (node.children.length) { // 对所有元素进行遍历，并进行处理\n this._complie(node);\n }\n\n if (node.hasAttribute('v-click')) { // 如果有v-click属性，我们监听它的onclick事件，触发increment事件，即number++\n node.onclick = (function () {\n var attrVal = nodes[i].getAttribute('v-click');\n return _this.$methods[attrVal].bind(_this.$data); //bind是使data的作用域与method函数的作用域保持一致\n })();\n }\n\n if (node.hasAttribute('v-model') && (node.tagName == 'INPUT' || node.tagName == 'TEXTAREA')) { // 如果有v-model属性，并且元素是INPUT或者TEXTAREA，我们监听它的input事件\n node.addEventListener('input', (function(key) {\n var attrVal = node.getAttribute('v-model');\n //_this._binding['number']._directives = [一个Watcher实例]\n // 其中Watcher.prototype.update = function () {\n //\tnode['vaule'] = _this.$data['number']; 这就将node的值保持与number一致\n // }\n _this._binding[attrVal]._directives.push(new Watcher(\n 'input',\n node,\n _this,\n attrVal,\n 'value'\n ))\n\n return function() {\n _this.$data[attrVal] = nodes[key].value; // 使number 的值与 node的value保持一致，已经实现了双向绑定\n }\n })(i));\n }\n\n if (node.hasAttribute('v-bind')) { // 如果有v-bind属性，我们只要使node的值及时更新为data中number的值即可\n var attrVal = node.getAttribute('v-bind');\n _this._binding[attrVal]._directives.push(new Watcher(\n 'text',\n node,\n _this,\n attrVal,\n 'innerHTML'\n ))\n }\n }\n }\n\n```\n\n至此，我们已经实现了一个简单vue的双向绑定功能，包括v-bind, v-model, v-click三个指令。效果如下图\n\n![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/4/10/162ad3d5beb544b6~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image)\n\n附上全部代码，不到150行\n\n```xml\n\n\n myVue\n\n\n\n

\n \n

\n\n\n\n\n```\n\n如果喜欢请关注我的[Github](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Flouzhedong%2Fblog \"https://github.com/louzhedong/blog\")，给个[Star](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Flouzhedong%2Fblog \"https://github.com/louzhedong/blog\")吧，我会定期分享一些JS中的知识，^\\_^\n",{"_54":611,"_171":185,"_172":185,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/143/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/143/timeline",{"_54":614,"_56":57,"_58":615,"_60":616,"_62":617,"_64":618,"_66":619,"_68":620,"_70":621,"_72":622,"_74":623,"_107":624,"_127":128,"_129":26,"_130":-5,"_131":626,"_133":627,"_155":185,"_149":629,"_151":630,"_154":-5,"_158":159,"_160":631,"_165":-5,"_166":632,"_168":633,"_180":635,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/135","https://api.github.com/repos/pro-collection/interview-question/issues/135/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/135/comments","https://api.github.com/repos/pro-collection/interview-question/issues/135/events","https://github.com/pro-collection/interview-question/issues/135",1630975948,"I_kwDOJGDC6c5hNrfM",135,"【React】绑定事件的原理是什么？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[625],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":628,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T15:00:05Z","2025-03-09T11:33:11Z",{"_162":148,"_163":148,"_164":148},"在 React 中，绑定事件的原理是基于合成事件（SyntheticEvent）的机制。合成事件是一种由 React 自己实现的事件系统，它是对原生 DOM 事件的封装和优化，提供了一种统一的事件处理机制，可以跨浏览器保持一致的行为。\n\n当我们在 React 组件中使用 `onClick` 等事件处理函数时，实际上是在使用合成事件。React 使用一种称为“事件委托”的技术，在组件的最外层容器上注册事件监听器，然后根据事件的目标元素和事件类型来触发合适的事件处理函数。这种机制可以大大减少事件监听器的数量，提高事件处理的性能和效率。\n\n在使用合成事件时，React 会将事件处理函数包装成一个合成事件对象（SyntheticEvent），并将其传递给事件处理函数。合成事件对象包含了与原生 DOM 事件相同的属性和方法，例如 `target`、`currentTarget`、`preventDefault()` 等，但是它是由 React 实现的，并不是原生的 DOM 事件对象。因此，我们不能在合成事件对象上调用 `stopPropagation()` 或 `stopImmediatePropagation()` 等方法，而应该使用 `nativeEvent` 属性来访问原生 DOM 事件对象。\n\n绑定事件的实现原理也涉及到 React 的更新机制。当组件的状态或属性发生变化时，React 会对组件进行重新渲染，同时重新注册事件监听器。为了避免不必要的事件处理函数的创建和注册，React 会对事件处理函数进行缓存和复用，只有在事件处理函数发生变化时才会重新创建和注册新的事件处理函数。这种机制可以大大提高组件的性能和效率，尤其是在处理大量事件和频繁更新状态的情况下。",{"_54":634,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/135/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/135/timeline",{"_54":637,"_56":57,"_58":638,"_60":639,"_62":640,"_64":641,"_66":642,"_68":643,"_70":644,"_72":645,"_74":646,"_107":647,"_127":128,"_129":26,"_130":-5,"_131":649,"_133":650,"_155":148,"_149":652,"_151":653,"_154":-5,"_158":159,"_160":654,"_165":-5,"_166":655,"_168":656,"_180":658,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/134","https://api.github.com/repos/pro-collection/interview-question/issues/134/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/134/comments","https://api.github.com/repos/pro-collection/interview-question/issues/134/events","https://github.com/pro-collection/interview-question/issues/134",1630975170,"I_kwDOJGDC6c5hNrTC",134,"【React】合成事件了解多少",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[648],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":651,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:57:58Z","2023-03-19T14:57:59Z",{"_162":148,"_163":148,"_164":148},"在 React 中，合成事件是一种封装了浏览器原生事件对象的高级事件机制。它是由 React 提供的一种用于处理事件的抽象层，可以让开发者更方便地处理和管理事件。\n\nReact 的合成事件机制提供了一些优秀的特性：\n\n1. 跨浏览器兼容性：React 的合成事件可以屏蔽浏览器的差异，保证在各种浏览器上运行一致。\n\n2. 性能优化：React 的合成事件可以对事件进行池化处理，重用事件对象，避免创建大量的事件对象，从而提高性能。\n\n3. 事件委托：React 的合成事件可以实现事件委托机制，将事件处理程序绑定在组件树的根节点上，统一管理和处理组件内部和外部的事件，从而避免多次绑定事件处理程序的问题。\n\n4. 支持自定义事件：React 的合成事件可以支持自定义事件，开发者可以自定义组件事件，提供更多的自定义能力。\n\nReact 的合成事件机制通过事件冒泡和事件委托来实现。当在组件中触发事件时，React 会将该事件包装成一个合成事件对象，并在组件树中冒泡传递，直到根节点处。在组件树中，React 使用事件委托机制将事件处理程序绑定到根节点上，统一处理所有组件的事件。\n\n在处理合成事件时，React 提供了一些常用的事件处理函数，例如 `onClick`、`onMouseOver`、`onSubmit` 等，可以在组件中直接使用。此外，开发者还可以自定义事件处理函数，通过 `on` 前缀加上事件名称的方式来绑定自定义事件。例如，我们可以定义一个 `onCustomEvent` 方法来处理自定义事件：\n\n```jsx\njsxCopy codeclass MyComponent extends React.Component {\n handleCustomEvent() {\n // 处理自定义事件\n }\n\n render() {\n return (\n

\n \n

\n );\n }\n}\n```\n\n在这个例子中，我们定义了一个名为 `handleCustomEvent` 的方法来处理自定义事件，然后在组件中通过 `onClick` 属性来绑定该方法。当用户点击按钮时，React 会将该事件包装成一个合成事件对象，并调用 `handleCustomEvent` 方法来处理事件。",{"_54":657,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/134/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/134/timeline",{"_54":660,"_56":57,"_58":661,"_60":662,"_62":663,"_64":664,"_66":665,"_68":666,"_70":667,"_72":668,"_74":669,"_107":670,"_127":128,"_129":26,"_130":-5,"_131":672,"_133":673,"_155":185,"_149":675,"_151":676,"_154":-5,"_158":159,"_160":677,"_165":-5,"_166":678,"_168":679,"_180":681,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/133","https://api.github.com/repos/pro-collection/interview-question/issues/133/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/133/comments","https://api.github.com/repos/pro-collection/interview-question/issues/133/events","https://github.com/pro-collection/interview-question/issues/133",1630974166,"I_kwDOJGDC6c5hNrDW",133,"react 18 版本中 setState 是同步还是异步的？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[671],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":674,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:55:03Z","2023-10-04T10:21:06Z",{"_162":148,"_163":148,"_164":148},"在 React 18 中，`setState` 的行为仍然是异步的。React 团队并没有改变 `setState` 的默认行为，因为这会带来一些潜在的性能问题和不确定性。异步更新状态可以让 React 在适当的时候批量更新组件状态，从而避免过多的渲染和浏览器的性能问题。\n\n但是，React 18 引入了一个新的特性：批量更新（Batching）。当我们在事件处理函数、异步代码或生命周期函数中调用 `setState` 时，React 会将多个状态更新合并到同一个批次中，从而减少渲染的次数，提高应用的性能。这意味着，即使我们在多个地方调用 `setState` 方法，React 也会将这些调用合并到同一个更新队列中，并在下一个渲染周期中一次性更新所有状态。\n\n在 React 18 中，我们可以使用新的 `startTransition` API 来告诉 React，我们正在进行一次可中断的异步操作，并且希望在操作完成后批量更新组件状态。这个 API 的用法如下：\n\n```js\njsCopy codeimport { startTransition } from 'react';\n\nfunction handleClick() {\n startTransition(() => {\n setState({ count: count + 1 });\n // 执行其他异步操作\n });\n}\n```\n\n在这个例子中，我们通过 `startTransition` API 包装 `setState` 和其他异步操作，告诉 React 我们正在进行一次可中断的异步操作，并且希望在操作完成后批量更新组件状态。这样做可以让我们的应用更加流畅和响应，并且可以提高用户体验。\n\n需要注意的是，`startTransition` API 并不是必须的，如果我们不使用这个 API，React 仍然会在适当的时候批量更新组件状态。这个 API 只是为了让我们更加精确地控制更新的时机，并在必要时进行优化。",{"_54":680,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/133/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/133/timeline",{"_54":683,"_56":57,"_58":684,"_60":685,"_62":686,"_64":687,"_66":688,"_68":689,"_70":690,"_72":691,"_74":692,"_107":693,"_127":128,"_129":26,"_130":-5,"_131":695,"_133":696,"_155":207,"_149":698,"_151":699,"_154":-5,"_158":159,"_160":700,"_165":-5,"_166":701,"_168":702,"_180":704,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/132","https://api.github.com/repos/pro-collection/interview-question/issues/132/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/132/comments","https://api.github.com/repos/pro-collection/interview-question/issues/132/events","https://github.com/pro-collection/interview-question/issues/132",1630973229,"I_kwDOJGDC6c5hNq0t",132,"React setState 是同步还是异步的？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[694],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":697,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:52:06Z","2023-10-04T10:21:43Z",{"_162":148,"_163":148,"_164":148},"在 React 中，`setState` 方法有时是异步的，有时是同步的，具体取决于使用方式和环境。\r\n\r\n当我们在 React 中调用 `setState` 方法时，React 会将新状态合并到组件的状态队列中，并在未来的某个时间更新组件的状态。这个更新过程是异步的，即不能保证在 `setState` 调用后立即更新状态，而是会将状态更新推迟到下一个渲染周期中。这种情况下，`setState` 方法会返回一个 `Promise` 对象，但该对象不包含任何有用的信息。\r\n\r\n然而，当 `setState` 方法被直接调用，而不是在事件处理函数、异步代码或生命周期函数中被调用时，更新过程是同步的。在这种情况下，React 会立即更新组件的状态，并在更新后立即执行一次重新渲染。这种情况下，`setState` 方法不会返回任何信息。\r\n\r\n需要注意的是，在 React 中异步更新状态的机制可以提高性能和优化页面渲染速度，因为它可以让 React 在适当的时候批量更新组件状态，从而避免过多的渲染和浏览器的性能问题。如果我们需要在更新状态后立即执行某些操作，可以使用 `setState` 方法的回调函数或生命周期函数 `componentDidUpdate` 来实现。例如：\r\n\r\n```js\r\njsCopy codeclass MyComponent extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { count: 0 };\r\n }\r\n\r\n handleClick() {\r\n this.setState({ count: this.state.count + 1 }, () => {\r\n console.log('New count:', this.state.count);\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n

\r\n

Count: {this.state.count}

\r\n \r\n

\r\n );\r\n }\r\n}\r\n```\r\n\r\n这里的 `setState` 方法接受一个回调函数作为第二个参数，在状态更新完成后调用该函数并传递更新后的状态作为参数。在这个回调函数中可以执行任何需要在状态更新后立即执行的操作，例如输出调试信息、发送网络请求等。\r\n\r\n---------------------\r\n> 2023.04.19 更新\r\n\r\n如果**直接在setState后面获取state的值是获取不到的。**\r\n\r\n- 在React内部机制能检测到的地方， setState就是异步的；\r\n- 在React检测不到的地方，例如原生事件`addEventListener`,`setInterval`,`setTimeout`，setState就是同步更新的\r\n\r\n\r\nsetState并不是单纯的异步或同步，这其实与调用时的环境相关\r\n\r\n\r\n- 在合成事件和生命周期钩子(除componentDidUpdate) 中，setState是\"异步\"的；\r\n- 在原生事件和setTimeout 中，setState是同步的，可以马上获取更新后的值；\r\n\r\n**批量更新**\r\n多个顺序的setState不是同步地一个一个执行滴，会一个一个加入队列，然后最后一起执行。在合成事件和生命周期钩子中，setState更新队列时，存储的是合并状态(Object.assign)。因此前面设置的 key 值会被后面所覆盖，最终只会执行一次更新。\r\n\r\n\r\n**异步现象原因**\r\n\r\n`setState 的“异步”并不是说内部由异步代码实现`，其实本身执行的过程和代码都是同步的，只是合成事件和生命钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”，`当然可以通过第二个参数setState(partialState, callback)中的callback拿到更新后的结果。`\r\n\r\n`setState 并非真异步，只是看上去像异步。在源码中，通过 isBatchingUpdates 来判断`\r\n\r\nsetState调用流程：\r\n\r\n1. 调用this.setState(newState)\r\n2. 将新状态newState存入pending队列\r\n3. 判断是否处于batch Update（isBatchingUpdates是否为true）\r\n - isBatchingUpdates=true，保存组件于dirtyComponents中，走异步更新流程，合并操作，延迟更新；\r\n - isBatchingUpdates=false，走同步过程。遍历所有的dirtyComponents，调用updateComponent，更新pending state or props\r\n \r\n![流程](https://foruda.gitee.com/images/1681866680280312338/0308d34b_7819612.png)\r\n\r\n**为什么直接修改this.state无效**\r\n\r\nsetState本质是通过一个队列机制实现state更新的。执行setState时，会将需要更新的state合并后放入状态队列，而不会立刻更新state，队列机制可以批量更新state。\r\n\r\n如果不通过setState而直接修改this.state，那么这个state不会放入状态队列中，下次调用setState时对状态队列进行合并时，会忽略之前直接被修改的state，这样我们就无法合并了，而且实际也没有把你想要的state更新上去\r\n\r\n\r\n参考文档：\r\n- https://juejin.cn/post/7204307381689532474#heading-5",{"_54":703,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/132/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/132/timeline",{"_54":706,"_56":57,"_58":707,"_60":708,"_62":709,"_64":710,"_66":711,"_68":712,"_70":713,"_72":714,"_74":715,"_107":716,"_127":128,"_129":26,"_130":-5,"_131":718,"_133":719,"_155":148,"_149":721,"_151":721,"_154":-5,"_158":159,"_160":722,"_165":-5,"_166":723,"_168":724,"_180":726,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/131","https://api.github.com/repos/pro-collection/interview-question/issues/131/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/131/comments","https://api.github.com/repos/pro-collection/interview-question/issues/131/events","https://github.com/pro-collection/interview-question/issues/131",1630971714,"I_kwDOJGDC6c5hNqdC",131,"react lazy import 实现懒加载的原理是什么？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[717],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":720,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:47:35Z",{"_162":148,"_163":148,"_164":148},"React 的 `lazy` 函数可以实现代码分割，即将代码按需加载，以达到优化页面加载速度的目的。它的原理是基于 JavaScript 的动态 `import()` 方法实现的。\n\n当我们使用 `lazy` 函数加载一个组件时，React 会自动将该组件的代码单独打包成一个单独的 JavaScript 文件，并在需要时通过网络请求加载该文件。具体来说，`lazy` 函数返回的是一个特殊的组件，该组件在加载时会调用传入的函数并异步加载组件代码。一般来说，我们会将异步加载的组件通过 `import()` 方法引入，例如：\n\n```js\njsCopy codeconst MyComponent = React.lazy(() => import('./MyComponent'));\n```\n\n这里的 `import()` 方法会返回一个 Promise，该 Promise 在组件代码加载完成后会 resolve，然后通过 React 渲染该组件。\n\n需要注意的是，由于异步加载组件的代码是在运行时执行的，而不是在构建时，因此需要使用符合 ECMAScript 标准的动态 `import()` 方法。此外，在使用 `lazy` 函数时还需要将组件包裹在 `Suspense` 组件中，以处理组件加载时的占位符或错误状态。例如：\n\n```js\njsCopy codeimport React, { lazy, Suspense } from 'react';\n\nconst MyComponent = lazy(() => import('./MyComponent'));\n\nfunction App() {\n return (\n

\n Loading...

}>\n \n \n \n );\n}\n```\n\n这里的 `fallback` 属性指定了组件加载时的占位符，当组件加载完成后会自动替换成真正的组件。\n\n综上所述，React 的 `lazy` 函数通过使用动态 `import()` 方法实现了组件代码的按需加载，以达到优化页面加载速度的目的。",{"_54":725,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/131/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/131/timeline",{"_54":728,"_56":57,"_58":729,"_60":730,"_62":731,"_64":732,"_66":733,"_68":734,"_70":735,"_72":736,"_74":737,"_107":738,"_127":128,"_129":26,"_130":-5,"_131":740,"_133":741,"_155":148,"_149":743,"_151":744,"_154":-5,"_158":159,"_160":745,"_165":-5,"_166":746,"_168":747,"_180":749,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/130","https://api.github.com/repos/pro-collection/interview-question/issues/130/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/130/comments","https://api.github.com/repos/pro-collection/interview-question/issues/130/events","https://github.com/pro-collection/interview-question/issues/130",1630970505,"I_kwDOJGDC6c5hNqKJ",130,"react 遍历渲染节点列表，为什么要加 key ?",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[739],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":742,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:43:47Z","2023-03-19T14:47:57Z",{"_162":148,"_163":148,"_164":148},"在 React 中，当我们使用数组渲染节点列表时，通常需要给每个节点添加一个 `key` 属性，这是因为 React 需要通过 `key` 属性来判断是否需要更新某个节点，从而提高渲染性能。\n\n具体来说，React 在进行更新时，会根据 `key` 属性来判断哪些节点需要更新，哪些节点需要删除，哪些节点需要新增。如果两个节点的 `key` 值相同，则 React 认为它们是同一个节点，会尝试进行复用，否则会销毁旧节点并创建新节点。如果没有 `key` 属性，React 无法判断哪些节点是同一个节点，就需要进行全量更新，这会导致性能下降。\n\n另外，添加 `key` 属性还可以解决一些潜在的问题。例如，当我们通过 `map` 函数生成节点列表时，如果没有给节点添加 `key` 属性，当列表中的某个节点发生变化时，可能会导致其他节点的 `props` 或状态也被重置。如果给每个节点添加了唯一的 `key` 属性，就可以避免这种问题。\n\n因此，总的来说，为节点列表添加 `key` 属性可以提高渲染性能，并避免潜在的问题。",{"_54":748,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/130/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/130/timeline",{"_54":751,"_56":57,"_58":752,"_60":753,"_62":754,"_64":755,"_66":756,"_68":757,"_70":758,"_72":759,"_74":760,"_107":761,"_127":128,"_129":26,"_130":-5,"_131":763,"_133":764,"_155":148,"_149":766,"_151":767,"_154":-5,"_158":159,"_160":768,"_165":-5,"_166":769,"_168":770,"_180":772,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/128","https://api.github.com/repos/pro-collection/interview-question/issues/128/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/128/comments","https://api.github.com/repos/pro-collection/interview-question/issues/128/events","https://github.com/pro-collection/interview-question/issues/128",1630957428,"I_kwDOJGDC6c5hNm90",128,"axios的拦截器原理及应用、简单手写核心逻辑？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[762],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":765,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T14:05:59Z","2023-03-19T14:06:00Z",{"_162":148,"_163":148,"_164":148},"### axios 拦截器的使用\n\nAxios 是一个基于 Promise 的 HTTP 客户端库，可以用于浏览器和 Node.js 环境中发送 HTTP 请求。Axios 提供了拦截器机制，可以在请求发送前和响应返回后对请求和响应进行拦截和处理，从而实现一些通用的功能，例如：添加请求头、添加认证信息、显示 loading 状态、错误处理等。\n\nAxios 的拦截器机制主要是通过 `interceptors` 属性来实现的，该属性包含了 `request` 和 `response` 两个对象，分别代表请求拦截器和响应拦截器。每个对象都包含 `use` 方法，该方法用于注册拦截器回调函数，拦截器回调函数会在请求发送前或响应返回后被调用。\n\n下面是一个示例代码，展示了如何使用 Axios 的拦截器：\n\n```javascript\nimport axios from 'axios'\n\n// 添加请求拦截器\naxios.interceptors.request.use(function (config) {\n // 在发送请求之前做些什么\n console.log('请求拦截器')\n return config\n}, function (error) {\n // 对请求错误做些什么\n return Promise.reject(error)\n})\n\n// 添加响应拦截器\naxios.interceptors.response.use(function (response) {\n // 对响应数据做点什么\n console.log('响应拦截器')\n return response\n}, function (error) {\n // 对响应错误做点什么\n return Promise.reject(error)\n})\n\n// 发送请求\naxios.get('/api/user')\n .then(function (response) {\n // 处理响应数据\n })\n .catch(function (error) {\n // 处理请求错误\n })\n```\n\n在上面的代码中，我们首先通过 `import` 语句引入了 Axios 库。然后，我们调用 `axios.interceptors.request.use` 方法注册了一个请求拦截器回调函数，该函数会在发送请求前被调用，可以在该函数中进行一些通用的操作，例如添加请求头、添加认证信息等。接着，我们调用 `axios.interceptors.response.use` 方法注册了一个响应拦截器回调函数，该函数会在响应返回后被调用，可以在该函数中进行一些通用的操作，例如显示 loading 状态、错误处理等。\n\n最后，我们使用 `axios.get` 方法发送请求，并通过 `then` 和 `catch` 方法处理响应数据和请求错误。在请求发送前和响应返回后，我们注册的拦截器回调函数会被自动调用，可以对请求和响应进行拦截和处理。\n\nAxios 的拦截器机制非常强大，可以用于实现一些通用的功能，例如添加请求头、添加认证信息、显示 loading 状态、错误处理等。在实际开发中，我们经常会使用 Axios 的拦截器来提高代码的复用性和可维护性。\n\n### axios 拦截器原理\n\nAxios 的拦截器机制是通过 `interceptors` 属性来实现的，该属性包含了 `request` 和 `response` 两个对象，分别代表请求拦截器和响应拦截器。每个对象都包含 `use` 方法，该方法用于注册拦截器回调函数，拦截器回调函数会在请求发送前或响应返回后被调用。\n\n具体来说，当我们使用 `axios` 发送请求时，会先调用请求拦截器的回调函数，该函数会在请求发送前被调用，可以在该函数中进行一些通用的操作，例如添加请求头、添加认证信息等。如果请求拦截器返回的不是一个 Promise 对象，则会自动将其封装为一个 Promise 对象。\n\n接着，Axios 会使用 XMLHTTPRequest 对象发送请求，并监听其状态变化事件。当响应返回后，Axios 会调用响应拦截器的回调函数，该函数会在响应返回后被调用，可以在该函数中进行一些通用的操作，例如显示 loading 状态、错误处理等。如果响应拦截器返回的不是一个 Promise 对象，则会自动将其封装为一个 Promise 对象。\n\n需要注意的是，Axios 的拦截器是按照添加顺序依次执行的，也就是说，先添加的拦截器回调函数先执行，后添加的拦截器回调函数后执行。如果一个拦截器回调函数中没有调用 `next` 方法，则后面的拦截器回调函数将不会被执行。\n\n下面是一个示例代码，展示了如何使用 Axios 的拦截器：\n\n```javascript\nimport axios from 'axios'\n\n// 添加请求拦截器\naxios.interceptors.request.use(function (config) {\n // 在发送请求之前做些什么\n console.log('请求拦截器')\n return config\n}, function (error) {\n // 对请求错误做些什么\n return Promise.reject(error)\n})\n\n// 添加响应拦截器\naxios.interceptors.response.use(function (response) {\n // 对响应数据做点什么\n console.log('响应拦截器')\n return response\n}, function (error) {\n // 对响应错误做点什么\n return Promise.reject(error)\n})\n\n// 发送请求\naxios.get('/api/user')\n .then(function (response) {\n // 处理响应数据\n })\n .catch(function (error) {\n // 处理请求错误\n })\n```\n\n在上面的代码中，我们首先通过 `import` 语句引入了 Axios 库。然后，我们调用 `axios.interceptors.request.use` 方法注册了一个请求拦截器回调函数，该函数会在发送请求前被调用，可以在该函数中进行一些通用的操作，例如添加请求头、添加认证信息等。接着，我们调用 `axios.interceptors.response.use` 方法注册了一个响应拦\n\n### axios 拦截器核心逻辑代码实现\n\n下面是一个简单实现 Axios 拦截器核心逻辑的示例代码：\n\n```javascript\nclass Axios {\n constructor() {\n // 请求拦截器\n this.requestInterceptors = []\n // 响应拦截器\n this.responseInterceptors = []\n }\n\n // 注册请求拦截器\n useRequestInterceptor(callback) {\n this.requestInterceptors.push(callback)\n }\n\n // 注册响应拦截器\n useResponseInterceptor(callback) {\n this.responseInterceptors.push(callback)\n }\n\n // 发送请求\n async request(config) {\n // 执行请求拦截器\n for (const interceptor of this.requestInterceptors) {\n config = await interceptor(config)\n }\n\n // 发送请求\n const response = await fetch(config.url, {\n method: config.method,\n headers: config.headers,\n body: config.data\n })\n\n // 执行响应拦截器\n for (const interceptor of this.responseInterceptors) {\n response = await interceptor(response)\n }\n\n return response\n }\n}\n\n// 创建 Axios 实例\nconst axios = new Axios()\n\n// 注册请求拦截器\naxios.useRequestInterceptor(config => {\n // 在请求头中添加认证信息\n config.headers['Authorization'] = 'Bearer xxx'\n return config\n})\n\n// 注册响应拦截器\naxios.useResponseInterceptor(response => {\n // 处理响应数据\n return response.json()\n})\n\n// 发送请求\naxios.request({\n url: '/api/user',\n method: 'GET'\n}).then(data => {\n // 处理响应数据\n console.log(data)\n}).catch(error => {\n // 处理请求错误\n console.error(error)\n})\n```\n\n在上面的代码中，我们首先定义了一个 `Axios` 类，该类包含了请求拦截器和响应拦截器两个属性，分别用于保存注册的拦截器回调函数。然后，我们定义了 `useRequestInterceptor` 和 `useResponseInterceptor` 两个方法，用于注册请求拦截器和响应拦截器回调函数。在这两个方法中，我们将回调函数保存到对应的属性中。\n\n接着，我们定义了 `request` 方法，该方法用于发送请求。在 `request` 方法中，我们首先执行请求拦截器回调函数，将请求配置传递给回调函数，并将回调函数返回的结果赋值给请求配置。接着，我们使用 `fetch` 函数发送请求，并将响应保存到 `response` 变量中。然后，我们执行响应拦截器回调函数，将响应对象传递给回调函数，并将回调函数返回的结果赋值给响应对象。最后，我们返回响应对象。\n\n在最后几行代码中，我们创建了一个 `axios` 实例，并使用 `useRequestInterceptor` 方法和 `useResponseInterceptor` 方法注册了请求拦截器和响应拦截器回调函数。然后，我们调用 `request` 方法发送请求，并使用 `then` 方法处理响应数据，使用 `catch` 方法处理请求错误。",{"_54":771,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/128/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/128/timeline",{"_54":774,"_56":57,"_58":775,"_60":776,"_62":777,"_64":778,"_66":779,"_68":780,"_70":781,"_72":782,"_74":783,"_107":784,"_127":128,"_129":26,"_130":-5,"_131":786,"_133":787,"_155":148,"_149":789,"_151":790,"_154":-5,"_158":159,"_160":791,"_165":-5,"_166":792,"_168":793,"_180":795,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/124","https://api.github.com/repos/pro-collection/interview-question/issues/124/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/124/comments","https://api.github.com/repos/pro-collection/interview-question/issues/124/events","https://github.com/pro-collection/interview-question/issues/124",1630940863,"I_kwDOJGDC6c5hNi6_",124,"Vue 中 $nextTick 作用与原理是啥？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[785],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":788,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T13:24:06Z","2023-03-19T13:24:07Z",{"_162":148,"_163":148,"_164":148},"`$nextTick` 是 Vue.js 提供的一个实例方法，用于在 DOM 更新之后执行一些操作。具体来说，它会将回调函数推迟到下次 DOM 更新循环之后执行。\n\n在 Vue 中，数据变化时，Vue 会异步执行视图更新。例如，当一个数据变化时，Vue 会将这个变化包装成一个更新任务，并将其推入更新队列。Vue 会在下一个事件循环周期中遍历这个队列，并依次执行更新任务，最终将视图更新为最新状态。\n\n在某些情况下，我们需要在 DOM 更新之后执行一些操作，例如在 Vue 中更新 DOM 后获取更新后的元素尺寸、在 Vue 组件中调用子组件的方法等等。如果直接在数据变化后立即执行这些操作，可能会遇到一些问题，例如元素尺寸并未更新，子组件尚未完全挂载等等。这时候，就需要使用 `$nextTick` 方法。\n\n`$nextTick` 的实现原理是利用了 JavaScript 的事件循环机制。具体来说，当调用 `$nextTick` 方法时，Vue 会将回调函数推入一个回调队列中。在下一个事件循环周期中，Vue 会遍历这个回调队列，并依次执行其中的回调函数。由于在这个时候 DOM 已经完成了更新，因此可以安全地执行需要在 DOM 更新之后进行的操作。\n\n需要注意的是，`$nextTick` 是异步执行的，因此不能保证回调函数会立即执行。如果需要等待 `$nextTick` 的回调函数执行完毕后再继续执行某些操作，可以使用 Promise 或 async/await 来等待异步操作的完成。",{"_54":794,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/124/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/124/timeline",{"_54":797,"_56":57,"_58":798,"_60":799,"_62":800,"_64":801,"_66":802,"_68":803,"_70":804,"_72":805,"_74":806,"_107":807,"_127":128,"_129":26,"_130":-5,"_131":809,"_133":810,"_155":185,"_149":812,"_151":813,"_154":-5,"_158":159,"_160":814,"_165":-5,"_166":815,"_168":816,"_180":818,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/119","https://api.github.com/repos/pro-collection/interview-question/issues/119/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/119/comments","https://api.github.com/repos/pro-collection/interview-question/issues/119/events","https://github.com/pro-collection/interview-question/issues/119",1630924561,"I_kwDOJGDC6c5hNe8R",119,"vue 的 keep-alive 的原理是啥？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[808],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":237,"_64":238,"_58":239,"_66":240,"_68":241,"_70":242,"_72":243,"_118":244,"_143":811,"_145":246,"_147":148,"_127":128,"_149":247,"_151":248,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-19T12:38:30Z","2023-10-01T13:50:21Z",{"_162":148,"_163":148,"_164":148},"`` 是 Vue.js 提供的一个抽象组件，它可以使被包含的组件保留在内存中，而不是每次重新渲染的时候销毁并重建，从而提高了应用的性能。\n\n具体来说，`` 的实现原理如下：\n\n1. 当一个组件被包裹在 `` 组件内时，它会被缓存起来，而不是被销毁。\n2. 如果这个组件被包裹的父组件从它的视图中移除，那么这个组件不会被销毁，而是被缓存起来。\n3. 如果这个组件再次被包裹的父组件添加回视图中，那么它会被重新激活，而不是重新创建。\n\n`` 组件通过一个内部的缓存对象来缓存组件实例，这个缓存对象会在组件被包裹在 `` 组件中时创建。当一个被缓存的组件需要被激活时，`` 组件会从缓存中取出该组件的实例并将其挂载到视图上，从而实现了组件的复用。\n\n需要注意的是，被缓存的组件并不是一直存在于内存中，它们会在一定条件下被销毁，比如缓存的组件数量超过了一定的阈值，或者系统内存占用过高等。",{"_54":817,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/119/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/119/timeline",{"_54":820,"_56":57,"_58":821,"_60":822,"_62":823,"_64":824,"_66":825,"_68":826,"_70":827,"_72":828,"_74":829,"_107":830,"_127":128,"_129":26,"_130":-5,"_131":832,"_133":833,"_155":148,"_149":835,"_151":836,"_154":-5,"_158":159,"_160":837,"_165":-5,"_166":838,"_168":839,"_180":841,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/114","https://api.github.com/repos/pro-collection/interview-question/issues/114/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/114/comments","https://api.github.com/repos/pro-collection/interview-question/issues/114/events","https://github.com/pro-collection/interview-question/issues/114",1625712748,"I_kwDOJGDC6c5g5mhs",114,"Vue3.0 实现数据双向绑定的方法是什么？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[831],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":834,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-15T15:09:05Z","2023-03-15T15:09:45Z",{"_162":148,"_163":148,"_164":148},"Vue3.0 通过使用 Composition API 中的 `reactive` 和 `ref` 函数来实现数据双向绑定。\n\n1. reactive 函数\n\n`reactive` 函数是 Vue3.0 中用来创建响应式对象的函数。将一个 JavaScript 对象传递给 `reactive` 函数，它会返回一个新的响应式对象。响应式对象是一个 Proxy 对象，可以在应用程序中使用它来自动追踪数据的变化。\n\n例如，我们可以这样使用 `reactive` 函数来创建一个响应式对象：\n\n```javascript\nimport { reactive } from 'vue';\n\nconst state = reactive({\n message: 'Hello, world!'\n});\n```\n\n在上面的示例中，我们使用 `reactive` 函数创建了一个包含一个 `message` 属性的响应式对象。\n\n2. ref 函数\n\n`ref` 函数是 Vue3.0 中用来创建一个包含单个值的响应式对象的函数。将一个初始值传递给 `ref` 函数，它会返回一个新的响应式对象。响应式对象是一个普通对象，它有一个名为 `value` 的属性，该属性保存了当前值。当 `value` 属性的值发生改变时，Vue3.0 会自动更新应用程序的界面。\n\n例如，我们可以这样使用 `ref` 函数来创建一个响应式对象：\n\n```javascript\nimport { ref } from 'vue';\n\nconst count = ref(0);\n```\n\n在上面的示例中，我们使用 `ref` 函数创建了一个包含初始值为 0 的响应式对象。\n\n3. 双向绑定的实现\n\nVue3.0 中的双向绑定可以通过在模板中使用 `v-model` 指令来实现。`v-model` 指令是 Vue3.0 中用来实现表单元素和组件的双向数据绑定的指令。例如，我们可以这样使用 `v-model` 指令来实现一个表单输入框的双向绑定：\n\n```html\nhtmlCopy code\n\n\n```\n\n在上面的示例中，我们在模板中使用 `v-model` 指令将输入框和 `message` 响应式对象进行双向绑定。当用户在输入框中输入文本时，`message` 响应式对象的值会自动更新，当 `message` 响应式对象的值发生改变时，界面上的文本也会自动更新。\n\n总之，Vue3.0 使用 `reactive` 和 `ref` 函数来实现数据双向绑定。使用 `reactive` 函数可以创建包含多个属性的响应式对象，使用 `ref` 函数可以创建包含单个值的响应式对象。通过在模板中使用 \\`v-model\n\n指令可以实现表单元素和组件的双向数据绑定，将表单元素的值绑定到响应式对象的属性上，当响应式对象的属性值变化时，自动更新绑定的表单元素的值。\n\n除了使用 `v-model` 指令实现双向绑定，Vue3.0 也提供了 `watch` 函数和 `watchEffect` 函数来实现响应式数据的监听和副作用函数的执行。这些函数可以用来监听响应式数据的变化，从而执行特定的操作。下面是一个使用 `watch` 函数监听响应式数据变化的示例：\n\n```html\nhtmlCopy code\n\n\n```\n\n在上面的示例中，我们使用 `watch` 函数监听 `count` 响应式对象的变化，当 `count` 响应式对象的值发生变化时，会自动调用回调函数，打印出 `count` 变化前和变化后的值。\n\n另外，Vue3.0 中还提供了 `computed` 函数用来计算一个响应式对象的值，`toRefs` 函数用来将一个响应式对象转换为普通的对象，并且在 TypeScript 中使用时可以使用 `defineComponent` 函数来定义组件的类型，从而提高代码的可读性和可维护性。",{"_54":840,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/114/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/114/timeline",{"_54":843,"_56":57,"_58":844,"_60":845,"_62":846,"_64":847,"_66":848,"_68":849,"_70":850,"_72":851,"_74":852,"_107":853,"_127":128,"_129":26,"_130":-5,"_131":855,"_133":856,"_155":148,"_149":858,"_151":859,"_154":-5,"_158":159,"_160":860,"_165":-5,"_166":861,"_168":862,"_180":864,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/113","https://api.github.com/repos/pro-collection/interview-question/issues/113/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/113/comments","https://api.github.com/repos/pro-collection/interview-question/issues/113/events","https://github.com/pro-collection/interview-question/issues/113",1625699298,"I_kwDOJGDC6c5g5jPi",113,"React Router 中 HashRouter 和 BrowserRouter 的区别和原理？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[854],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":857,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-15T15:01:37Z","2023-03-15T15:02:11Z",{"_162":148,"_163":148,"_164":148},"React Router 是一个流行的第三方库，它允许在 React 应用程序中实现路由功能。React Router 支持两种路由方式：HashRouter 和 BrowserRouter。\n\n1. HashRouter\n\nHashRouter 使用 URL 中的 hash 部分（即 #）来实现路由。在 React 中，可以使用 `` 组件来创建 HashRouter。例如：\n\n```jsx\njsxCopy codeimport { HashRouter, Route, Link } from 'react-router-dom';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n在使用 HashRouter 时，URL 中的路径看起来像这样：`http://example.com/#/about`。HashRouter 不会向服务器发送请求，因为 # 符号后面的内容被浏览器认为是 URL 的一部分，而不是服务器请求的一部分。这意味着在使用 HashRouter 时，React 应用程序可以在客户端上运行，而无需服务器支持。\n\n2. BrowserRouter\n\nBrowserRouter 使用 HTML5 的 history API 来实现路由。在 React 中，可以使用 `` 组件来创建 BrowserRouter。例如：\n\n```jsx\njsxCopy codeimport { BrowserRouter, Route, Link } from 'react-router-dom';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n在使用 BrowserRouter 时，URL 中的路径看起来像这样：`http://example.com/about`。BrowserRouter 通过 history API 在客户端和服务器之间发送请求，因此需要服务器支持。\n\n3. 区别\n\nHashRouter 和 BrowserRouter 的主要区别在于它们如何处理 URL。HashRouter 使用 URL 中的 # 部分来实现路由，而 BrowserRouter 使用 HTML5 的 history API 来实现路由。HashRouter 不需要服务器支持，而 BrowserRouter 需要服务器支持。\n\n4. 原理\n\nHashRouter 的原理是通过监听 `window.location.hash` 的变化来实现路由。当用户点击链接时，React Router 会根据链接的路径渲染相应的组件，并将路径添加到 URL 中的 # 部分。当用户点击浏览器的“后退”按钮时，React Router 会根据上一个 URL 中的 # 部分来渲染相应的组件。\n\nBrowserRouter 的原理是通过 HTML5 的 history API 来实现路由。当用户点击链接时，React Router 会使用 history API 将路径添加到浏览器的历史记录中，并渲染相应的组件。当用户点击浏览器的“后退”",{"_54":863,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/113/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/113/timeline",{"_54":866,"_56":57,"_58":867,"_60":868,"_62":869,"_64":870,"_66":871,"_68":872,"_70":873,"_72":874,"_74":875,"_107":876,"_127":128,"_129":26,"_130":-5,"_131":878,"_133":879,"_155":148,"_149":881,"_151":882,"_154":-5,"_158":159,"_160":883,"_165":-5,"_166":884,"_168":885,"_180":887,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/90","https://api.github.com/repos/pro-collection/interview-question/issues/90/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/90/comments","https://api.github.com/repos/pro-collection/interview-question/issues/90/events","https://github.com/pro-collection/interview-question/issues/90",1619995492,"I_kwDOJGDC6c5gjytk",90,"redux-thunk 和 redux 是什么关系？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[877],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":880,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T12:52:40Z","2023-03-11T12:52:41Z",{"_162":148,"_163":148,"_164":148},"## 理解redux和redux的中间件redux-thunk\n\n目录\n- [Action的认识](#Action的认识)\n- [Reducer的认识](#Reducer的认识)\n- [Store的认识](#Store的认识)\n- [上面三者的使用案例](#上面三者的使用案例)\n- [Action创建函数](#Action创建函数)\n- [redux-thunk中间件的认识](#redux-thunk中间件的认识)\n- [参考文章](#参考文章)\n\n\n\n## Action的认识\n简单点说Action就是一个对象，一个必须带key为type的对象[value是自己定义的]，其他的key就根据用户自己喜好自己定义: \n以下都是action的定义 \n```\n1、{type:”ADD”}\n2、{type:”ADD”,key1:”“,key2:”“}\n```\n\n## Reducer的认识\n别主观意识就是类似数组中的reduce，也不是只能定义reducer，它仅仅是一个称呼，纯函数，\n函数名次自己随便定义都可以，但是函数的参数只能是**state与action**,\n可以简单的理解为一个工厂函数，传递一个旧的state通过加工后产出一个新的state：\n简单的代码如下： \n```js\nfunction count(state = 0, action) {\n switch (action.type) {\n case 'ADD':\n return state + 1;\n case 'REDUCER':\n return state - 1;\n default:\n return state;\n }\n}\n```\n如果当state是对象的时候上面的代码是错误的: \nredux里面规定state是不能修改的。 \n在javascript中对象是引用数据类型，当你修改了state的时候，变化前后的两个state将会指向同一个地址的，react-redux就会以为这两个相同的state，因为不会执行渲染 \n解决办法，我们用Object.assign去处理，如有不清楚Object.assign，请参考Object.assign文档 \n\n## Store的认识\nstore是一个全局对象，将action和reducer以及state联系在一起，主要职责: \n维护应用的state \n提供getState()方法获取state \n提供dispatch(action)方法更新state \n通过subscribe(方法)注册监听器 \n\n## 上面三者的使用案例\n```js\n'use strict';\nimport {createStore} from 'redux';\nfunction count(state = 0, action) {\n switch (action.type) {\n case 'ADD':\n return state + 1;\n case 'REDUCER':\n return state - 1;\n default:\n return state\n }\n}\n\nlet store = createStore(count);\n\nlet currentValue = store.getState();\nconsole.log('当前的值:', currentValue);\n\n//定义一个监听的方法\nlet listener = () => {\n const previosValue = currentValue;\n currentValue = store.getState();\n console.log('上一个值:', previosValue, '当前值:', currentValue)\n};\n//创建一个监听\nstore.subscribe(listener);\n//分发任务\nstore.dispatch({type:\"ADD\"});\nstore.dispatch({type:\"ADD\"});\nstore.dispatch({type:\"ADD\"});\nstore.dispatch({type:\"REDUCER\"});\n```\n\n## Action创建函数\n上面我们说的action是一个对象，只是含有type的key的对象 \naction创建函数的意思就是创建一个action的函数，函数返回一个对象 \n```js\nfunction add(){\n return{\n type:\"ADD\",\n }\n}\nfunction reducer() {\n return{\n type:\"REDUCER\",\n }\n}\n```\n使用的时候直接store.dispatch(add());就可以 \n\naction创建函数的意义: \naction创建函数表面是返回一个对象 \n真正的意义在于逻辑的封装 \n\n\n## redux-thunk中间件的认识\nredux-thunk中间件可以让action创建函数先不返回一个action对象，而是返回一个函数，\n函数传递两个参数(dispatch,getState),在函数体内进行业务逻辑的封装\n```js\nfunction add() {\n return {\n type: 'ADD',\n }\n}\nfunction addIfOdd() {\n return (dispatch, getState) => {\n const currentValue = getState();\n if (currentValue % 2 == 0) {\n return false;\n }\n //分发一个任务\n dispatch(add())\n }\n}\n```\n\n\n\n## 参考文章\n- [理解redux和redux的中间件redux-thunk的认识](https://blog.csdn.net/kuangshp128/article/details/67632683)\n",{"_54":886,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/90/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/90/timeline",{"_54":889,"_56":57,"_58":890,"_60":891,"_62":892,"_64":893,"_66":894,"_68":895,"_70":896,"_72":897,"_74":898,"_107":899,"_127":128,"_129":26,"_130":-5,"_131":901,"_133":902,"_155":148,"_149":904,"_151":905,"_154":-5,"_158":159,"_160":906,"_165":-5,"_166":907,"_168":908,"_180":910,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/83","https://api.github.com/repos/pro-collection/interview-question/issues/83/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/83/comments","https://api.github.com/repos/pro-collection/interview-question/issues/83/events","https://github.com/pro-collection/interview-question/issues/83",1619986335,"I_kwDOJGDC6c5gjwef",83,"react和vue的区别？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[900],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":903,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T12:15:59Z","2023-03-11T12:16:00Z",{"_162":148,"_163":148,"_164":148},"# Vue与React的对比\n\n> 文档转自：https://blog.csdn.net/CystalVon/article/details/78428036\n\nVue.js与React.js从某些反面来说很相似，通过两个框架的学习，有时候对一些用法会有一点思考，为加深学习的思索，特翻阅了两个文档，从以下各方面进行了对比，加深了对这两个框架的认知。\n\n## 1.数据绑定\n\n### 1.1 Vue中有关数据绑定的部分\n\n* vue是双向绑定， Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。所谓双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。这是通过设置属性访问器实现的。\n* 在vue中，与数据绑定有关的有 **插值表达式、指令系统、\\*Class和Style、事件处理器和表单空间、ajax请求和计算属性**\n\n#### 1.1.1插值表达式\n\n插值和指令又称为模板语法 \n. 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 \n. Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令\n\n#### 1.1.2 指令\n\n* vue中的指令很方便，指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。\n\n* vue中的12个指令： `v-bind,v-once,v-model,v-text,v-html,v-on,v-if,v-else,v-show,v-for,v-pre,v-clock`\n\n#### 1.1.3 class与style绑定\n\n* 数据绑定的一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。\n* 对象语法 \n\n * 我们可以传给 v-bind:class 一个对象，以动态地切换 class\n* 数组语法 \n\n * 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：\n\n```javascript\n

\n1\n```\n\n#### 1.1.4 条件渲染和列表渲染\n\n* v-if条件渲染一组数\n* 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。\n\n#### 1.1.5 事件处理器\n\n* 通过v-on给元素注册事件\n* 使用 v-on 有几个好处： \n\n * 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。\n * 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。\n * 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。\n\n#### 1.1.6 表单控件\n\n* v-model在表单控件元素上创建双向数据绑定\n* 它会根据控件类型自动选取正确的方法来更新元素。\n\n#### 1.1.7 计算属性\n\n* 在Vue中引入了计算属性来处理模板中放入太多的逻辑会让模板过重且难以维护的问题，这样不但解决了上面的问题，而且也同时让模板和业务逻辑更好的分离。\n* 简单来说，假如data里面有属性a=1，然后你需要一个变量跟着a变化，例如b=a+1，那么就需要用到计算属性，Vue实例的computed属性中，设置b为其属性，其表现为一个函数，返回值是b的值。\n\n\n#### 注：关于vue的数据双向绑定和单向数据流\n\n* **Vue 的依赖追踪是【原理上不支持双向绑定，v-model 只是通过监听 DOM 事件实现的语法糖】**\n\n* vue的依赖追踪是通过 Object.defineProperty 把data对象的属性全部转为 getter/setter来实现的；当改变数据的某个属性值时，会触发set函数,获取该属性值的时候会触发get函数，通过这个特性来实现改变数据时改变视图；也就是说只有当数据改变时才会触发视图的改变，反过来在操作视图时，只能通过DOM事件来改变数据，再由此来改变视图，以此来实现双向绑定\n* 双向绑定是在同一个组件内，将数据和视图绑定起来，和父子组件之间的通信并无什么关联；\n* 组件之间的通信采用单向数据流是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以vue不推荐子组件修改父组件的数据，直接修改props会抛出警告\n\n### 1.2 react没有数据双向绑定\n\n* react是单向数据流\n* react中通过将state（Model层）与View层数据进行双向绑定达数据的实时更新变化，具体来说就是在View层直接写JS代码Model层中的数据拿过来渲染，一旦像**表单操作、触发事件、ajax请求**等触发数据变化，则进行双同步\n\n#### 1.2.1事件处理\n\n* React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:\n\n * React事件绑定属性的命名采用驼峰式写法，而不是小写。\n * 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)\n * 在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。\n\n * 当你使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。一般需要显式的绑定this，例如\n\n\n `this.handleClick = this.handleClick.bind(this);`\n * 你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。\n\n#### 1.2.2 条件渲染\n\n* React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。\n* 你可以通过用花括号包裹代码在 JSX 中嵌入任何表达式，也包括 JavaScript 的逻辑与 &&，它可以方便地条件渲染一个元素。之所以能这样做，是因为在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false。因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。\n* 条件渲染的另一种方法是使用 JavaScript 的条件运算符 condition ? true : false。\n\n#### 1.2.3 列表渲染\n\n* 你可以通过使用{}在JSX内构建一个元素集合，使用Javascript中的map()方法循遍历数组\n* Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的id作为元素的key。\n\n#### 1.2.4 表单操作\n\n* HTML表单元素与React中的其他DOM元素有所不同,因为表单元素生来就保留一些内部状态。\n* 当用户提交表单时，HTML的默认行为会使这个表单会跳转到一个新页面。在React中亦是如此。但大多数情况下，我们都会构造一个处理提交表单并可访问用户输入表单数据的函数。实现这一点的标准方法是使用一种称为“受控组件”的技术。其值由React控制的输入表单元素称为“受控组件”。`this.setState({value: event.target.value});`\n* 当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。\n\n#### 1.2.5 状态提升\n\n* 在React中，状态分享是通过将state数据提升至离需要这些数据的组件最近的父组件来完成的。这就是所谓的状态提升。`this.props.xxx`\n* 在React应用中，对应任何可变数据理应只有一个单一“数据源”。通常，状态都是首先添加在需要渲染数据的组件中。此时，如果另一个组件也需要这些数据，你可以将数据提升至离它们最近的父组件中。你应该在应用中保持自上而下的数据流，而不是尝试在不同组件中同步状态。\n\n## 2.组件化以及组件数据流\n\n### 2.1 react中的组件及数据流\n\n* React是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。\n* react中实现组件有两种实现方式，一种是createClass方法，另一种是通过ES2015的思想类继承React.Component来实现\n* 在React应用中，按钮、表单、对话框、整个屏幕的内容等，这些通常都被表示为组件。\n* React推崇的是**函数式编程**和**单向数据流**：给定原始界面（或数据），施加一个变化，就能推导出另外一个状态（界面或者数据的更新）\n* 组件可以将UI切分成一些的独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。 \n**1. Props的只读性**\n* 无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。\n* 所有的React组件必须像纯函数那样使用它们的props。\n\n**props与State的区别** \n. props是property的缩写，可以理解为HTML标签的attribute。不可以使用this.props直接修改props，因为props是只读的，props是用于整个组件树中传递数据和配置。在当前组件访问props，使用this.props。 \n. props是一个组件的设置参数，可以在父控件中选择性设置。父组件对子控件的props进行赋值，并且props的值不可改变。一个子控件自身不能改变自己的 props。 \n. state:当一个组件 mounts的时候，state如果设置有默认值的会被使用，并且state可能时刻的被改变。一个子控件自身可以管理自己的state，但是需要注意的是，无法管理其子控件的state。所以可以认为，state是子控件自身私有的。 \n. 每个组件都有属于自己的state，state和props的区别在于前者(state)只存在于组件内部，只能从当前组件调用this.setState修改state值（不可以直接修改this.state！）。 \n. props是一个父组件传递给子组件的数据流，可以一直的被传递到子孙组件中。然而 state代表的是子组件自身的内部状态。从语义上讲，改变组件的状态，可能会导致dom结构的改变或者重新渲染。而props是父组件传递的参数，所以可以被用于初始化渲染和改变组件自身的状态，虽然大多数时候组件的状态是又外部事件触发改变的。我们需要知道的是，无论是state改变，还是父组件传递的 props改变，render方法都可能会被执行。 \n. 一般我们更新子组件都是通过改变state值，更新新子组件的props值从而达到更新。\n\n#### 2.1.1 组件之间的通信\n\n1. 父子组件数通信 \n\n * 父与子之间通props属性进行传递\n * 子与父之间，父组件定义事件，子组件触发父组件中的事件时，通过实参的形式来改变父组件中的数据来通信\n\n即： \n. . 父组件更新组件状态 —–props—–> 子组件更新 \n. . 子组件更新父组件状态 —–需要父组件传递回调函数—–> 子组件调用触发\n\n1. 非父子组件之间的通信，嵌套不深的非父子组件可以使共同父组件，触发事件函数传形参的方式来实现 \n 兄弟组件：\n\n（1）按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。 \n. 其实这种实现方式与子组件更新父组件状态的方式是大同小异的。\n\n（2）当组件层次很深的时候，在这里，React官方给我们提供了一种上下文方式，可以让子组件直接访问祖先的数据或函数，无需从祖先组件一层层地传递数据到子组件中。\n\n#### 2.1.2 组件的生命周期\n\n```javascript\nconstrutor() //创建组件\ncomponentWillMount() //组件挂载之前\ncomponentDidMount() // 组件挂载之后\ncomponentWillReceiveProps() // 父组件发生render的时候子组件调用该函数\nshouldComponentUpdate() // 组件挂载之后每次调用setState后都会调用该函数判断是否需要重新渲染组件，默认返回true\ncomponentDidUpdate() // 更新\nrender() //渲染，react中的核心函数\ncomponentWillUnmount() //组件被卸载的时候调用，一般在componentDidMount注册的事件需要在这里删除\n\n123456789\n```\n\n![组件的生命周期](http://upload-images.jianshu.io/upload_images/3333422-04ea055c73c50c98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n### 2.2 vue中的组件和数据流\n\n#### 2.2.1 组件化应用构建\n\n* 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。\n* 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例\n* 在一个大型应用中，有必要将整个应用程序划分为组件，以使开发可管理。\n* 组件(component)是 Vue 最强大的功能之一。组件可以帮助你扩展基本的 HTML 元素，以封装可重用代码。在较高层面上，组件是 Vue 编译器附加行为后的自定义元素。在某些情况下，组件也可以是原生 HTML 元素的形式，以特定的 is 特性扩展。\n* 组件中，data必须是一个函数\n* 组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。\n\n#### 2.2.2 响应式\n\n* 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。\n* 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性是响应式的。\n\n#### 2.2.3 组件的生命周期\n\n* 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。\n* 比如 created 钩子可以用来在一个实例被创建之后执行代码，也有一些其它的钩子，在实例生命周期的不同场景下调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。\n* 生命周期图示： \n![vue生命周期](https://cn.vuejs.org/images/lifecycle.png)\n\n#### 2.2.4 组件之间的通信\n\n* Vue默认的是单向数据流，这是Vue直接提出来说明的，父组件默认可以向子组件传递数据，但是子组件向父组件传递数据就需要额外设置了。\n* Vue 也支持双向绑定，默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。\n* 父子组件之间的数据通信是通过Prop和自定义事件实现的，而非父子组件可以使用订阅/发布模式实现（类似于Angualr中的非父子指令之间的通信），再复杂一点也是建议使用状态管理（vuex）。\n* 在 Vue 中，父子组件之间的关系可以概述为：props 向下，events 向上。父组件通过 props 向下传递数据给子组件，子组件通过 events 发送消息给父组件。\n\n**1.父向子** \n. 每个组件实例都有自己的孤立隔离作用域。也就是说，不能（也不应该）直接在子组件模板中引用父组件数据。要想在子组件模板中引用父组件数据，可以使用 props 将数据向下传递到子组件。 \n. 每个 prop 属性,都可以控制是否从父组件的自定义属性中接收数据。子组件需要使用 props 选项显式声明 props，以便它可以从父组件接收到期望的数据。 \n. **动态Props**，类似于将一个普通属性绑定到一个表达式，我们还可以使用 v-bind 将 props 属性动态地绑定到父组件中的数据。无论父组件何时更新数据，都可以将数据向下流入到子组件中\n\n**2.子向父** \n. 使用自定义事件 \n. 每个 Vue 实例都接入了一个事件接口(events interface)，也就是说，这些 Vue 实例可以做到： \n. 使用 on(eventName)监听一个事件−使用\" role=\"presentation\" style=\"position: relative;\">on(eventName)监听一个事件−使用

o n (e v e n t N a m e) 监 听 一 个 事 件 - 使 用

emit(eventName) 触发一个事件\n\n**3. 非父子组件通信** \n. 可以使用一个空的 Vue 实例作为一个事件总线中心(central event bus)，用emit触发事件，\" role=\"presentation\" style=\"position: relative;\">emit触发事件，

e m i t 触 发 事 件 ，

on监听事件\n\n#### 2.2.5 单向数据流\n\n单向数据流示意图： \n![单向数据流](https://vuex.vuejs.org/zh-cn/images/flow.png)\n\n## 3.状态管理\n\n### ~~3.1 react中的状态管理：Flux~~\n\n* Redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层，所以它能够轻松的通过一些简单绑定和 Vue 一起使用。 \n\n 1. 创建actions \n\n * 定义动作，事件触发需要用dispatcher来调用\n * 行为，如增加操作、删除操作、更新操作，就是一堆函数。\n 2. 创建store \n\n * store中包含应用的状态和逻辑，用来管理应用中不同的状态和逻辑，相当于Model层\n 3. 创建dispatcher \n\n * 在dispatcher中通过register来给每个action注对应的的store中的方法\n 4. 在view层调用action中的方法 \n\n * 就是各类component\n\n![flux的示意图](https://img-blog.csdn.net/20150625201409735?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VueHVhbnNvZnQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)\n\n### 3.2 vue中的状态管理vuex\n\n* vuex借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。这使得它能够更好地和 Vue 进行整合，同时提供简洁的 API 和改善过的开发体验。\n\n* 组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，我们最终达成了 Flux 架构。这样约定的好处是，我们能够记录所有 store 中发生的 state 改变，同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。\n\n* 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态\n\n* Vuex 和单纯的全局对象有以下两点不同：\n\n 1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。\n\n 2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。\n\n 3. State\n* Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。这也意味着，每个应用将仅仅包含一个 store 实例。 \n\n 1. Getters\n\n* 从state中获取状态值，有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。\n\n 1. Mutation \n\n * 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。\n * 你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法\n\n 2. Action\n\n * Action 类似于 mutation，不同在于：\n\n * Action 提交的是 mutation，而不是直接变更状态。\n * Action 可以包含任意异步操作。\n * dispatch分发action\n\n 3. Module\n* 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。\n* Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割\n\n![vuex示意图](https://raw.githubusercontent.com/vuejs/vuex/dev/docs/en/images/vuex.png)\n\n## 4.路由\n\n* 两者的路由很相似，都是利用了组件化思想\n\n### 4.1 react中的路由\n\n* 在路由库的问题上，React 选择把问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。\n* react中，需要引入react-router库， \n 使用时，路由器Router就是React的一个组件。\n* Router组件本身只是一个容器，真正的路由要通过Route组件定义。\n* Route组件定义了URL路径与组件的对应关系。你可以同时使用多个Route组件。\n\n```javascript\n\n \n \n \n\n12345\n```\n\n### 4.2 vue中的路由\n\n* Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。\n\n* 使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，**将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。**\n\n 1. HTML中：\n\n```javascript\n

Hello App!

\n \n \n \n Go to Foo\n Go to Bar\n

\n \n \n \n

\n12345678910111213\n```\n\n## 5. 渲染性能对比\n\n* 在操作界面时，要尽量减少对DOM的操作，Vue 和 React 都使用虚拟DOM来实现，并且两者工作一样好。\n* 尽量减少除DOM操作以外的其他操作。（vue和react的不同）\n\n### 5.1 react视图渲染\n\n* React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时，React 重新渲染 Virtual DOM，比较计算之后给真实 DOM 打补丁。\n\n* Virtual DOM 提供了函数式的方法描述视图，它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。\n\n* 在超大量数据的首屏渲染速度上，React 有一定优势，因为 Vue 的渲染机制启动时候要做的工作比较多，而且 React 支持服务端渲染。\n\n* 元素是构成 React 应用的最小单位。元素用来描述你在屏幕上看到的内容，与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。\n* 我们用React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。我们将元素传入一个名为 ReactDOM.render() 的方法来将其渲染到页面上，页面上就会显示该元素。\n\n**组件渲染** \n. 当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。\n\n### 5.2 vue视图渲染\n\n* Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。\n\n* vue渲染的过程如下：\n\n * new Vue，执行初始化\n * 挂载$mount方法，通过自定义Render方法、template、el等生成Render函数\n * 通过Watcher监听数据的变化\n * 当数据发生变化时，Render函数执行生成VNode对象\n * 通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素\n\n## 6. 数据更新\n\n### 6.1 react数据更新\n\n* React 元素都是immutable 不可变的。当元素被创建之后，你是无法改变其内容或属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子。\n* 根据我们现阶段了解的有关 React 知识，更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法\n\n### 6.2 vue数据更新\n\n## 7. 开发模式及规模\n\n### 7.1 react\n\n#### 7.1.1 开发模式\n\n* React本身，是严格的view层，MVC模式\n\n#### 7.1.2 规模\n\n* Vue 提供了Vue-cli 脚手架，能让你非常容易地构建项目，包含了 Webpack，Browserify，甚至 no build system。\n\n### 7.2 vue\n\n#### 7.2.1 开发模式\n\n* Vue是MVVM模式的一种方式实现\n* 虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例。\n\n#### 7.2.2 脚手架\n\n* React 提供了create-react-app，但是现在还存在一些局限性： \n\n * 它不允许在项目生成时进行任何配置，而 Vue 支持 Yeoman-like 定制。\n * 它只提供一个构建单页面应用的单一模板，而 Vue 提供了各种用途的模板。\n * 它不能用用户自建的模板构建项目，而自建模板对企业环境下预先建立协议是特别有用的。\n\n## 8. HTML&&CSS\n\n* 在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。这类方案有其优点，但也存在一些不是每个开发者都能接受的取舍。\n\nVue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。\n\n### 8.1 react\n\n#### 8.1.1 JSX\n\n* 在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。\n\n* JSX, 一种 JavaScript 的语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。\n\n* JSX 用来声明 React 当中的元素。\n* JSX本身也是一种表达式，在编译之后呢，JSX 其实会被转化为普通的 JavaScript 对象。这也就意味着，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以\n* JSX 说是手写的渲染函数有下面这些优势： \n\n * 你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。\n * 开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。\n\n#### 8.1.2 组件作用域内的CSS\n\n* 除非你把组件分布在多个文件上 (例如 CSS Modules)，CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components、glamorous 和 emotion)。这引入了一个新的面向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。另外，虽然在构建时将 CSS 提取到一个单独的样式表是支持的，但 bundle 里通常还是需要一个运行时程序来让这些样式生效。当你能够利用 JavaScript 灵活处理样式的同时，也需要权衡 bundle 的尺寸和运行时的开销。\n\n### 8.2 vue\n\n#### 8.2.1 Templates模板语法\n\n* 事实上 Vue 也提供了渲染函数，甚至支持 JSX。然而，我们默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue 模板，这也带来了一些特有的优势： \n\n * 对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。\n * 基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。\n * 这也使得设计师和新人开发者更容易理解和参与到项目中。\n * 你甚至可以使用其他模板预处理器，比如 Pug 来书写 Vue 的模板。\n* Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。\n* 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。\n\n#### 8.2.2 单文件组件CSS\n\n* Vue 设置样式的默认方法是单文件组件里类似 style 的标签。 \n 单文件组件让你可以在**同一个文件里完全控制 CSS**，将其作为组件代码的一部分。\n* Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules——全部都在\n\n### 8.3 小结\n\n* 更抽象一点来看，我们可以把组件区分为两类：一类是**偏视图表现**的 (presentational)，一类则是**偏逻辑**的 (logical)。我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。\n\n## 9. 使用场景\n\n### 9.1 选择react\n\n#### 9.1.1 期待构建一个大型应用程序——选择React\n\n* 同时用Vue和React实现的简单应用程序，可能会让一个开发者潜意识中更加倾向于Vue。这是因为基于模板的应用程序第一眼看上去更加好理解，而且能很快跑起来。但是这些好处引入的技术债会阻碍应用扩展到更大的规模。模板容易出现很难注意到的运行时错误，同时也很难去测试，重构和分解。 \n 相比之下，Javascript模板可以组织成具有很好的分解性和干（DRY）代码的组件，干代码的可重用性和可测试性更好。Vue也有组件系统和渲染函数，但是React的渲染系统可配置性更强，还有诸如浅（shallow）渲染的特性，和React的测试工具结合起来使用，使代码的可测试性和可维护性更好。 \n 与此同时，React的immutable应用状态可能写起来不够简洁，但它在大型应用中意义非凡，因为透明度和可测试性在大型项目中变得至关重要。\n\n#### 9.1.2 期待同时适用于Web端和原生APP的框架——选择React\n\n* React Native是一个使用Javascript构建移动端原生应用程序（iOS，Android）的库。它与React.js相同，只是不使用Web组件，而是使用原生组件。如果你学过React.js，很快就能上手React Native，反之亦然。 \n 它的意义在于，开发者只需要一套知识和工具就能开发Web应用和移动端原生应用。如果你想同时做Web端开发和移动端开发，React为你准备了一份大礼。 \n 阿里的Weex也是一个跨平台UI项目，目前它以Vue为灵感，使用了许多相同的语法，同时计划在未来完全集成Vue，然而集成的时间和细节还不清楚。因为Vue将HTML模板作为它设计的核心部分，并且现有特性不支持自定义渲染，因此很难看出目前的Vue.js的跨平台能力能像React和React Native一样强大。\n\n#### 9.1.3 期待最大的生态系统——选择React\n\n* 毫无疑问，React是目前最受欢迎的前端框架。它在NPM上每个月的下载量超过了250万次，相比之下，Vue是22.5万次。人气不仅仅是一个肤浅的数字，这意味着更多的文章，教程和更多Stack Overflow的解答，还意味有着更多的工具和插件可以在项目中使用，让开发者不再孤立无援。 \n 这两个框架都是开源的，但是React诞生于Facebook，有Facebook背书，它的开发者和Facebook都承诺会持续维护React。相比之下，Vue是独立开发者尤雨溪的作品。尤雨溪目前在全职维护Vue，也有一些公司资助Vue，但是规模和Facebook和Google没得比。不过请对Vue的团队放心，它的小规模和独立性并没有成为劣势，Vue有着固定的发布周期，甚至更令人称道的是，Github上Vue只有54个open issue，3456个closed issue，作为对比，React有多达530个open issue，3447个closed issue。\n\n### 9.2 选择vue\n\n#### 9.2.1 期待模板搭建应用——选择 Vue\n\n* Vue应用的默认选项是把markup放在HTML文件中。数据绑定表达式采用的是和Angular相似的mustache语法，而指令（特殊的HTML属性）用来向模板添加功能。 \n 相比之下，React应用不使用模板，它要求开发者借助JSX在JavaScript中创建DOM。\n* 对于来自标准Web开发方式的新开发者，模板更容易理解。但是一些资深开发者也喜欢模板，因为模板可以更好的把布局和功能分割开来，还可以使用Pug之类的模板引擎。 \n 但是使用模板的代价是不得不学习所有的HTML扩展语法，而渲染函数只需要会标准的HTML和JavaScript。而且比起模板，渲染函数更加容易调试和测试。当然你不应该因为这方面的原因错过Vue，因为在Vue2.0中提供了使用模板或者渲染函数的选项。\n\n#### 9.2.2 期待简单和“能用就行”的东西——选择 Vue\n\n* 一个简单的Vue项目可以不需要转译直接运行在浏览器中，所以使用Vue可以像使用jQuery一样简单。当然这对于React来说在技术上也是可行的，但是典型的React代码是重度依赖于JSX和诸如class之类的ES6特性的。 \n Vue的简单在程序设计的时候体现更深，让我们来比较一下两个框架是怎样处理应用数据的（也就是state）。\n* React中是通过比较当前state和前一个state来决定何时在DOM中进行重渲染以及渲染的内容，因此需要不可变（immutable）的state。 \n Vue中的数据是可变（mutated）的，所以同样的操作看起来更加简洁。 \n 让我们来看看Vue中是如何进行状态管理的。当向state添加一个新对象的时候，Vue将遍历其中的所有属性并且转换为getter，setter方法，现在Vue的响应系统开始保持对state的跟踪了，当state中的内容发生变化的时候就会自动重新渲染DOM。令人称道的是，Vue中改变state的状态的操作不仅更加简洁，而且它的重新渲染系统也比React 的更快更有效率。\n* Vue的响应系统还有有些坑的，例如：它不能检测属性的添加和删除和某些数组更改。这时候就要用到Vue API中的类似于React的set方法来解决。\n\n#### 9.2.3 期待应用尽可能的小和快——选择Vue\n\n* 当应用程序的状态改变时，React和Vue都将构建一个虚拟DOM并同步到真实DOM中。两者都有各自的方法优化这个过程。 \n Vue核心开发者提供了一个benchmark测试，可以看出Vue的渲染系统比React的更快。测试方法是10000个项目的列表渲染100次，结果如下图。从实用的观点来看，这种benchmark只和边缘情况有关，大部分应用程序中不会经常进行这种操作，所以这不应该被视为一个重要的比较点。但是，页面大小是与所有项目有关的，这方面Vue再次领先，它目前的版本压缩后只有25.6KB。React要实现同样的功能，你需要React DOM（37.4KB）和React with Addon库（11.4KB），共计44.8KB，几乎是Vue的两倍大。双倍的体积并不能带来双倍的功能。\n\n## 10. 服务器端渲染（SSR）\n\n* 客户端渲染路线：1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载完成 -> 5. 等待js加载并初始化完成 -> 6. js代码终于可以运行，由js代码向后端请求数据( ajax/fetch ) -> 7. 等待后端数据返回 -> 8. react-dom( 客户端 )从无到完整地，把数据渲染为响应页面\n\n* 服务端渲染路线：1. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染（服务端性能好，较快） -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 )\n\n### 10.1 react\n\n* React的虚拟DOM是其可被用于服务端渲染的关键。首先每个ReactComponent 在虚拟DOM中完成渲染，然后React通过虚拟DOM来更新浏览器DOM中产生变化的那一部分，虚拟DOM作为内存中的DOM表现，为React在Node.js这类非浏览器环境下的吮吸给你提供了可能，React可以从虚拟DoM中生成一个字符串。而不是跟新真正的DOM，这使得我们可以在客户端和服务端使用同一个React Component。\n\n* React 提供了两个可用于服务端渲染组件的函数：React.renderToString 和React.render-ToStaticMarkup。在设计用于服务端渲染的ReactComponent时需要有预见性，考虑以下方面。\n\n * 选取最优的渲染函数。\n * 如何支持组件的异步状态。\n * 如何将应用的初始化状态传递到客户端。\n * 哪些生命周期函数可以用于服务端的渲染。\n * 如何为应用提供同构路由支持。\n * 单例、实例以及上下文的用法。\n\n### 10.2 vue\n\n**1. 什么是服务器端渲染（SSR）？**\n\n* Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上完全交互的应用程序。\n\n* 服务器渲染的 Vue.js 应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。\n\n**2. 服务器端渲染优势** \n. 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 \n. 更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。\n\n## 11. 附： react理念\n\n### 1. 把UI图划分出组件层级\n\n### 2. 用React创建一个静态版本\n\n* 传入数据模型，渲染 UI 但没有任何交互。最好把这些过程解耦，因为创建一个静态版本更多需要的是码代码，不太需要逻辑思考，而添加交互则更多需要的是逻辑思考，不是码代码。\n* 在创建静态版本的时候不要使用 state。\n* 你可以自顶向下或者自底向上构建应用。也就是，你可以从层级最高的组件开始构建(即 FilterableProductTable开始)或层级最低的组件开始构建(ProductRow)。在较为简单的例子中，通常自顶向下更容易，而在较大的项目中，自底向上会更容易并且在你构建的时候有利于编写测试。\n* React 的单向数据流(也叫作单向绑定)保证了一切是模块化并且是快速的。\n\n#### 3. 定义 UI 状态的最小(但完整)表示\n\n* 想想实例应用中的数据，让我们来看看每一条，找出哪一个是 state。每个数据只要考虑三个问题：\n\n * 它是通过 props 从父级传来的吗？如果是，他可能不是 state。\n * 它随着时间推移不变吗？如果是，它可能不是 state。\n * 你能够根据组件中任何其他的 state 或 props 把它计算出来吗？如果是，它不是 state。\n\n#### 4. 确定你的State应该位于哪里\n\n* 对你应用的每一个 state：\n\n * 确定每一个需要这个 state 来渲染的组件。\n * 找到一个公共所有者组件(一个在层级上高于所有其他需要这个 state 的组件的组件)\n * 这个公共所有者组件或另一个层级更高的组件应该拥有这个 state。\n * 如果你没有找到可以拥有这个 state 的组件，创建一个仅用来保存状态的组件并把它加入比这个公共所有者组件层级更高的地方。\n\n#### 5. 添加反向数据流\n\n## 小结\n\n总结一下，我们发现， \n. Vue的优势包括： \n. 模板和渲染函数的弹性选择 \n. 简单的语法及项目创建 \n. 更快的渲染速度和更小的体积 \n. React的优势包括： \n. 更适用于大型应用和更好的可测试性 \n. 同时适用于Web端和原生App \n. 更大的生态圈带来的更多支持和工具 \n. 而实际上，React和Vue都是非常优秀的框架，它们之间的相似之处多过不同之处，并且它们大部分最棒的功能是相通的： \n. 利用**虚拟DOM**实现快速渲染 \n. 轻量级 \n. 响应式和组件化 \n. 服务器端渲染 \n. 易于集成路由工具，打包工具以及状态管理工具 \n. 优秀的支持和社区\n\n文章参考来源：\n\n* [vue官方文档关于框架的对比](https://cn.vuejs.org/v2/guide/comparison.html)\n* [react中文文档](https://discountry.github.io/react/docs/hello-world.html)\n* [vue官方文档](https://cn.vuejs.org/v2/guide/installation.html)\n",{"_54":909,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/83/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/83/timeline",{"_54":912,"_56":57,"_58":913,"_60":914,"_62":915,"_64":916,"_66":917,"_68":918,"_70":919,"_72":920,"_74":921,"_107":922,"_127":128,"_129":26,"_130":-5,"_131":924,"_133":925,"_155":148,"_149":927,"_151":928,"_154":-5,"_158":159,"_160":929,"_165":-5,"_166":930,"_168":931,"_180":933,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/80","https://api.github.com/repos/pro-collection/interview-question/issues/80/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/80/comments","https://api.github.com/repos/pro-collection/interview-question/issues/80/events","https://github.com/pro-collection/interview-question/issues/80",1619940099,"I_kwDOJGDC6c5gjlMD",80,"[Redux]: 看过 Redux 源码吗，对 Redux 了解多少？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[923],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":926,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T09:05:32Z","2023-03-11T09:07:07Z",{"_162":148,"_163":148,"_164":148},"## 深入Redux架构\r\n\r\n目录：\r\n- [1、关于redux](#01)\r\n- [2、API](#02)\r\n- [3、中间件与异步操作](#03)\r\n- [4、异步操作的基本思路](#04)\r\n- [5、React-Redux的用法](#05)\r\n\r\n参考文章：[http://www.cnblogs.com/MuYunyun/p/6530715.html](http://www.cnblogs.com/MuYunyun/p/6530715.html)\r\n\r\n##

1、关于redux

\r\n\r\n### 1.1、什么情况需要用redux？\r\n- 用户的使用方式复杂\r\n- 不同身份的用户有不同的使用方式（比如普通用户和管理员）\r\n- 多个用户之间可以协作\r\n- 与服务器大量交互，或者使用了WebSocket\r\n- View要从多个来源获取数据\r\n\r\n简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。多交互、多数据源场景就比较适合使用Redux。\r\n\r\n### 1.2、设计思想\r\n- Web 应用是一个状态机，视图与状态是一一对应的。\r\n- 所有的状态，保存在一个对象里面。\r\n\r\n### 1.3、Redux工作流程\r\n\r\n![react04-01](https://user-images.githubusercontent.com/22188674/224475588-53d35049-5ed3-4921-bd35-847a3859b23b.png) \r\n\r\n首先，用户发出 Action。 \r\n`store.dispatch(action);` \r\n\r\n然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。 \r\n`let nextState = todoApp(previousState, action);`\r\n\r\n\r\nState 一旦有变化，Store 就会调用监听函数。 \r\n// 设置监听函数 \r\n`store.subscribe(listener);`\r\n\r\nlistener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。 \r\n```javascript\r\nfunction listerner() {\r\n let newState = store.getState();\r\n component.setState(newState); \r\n}\r\n```\r\n\r\n如果现在没理解以上流程，不要急，看完以下API就差不多能懂得Redux的核心机制了。\r\n\r\n##

2、API

\r\n\r\n### Store\r\nStore 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。\r\n\r\nRedux 提供createStore这个函数，用来生成 Store。 \r\n下面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。 \r\n```javascript\r\nimport { createStore } from 'redux';\r\nconst store = createStore(fn);\r\n```\r\n\r\n### State\r\nStore对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。 \r\n当前时刻的 State，可以通过store.getState()拿到。\r\n```javascript\r\nimport { createStore } from 'redux';\r\nconst store = createStore(fn);\r\n\r\nconst state = store.getState();\r\n```\r\nRedux 规定，一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。\r\n\r\n\r\n### Action\r\nState 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。 \r\nAction 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。 \r\n```javascript\r\nconst action = {\r\n type: 'ADD_TODO',\r\n payload: 'Learn Redux'\r\n};\r\n```\r\n上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。 \r\n可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。\r\n\r\n\r\n### Action Creator\r\nView 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。 \r\n```javascript\r\nconst ADD_TODO = '添加 TODO';\r\n\r\nfunction addTodo(text) {\r\n return {\r\n type: ADD_TODO,\r\n text\r\n }\r\n}\r\nconst action = addTodo('Learn Redux');\r\n```\r\n\r\n### store.dispatch()\r\nstore.dispatch()是 View 发出 Action 的唯一方法。 \r\n```javascript\r\nimport { createStore } from 'redux';\r\nconst store = createStore(fn);\r\n\r\nstore.dispatch({\r\n type: 'ADD_TODO',\r\n payload: 'Learn Redux'\r\n});\r\n```\r\n上面代码中，store.dispatch接受一个 Action 对象作为参数，将它发送出去。 \r\n结合 Action Creator，这段代码可以改写如下。\r\n```javascript\r\nstore.dispatch(addTodo('Learn Redux'));\r\n```\r\n\r\n### Reducer\r\nStore 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。 \r\nReducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。下面是一个实际的例子\r\n```javascript\r\nconst defaultState = 0;\r\nconst reducer = (state = defaultState, action) => {\r\n switch (action.type) {\r\n case 'ADD':\r\n return state + action.payload;\r\n default: \r\n return state;\r\n }\r\n};\r\n\r\nconst state = reducer(1, {\r\n type: 'ADD',\r\n payload: 2\r\n});\r\n```\r\n上面代码中，reducer函数收到名为ADD的 Action 以后，就返回一个新的 State，作为加法的计算结果。\r\n其他运算的逻辑（比如减法），也可以根据 Action 的不同来实现。 \r\n实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。\r\n为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。 \r\n```javascript\r\nimport { createStore } from 'redux';\r\nconst store = createStore(reducer);\r\n```\r\n上面代码中，createStore接受 Reducer 作为参数，生成一个新的 Store。\r\n以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。\r\n\r\n\r\n### store.subscribe()\r\nStore 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。 \r\n```javascript\r\nimport { createStore } from 'redux';\r\nconst store = createStore(reducer);\r\n\r\nstore.subscribe(listener);\r\n```\r\n显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。 \r\nstore.subscribe方法返回一个函数，调用这个函数就可以解除监听。 \r\n```javascript\r\nlet unsubscribe = store.subscribe(() =>\r\n console.log(store.getState())\r\n);\r\nunsubscribe();\r\n```\r\n\r\n\r\n##

3、中间件与异步操作

\r\n一个关键问题没有解决：异步操作怎么办？Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。 \r\n怎么才能 Reducer 在异步操作结束后自动执行呢？这就要用到新的工具：中间件（middleware）。\r\n\r\n为了理解中间件，让我们站在框架作者的角度思考问题：如果要添加功能，你会在哪个环节添加？ \r\n（1）Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。 \r\n（2）View：与 State 一一对应，可以看作 State 的视觉层，也不合适承担其他功能。 \r\n（3）Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。 \r\n想来想去，只有发送 Action 的这个步骤，即store.dispatch()方法，可以添加功能。 \r\n\r\n### 中间件的用法\r\n本文不涉及如何编写中间件，因为常用的中间件都有现成的，只要引用别人写好的模块即可。 \r\n```javascript\r\nimport { applyMiddleware, createStore } from 'redux';\r\nimport createLogger from 'redux-logger';\r\nconst logger = createLogger();\r\n\r\nconst store = createStore(\r\n reducer,\r\n applyMiddleware(logger)\r\n);\r\n```\r\n\r\n上面代码中，redux-logger提供一个生成器createLogger，可以生成日志中间件logger。\r\n然后，将它放在applyMiddleware方法之中，传入createStore方法，就完成了store.dispatch()的功能增强。\r\n\r\n这里有两点需要注意：\r\n（1）createStore方法可以接受整个应用的初始状态作为参数，那样的话，applyMiddleware就是第三个参数了。\r\n```javascript\r\nconst store = createStore(\r\n reducer,\r\n initial_state,\r\n applyMiddleware(logger)\r\n);\r\n```\r\n\r\n（2）中间件的次序有讲究。\r\n```javascript\r\nconst store = createStore(\r\n reducer,\r\n applyMiddleware(thunk, promise, logger)\r\n);\r\n```\r\n上面代码中，applyMiddleware方法的三个参数，就是三个中间件。有的中间件有次序要求，使用前要查一下文档。比如，logger就一定要放在最后，否则输出结果会不正确。\r\n\r\n\r\n##

4、异步操作的基本思路

\r\n\r\n理解了中间件以后，就可以处理异步操作了。\r\n\r\n同步操作只要发出一种 Action 即可，异步操作的差别是它要发出三种 Action。 \r\n- 操作发起时的 Action\r\n- 操作成功时的 Action\r\n- 操作失败时的 Action\r\n\r\n以向服务器取出数据为例，三种 Action 可以有两种不同的写法。\r\n```\r\n// 写法一：名称相同，参数不同\r\n{ type: 'FETCH_POSTS' }\r\n{ type: 'FETCH_POSTS', status: 'error', error: 'Oops' }\r\n{ type: 'FETCH_POSTS', status: 'success', response: { ... } }\r\n\r\n// 写法二：名称不同\r\n{ type: 'FETCH_POSTS_REQUEST' }\r\n{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }\r\n{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }\r\n```\r\n\r\n除了 Action 种类不同，异步操作的 State 也要进行改造，反映不同的操作状态。下面是 State 的一个例子。\r\n```javascript\r\nlet state = {\r\n // ... \r\n isFetching: true,\r\n didInvalidate: true,\r\n lastUpdated: 'xxxxxxx'\r\n};\r\n```\r\n上面代码中，State 的属性isFetching表示是否在抓取数据。didInvalidate表示数据是否过时，lastUpdated表示上一次更新时间。\r\n\r\n现在，整个异步操作的思路就很清楚了。 \r\n- 操作开始时，送出一个 Action，触发 State 更新为\"正在操作\"状态，View 重新渲染\r\n- 操作结束后，再送出一个 Action，触发 State 更新为\"操作结束\"状态，View 再一次重新渲染\r\n\r\n### 总结\r\n在异步请求的时候，其实很多时候都是直接发出请求如果请求成功了之后，在存入reducers, 并不是不管成功与否，都存入reducers。 \r\n\r\n\r\n### redux-thunk中间件\r\n异步操作至少要送出两个 Action：用户触发第一个 Action，这个跟同步操作一样，没有问题；如何才能在操作结束时，系统自动送出第二个 Action 呢？\r\n奥妙就在 Action Creator 之中。\r\n```javascript\r\nclass AsyncApp extends Component {\r\n componentDidMount() {\r\n const { dispatch, selectedPost } = this.props\r\n dispatch(getApplyList(selectedPost))\r\n }\r\n}\r\n// ...\r\n```\r\n上面代码是一个异步组件的例子。加载成功后（componentDidMount方法），它送出了（dispatch方法）一个 Action，向服务器要求数据 fetchPosts(selectedSubreddit)。\r\n这里的fetchPosts就是 Action Creator。 \r\n下面就是getApplyList的代码，关键之处就在里面，这是我在公司的代码风格写法。\r\n```javascript\r\nexport function getApplyList(query) {\r\n return function(dispatch) {\r\n dispatch(modalUpdate({\r\n loadingTable: true\r\n }));\r\n fetch('apply', query)\r\n .then(function(res) {\r\n dispatch(updateApply(res.data)); // 这个是调用的action Mppper\r\n dispatch(modalUpdate({\r\n loadingTable: false\r\n }));\r\n }).catch(function(err) {\r\n dispatch(modalUpdate({\r\n pageWarn: err.message,\r\n loadingTable: false\r\n }));\r\n });\r\n };\r\n}\r\n\r\n// 对应的action Mapper\r\nexport function updateApply(data) {\r\n return {\r\n type: UPDATE_APPLY,\r\n data\r\n };\r\n}\r\n```\r\n\r\n这里是博客文章的代码风格写法\r\n```javascript\r\nconst fetchPosts = postTitle => (dispatch, getState) => {\r\n dispatch(requestPosts(postTitle));\r\n return fetch(`/some/API/${postTitle}.json`)\r\n .then(response => response.json())\r\n .then(json => dispatch(receivePosts(postTitle, json)));\r\n};\r\n\r\n// 使用方法一\r\nstore.dispatch(fetchPosts('reactjs'));\r\n// 使用方法二\r\nstore.dispatch(fetchPosts('reactjs')).then(() =>\r\n console.log(store.getState())\r\n);\r\n```\r\n上面代码中，fetchPosts是一个Action Creator（动作生成器），返回一个函数。\r\n这个函数执行后，先发出一个Action（requestPosts(postTitle)），然后进行异步操作。\r\n拿到结果后，先将结果转成 JSON 格式，然后再发出一个 Action（ receivePosts(postTitle, json)）。 \r\n\r\n上面代码中，有几个地方需要注意。\r\n- （1）fetchPosts返回了一个函数，而普通的 Action Creator 默认返回一个对象。\r\n- （2）返回的函数的参数是dispatch和getState这两个 Redux 方法，普通的 Action Creator 的参数是 Action 的内容。\r\n- （3）在返回的函数之中，先发出一个 Action（requestPosts(postTitle)），表示操作开始。\r\n- （4）异步操作结束之后，再发出一个 Action（receivePosts(postTitle, json)），表示操作结束。\r\n\r\n这样的处理，就解决了自动发送第二个 Action 的问题。但是，又带来了一个新的问题，Action 是由store.dispatch方法发送的。\r\n而store.dispatch方法正常情况下，参数只能是对象，不能是函数。 \r\n这时，就要使用中间件**redux-thunk**。\r\n```javascript\r\nimport { createStore, applyMiddleware } from 'redux';\r\nimport thunk from 'redux-thunk';\r\nimport reducer from './reducers';\r\n\r\n// Note: this API requires redux@>=3.1.0\r\nconst store = createStore(\r\n reducer,\r\n applyMiddleware(thunk)\r\n);\r\n```\r\n上面代码使用redux-thunk中间件，改造store.dispatch，使得后者可以接受函数作为参数。 \r\n因此，异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatch。\r\n\r\n\r\n##

5、React-Redux的用法

\r\n为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux，本文主要介绍它。 \r\n这个库是可以选用的。实际项目中，你应该权衡一下，是直接使用 Redux，还是使用 React-Redux。后者虽然提供了便利，但是需要掌握额外的 API，并且要遵守它的组件拆分规范。\r\n\r\n本人项目中使用的最多的就是 react-redux; \r\n\r\nReact-Redux 将所有组件分成两大类：**UI 组件（presentational component）和容器组件（container component）**。\r\n\r\n### UI组件\r\nUI 组件有以下几个特征。 \r\n- 只负责 UI 的呈现，不带有任何业务逻辑\r\n- 没有状态（即不使用this.state这个变量）\r\n- 所有数据都由参数（this.props）提供\r\n- 不使用任何 Redux 的 API\r\n\r\n下面就是一个 UI 组件的例子。\r\n```javascript\r\nconst Title = value =>

{value}

;\r\n```\r\n因为不含有状态，UI 组件又称为\"纯组件\"，即它纯函数一样，纯粹由参数决定它的值。\r\n\r\n### 容器组件\r\n容器组件的特征恰恰相反。\r\n- 负责管理数据和业务逻辑，不负责 UI 的呈现\r\n- 带有内部状态\r\n- 使用 Redux 的 API\r\n\r\n总之，只要记住一句话就可以了：UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。\r\n\r\n你可能会问，如果一个组件既有 UI 又有业务逻辑，那怎么办？回答是，将它拆分成下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。 \r\nReact-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。\r\n\r\n### connect()\r\nReact-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。 \r\nconnect方法的完整 API 如下。下面这个例子是我在项目中使用的一个完整结构示例 \r\n```javascript\r\n/* eslint-disable react/jsx-no-target-blank */\r\nimport React, {Component} from 'react';\r\nimport {push} from 'react-router-redux';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport {Button, message} from 'antd';\r\n\r\n// mapStateToProps\r\nfunction propMap(state, ownProps) {\r\n return {\r\n modal: state.modal,\r\n routing: ownProps\r\n };\r\n}\r\n\r\nclass InvoiceList extends Component {\r\n constructor() {\r\n super();\r\n this.state = {\r\n invoiceListData: {}\r\n };\r\n this.handleGetList = this.handleGetList.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n // 每次刷新空拉数据一次\r\n this.handleGetList();\r\n }\r\n\r\n render() {\r\n const {routing, modal} = this.props;\r\n return (\r\n

\r\n \r\n {/*.......*/}\r\n

\r\n );\r\n }\r\n\r\n // 点击查询数据\r\n handleGetList(filters, type) {\r\n console.log('点击查询数据')\r\n }\r\n}\r\nInvoiceList.propTypes = {\r\n routing: PropTypes.object.isRequired,\r\n modal: PropTypes.object.isRequired,\r\n dispatch: PropTypes.func.isRequired\r\n};\r\nexport default connect(propMap)(InvoiceList);\r\n```\r\nInvoiceList就是由 React-Redux 通过connect方法自动生成的容器组件。\r\nconnect方法接受两个参数：mapStateToProps和mapDispatchToProps。\r\n它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。\r\n通常我们只使用了第一个参数； \r\n\r\n### mapStateToProps \r\nmapStateToProps是一个函数。它的作用就是像它的名字那样，建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。\r\n作为函数，mapStateToProps执行后应该返回一个对象，里面的每一个键值对就是一个映射。 \r\n```javascript\r\nconst mapStateToProps = (state) => {\r\n return {\r\n todos: getVisibleTodos(state.todos, state.visibilityFilter)\r\n }\r\n}\r\n```\r\n上面代码中，mapStateToProps是一个函数，它接受state作为参数，返回一个对象。这个对象有一个todos属性，代表 UI 组件的同名参数，\r\n后面的getVisibleTodos也是一个函数，可以从state算出 todos 的值。 \r\n下面就是getVisibleTodos的一个例子，用来算出todos。 \r\n```javascript\r\nconst getVisibleTodos = (todos, filter) => {\r\n switch (filter) {\r\n case 'SHOW_ALL':\r\n return todos\r\n case 'SHOW_COMPLETED':\r\n return todos.filter(t => t.completed)\r\n case 'SHOW_ACTIVE':\r\n return todos.filter(t => !t.completed)\r\n default:\r\n throw new Error('Unknown filter: ' + filter)\r\n }\r\n}\r\n```\r\nmapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。 \r\nmapStateToProps的第一个参数总是state对象，还可以使用第二个参数，代表容器组件的props对象 \r\n```javascript\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n active: ownProps.filter === state.visibilityFilter\r\n }\r\n}\r\n```\r\n使用ownProps作为参数后，如果容器组件的参数发生变化，也会引发 UI 组件重新渲染。 \r\nconnect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。 \r\n\r\n\r\n### mapDispatchToProps()\r\nmapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。\r\n也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。\r\n\r\n如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。\r\n```javascript\r\nconst mapDispatchToProps = (\r\n dispatch,\r\n ownProps\r\n) => {\r\n return {\r\n onClick: () => {\r\n dispatch({\r\n type: 'SET_VISIBILITY_FILTER',\r\n filter: ownProps.filter\r\n });\r\n }\r\n };\r\n}\r\n```\r\n从上面代码可以看到，mapDispatchToProps作为函数，应该返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。 \r\n\r\n如果mapDispatchToProps是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，\r\n返回的 Action 会由 Redux 自动发出。举例来说，上面的mapDispatchToProps写成对象就是下面这样。 \r\n```ecmascript 6\r\nconst mapDispatchToProps = {\r\n onClick: (filter) => {\r\n type: 'SET_VISIBILITY_FILTER',\r\n filter: filter\r\n }\r\n}\r\n```\r\n\r\n总结，实际上项目开发过程中，只用得上第一个参数，第二个参数一般来说是封装在reducers 层次里面的。不建议直接放置在组建成此调用。因为会导致使用和数据上的紊乱。 \r\n\r\n\r\n### 组件\r\nconnect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。React-Redux 提供Provider组件，可以让容器组件拿到state。\r\n```javascript\r\nimport { Provider } from 'react-redux'\r\nimport { createStore } from 'redux'\r\nimport todoApp from './reducers'\r\nimport App from './components/App'\r\n\r\nlet store = createStore(todoApp);\r\n\r\nrender(\r\n \r\n \r\n ,\r\n document.getElementById('root')\r\n)\r\n```\r\n上面代码中，Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。\r\n\r\n### React-Router路由库\r\n使用React-Router的项目，与其他项目没有不同之处，也是使用Provider在Router外面包一层，毕竟Provider的唯一功能就是传入store对象。\r\n```javascript\r\nconst Root = ({ store }) => (\r\n \r\n \r\n \r\n \r\n \r\n);\r\n```\r\n\r\n\r\n\r\n",{"_54":932,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/80/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/80/timeline","pagination",{"_936":937,"_162":938},"value",6,7,"actionData","errors"]