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","reactions",{"_58":173,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/80/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/80/timeline","performed_via_github_app","state_reason","score",1,{"_58":190,"_60":61,"_62":191,"_64":192,"_66":193,"_68":194,"_70":195,"_72":196,"_74":197,"_76":198,"_78":199,"_111":200,"_124":125,"_126":24,"_127":-5,"_128":202,"_130":203,"_152":145,"_146":205,"_148":205,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":206,"_163":207,"_169":208,"_171":209,"_183":211,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/79","https://api.github.com/repos/pro-collection/interview-question/issues/79/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/79/comments","https://api.github.com/repos/pro-collection/interview-question/issues/79/events","https://github.com/pro-collection/interview-question/issues/79",1619939590,"I_kwDOJGDC6c5gjlEG",79,"[vue]: 是如何实现 MVVM 的？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[201],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":204,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-11T09:03:45Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"\n\n## 引入：使用jquery和其他框架的区别\n\n### 原生JS实现一个todo-list\n```html\n\n

\n
\n \n

\n\n\n```\n\n\n### vue实现todo-list\n```html\n\n

\n
\n \n

{{item}}

\n\n\n```\n\n### 两者之间的区别\n- 数据和视图分离(开放封闭原则：扩展开放，修改封闭)\n- 数据驱动视图\n\n\n### 对mvvm的理解\n具体的理解自己再去整理\n\nMVVM框架的三大要素： \n响应式、模板引擎、渲染\n\n\n## 响应式的实现\n修改data属性之后，立马就能监听到。 \ndata属性挂在到vm实例上面。\n\n有下面的一个问题，我们是如何监听属性的获取和属性的赋值的。\n```javascript\nlet obj = {\n name: 'yanle',\n age: 25\n};\nconsole.log(obj.name);\nobj.age = 26;\n```\n\n是通过**Object.defineProperty** 实现的, 下面的代码就可以实现一个完整的属性修改和获取的监听。\n```javascript\nlet vm = {};\nlet data = {\n name: 'yanle',\n age: 25\n};\nlet key, value;\nfor (key in data) {\n (function (key) {\n Object.defineProperty(vm, key, {\n get: function () {\n console.log('get', data[key]);\n return data[key]; // data的属性代理到vm 上 \n },\n set: function (newValue) {\n console.log('set', newValue);\n data[key] = newValue;\n }\n })\n })(key)\n}\n```\n\n## vue中的模板\n\n**模板** \n本质就是字符串； \n有逻辑： if for 等； \n跟html格式很像，但是区别很大; \n最终要转为HTML来现实； \n模板需要用JS代码来实现，因为有逻辑，只能用JS来实现；\n\n\n**render函数-with用法**：\n```javascript\nlet obj = {\n name: 'yanle',\n age: 20,\n getAddress: function () {\n alert('重庆')\n }\n};\n// 不用with 的情况\n// function fn() {\n// alert(obj.name);\n// alert(obj.age);\n// obj.getAddress();\n// }\n// fn();\n\n// 使用with的情况\nfunction fn1() {\n with (obj) {\n alert(name);\n alert(age);\n getAddress();\n }\n}\nfn1();\n```\n这种with 的使用方法就如上所述。但是尽量不要用，因为《JavaScript语言精粹》中，作者说过，这种使用方式会给代码的调试带来非常大的困难。 \n但是vue源码中的render 就是用的这个;\n\n\n**render函数**: \n $\"02-12-1\"$ \n![02-12-2](https://user-images.githubusercontent.com/22188674/224475405-34baf640-f897-4a26-9817-109e8b4c1bde.png)\n\n模板中的所有信息都包含在了render 函数中。 \n一个特别简单的示例:\n```javascript\nlet vm = new Vue({\n el: '#app',\n data: {\n price: 200\n }\n });\n\n // 一下是手写的\n function render() {\n with (this) { // 就是vm\n _c(\n 'div',\n {\n attr: {'id': 'app'}\n },\n [\n _c('p', [_v(_s(price))])\n ]\n )\n }\n }\n\n function render1() {\n return vm._c(\n 'div',\n {\n attr: {'id': 'app'}\n },\n [\n _c('p', [vm._v(vm._s(vm.price))]) // vm._v 是创建文本， _s 就是toString\n ]\n )\n }\n```\n\n如果我们用一个复杂的例子来描述这个东西。在源码中，搜索code.render, 然后在在此之前打印render 函数，就可以看看这个到底是什么东西了。\n```javascript\nvar createCompiler = createCompilerCreator(function baseCompile (\n template,\n options\n) {\n var ast = parse(template.trim(), options);\n if (options.optimize !== false) {\n optimize(ast, options);\n }\n var code = generate(ast, options);\n console.log(code.render);\n return {\n ast: ast,\n render: code.render,\n staticRenderFns: code.staticRenderFns\n }\n});\n```\n然后运行，就可以看到到底render 函数是什么东西了。就可以截取源码出来看了。 \n相对应的模板如下:\n```html\n

\n
\n \n

{{item}}

\n```\n截取的render函数如下：\n```javascript\nfunction codeRender() {\n with (this) {\n return _c('div',\n {attrs: {\"id\": \"app\"}},\n [\n _c('div', [\n _c('input', {\n directives: [{\n name: \"model\",\n rawName: \"v-model\",\n value: (title), // 渲染指定数据\n expression: \"title\"\n }],\n domProps: {\"value\": (title)}, // 渲染指定数据\n on: { // 通过input输入事件，修改title\n \"input\": function ($event) {\n if ($event.target.composing) return;\n title = $event.target.value\n }\n }\n }),\n _v(\" \"), // 文本节点\n _c('br'),\n _v(\" \"),\n _c('button', { // dom 节点\n attrs: {\"id\": \"btn-submit\"},\n on: {\"click\": add} // methods 里面的东西也都挂在this上面去了\n },\n [_v(\"submit\")])]),\n\n _v(\" \"),\n\n _c('div', [\n _c('ul',\n {attrs: {\"id\": \"ul-list\"}},\n _l((list), function (item) { // 数组节点\n return _c('li', [_v(_s(item))])\n })\n )\n ])\n ])\n }\n}\n```\n从vue2.0开始支持预编译，我们在开发环境下，写模板，编译打包之后，模板就变成了JS代码了。vue已经有工具支持这个过程。\n\n\n## vue中的渲染\nvue的渲染是直接渲染为虚拟dom ,这一块儿的内容，其实是借鉴的snabbdom, 非常相似，可以去看看snabbdom 就可以一目了然了。 \nvue中的具体渲染实现: \n![02-12-03](https://user-images.githubusercontent.com/22188674/224475434-c4e33700-d223-4472-8e96-5cc7b6c04d70.png)\n\n\n\n## 整体流程的实现\n\n第一步：解析模板形成render 函数\n- with 用法\n- 模板中的所有数据都被render 函数包含\n- 模板中data的属性，变成了JS变量\n- 模板中的v-model、v-for、v-on都变成了JS的逻辑\n- render函数返回vnode\n\n第二步：响应式开始监听数据变化\n- Object.defineProperty 的使用\n- 讲data中的属性代理到vm 上\n\n第三步：首次渲染，显示页面，而且绑定数据和依赖\n- 初次渲染，执行updateComponent, 执行vm._render();\n- 执行render函数，会访问到vm.list和vm.title等已经绑定好了的数据；\n- 会被详情是的get 方法监听到 \n 为何一定要监听get, 直接监听set 不行吗？ data中有很多的属性，有的被用到了，有的没有被用到。被用到的会走get, 不被用到的不会走get。\n 没有被get监听的属性，set的时候也不会被坚挺。为的就是减少不必要的重复渲染，节省性能。\n- 执行updateComponent的时候，会执行vdom的patch方法\n- patch 讲vnode渲染为DOM，初次渲染完成\n\n第四步： data属性变化，出发render\n- 修改属性值，会被响应式的set监听到\n- set中会执行updateComponent，重新执行vm.render()\n- 生成vnode和prevVnode, 通过patch进行对比\n- 渲染到html中 \n",{"_58":210,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/79/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/79/timeline",{"_58":213,"_60":61,"_62":214,"_64":215,"_66":216,"_68":217,"_70":218,"_72":219,"_74":220,"_76":221,"_78":222,"_111":223,"_124":125,"_126":24,"_127":-5,"_128":225,"_130":226,"_152":145,"_146":228,"_148":229,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":230,"_163":231,"_169":232,"_171":233,"_183":235,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/78","https://api.github.com/repos/pro-collection/interview-question/issues/78/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/78/comments","https://api.github.com/repos/pro-collection/interview-question/issues/78/events","https://github.com/pro-collection/interview-question/issues/78",1619937730,"I_kwDOJGDC6c5gjknC",78,"[vue]: vue2.x 虚拟 dom 是怎么实现的？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[224],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":132,"_68":133,"_62":134,"_70":135,"_72":136,"_74":137,"_76":138,"_122":139,"_140":227,"_142":143,"_144":145,"_124":125,"_146":147,"_148":149,"_150":-5,"_151":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-11T08:57:17Z","2023-03-11T09:00:32Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"## virtual-dom 实现之一: snabbdom\r\n\r\nvue2.0就是使用的snabbdom \r\n一个简单的使用实例：\r\n```javascript\r\nvar snabbdom = require('snabbdom');\r\nvar patch = snabbdom.init([ // Init patch function with chosen modules\r\n require('snabbdom/modules/class').default, // makes it easy to toggle classes\r\n require('snabbdom/modules/props').default, // for setting properties on DOM elements\r\n require('snabbdom/modules/style').default, // handles styling on elements with support for animations\r\n require('snabbdom/modules/eventlisteners').default, // attaches event listeners\r\n]);\r\nvar h = require('snabbdom/h').default; // helper function for creating vnodes\r\n\r\nvar container = document.getElementById('container');\r\n\r\nvar vnode = h('div#container.two.classes', {on: {click: someFn}}, [\r\n h('span', {style: {fontWeight: 'bold'}}, 'This is bold'),\r\n ' and this is just normal text',\r\n h('a', {props: {href: '/foo'}}, 'I\\'ll take you places!')\r\n]);\r\n// Patch into empty DOM element – this modifies the DOM as a side effect\r\npatch(container, vnode);\r\n\r\nvar newVnode = h('div#container.two.classes', {on: {click: anotherEventHandler}}, [\r\n h('span', {style: {fontWeight: 'normal', fontStyle: 'italic'}}, 'This is now italic type'),\r\n ' and this is still just normal text',\r\n h('a', {props: {href: '/bar'}}, 'I\\'ll take you places!')\r\n]);\r\n// Second `patch` invocation\r\npatch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state\r\n```\r\n\r\n\r\n### snabbdom 核心api\r\n- snabbdom.init:\r\n The core exposes only one single function snabbdom.init. This init takes a list of modules and returns a patch function that uses the specified set of modules.\r\n```javascript\r\nvar patch = snabbdom.init([\r\n require('snabbdom/modules/class').default,\r\n require('snabbdom/modules/style').default,\r\n]);\r\n```\r\n\r\n- patch:\r\n```javascript\r\npatch(oldVnode, newVnode);\r\n```\r\n\r\n- snabbdom/h:\r\n It is recommended that you use snabbdom/h to create vnodes. h accepts a tag/selector as a string, an optional data object and an optional string or array of children.\r\n```javascript\r\nvar h = require('snabbdom/h').default;\r\nvar vnode = h('div', {style: {color: '#000'}}, [\r\n h('h1', 'Headline'),\r\n h('p', 'A paragraph'),\r\n]);\r\n```\r\n\r\n- snabbdom/tovnode:\r\n Converts a DOM node into a virtual node. Especially good for patching over an pre-existing, server-side generated content.\r\n```javascript\r\nvar snabbdom = require('snabbdom')\r\nvar patch = snabbdom.init([ // Init patch function with chosen modules\r\n require('snabbdom/modules/class').default, // makes it easy to toggle classes\r\n require('snabbdom/modules/props').default, // for setting properties on DOM elements\r\n require('snabbdom/modules/style').default, // handles styling on elements with support for animations\r\n require('snabbdom/modules/eventlisteners').default, // attaches event listeners\r\n]);\r\nvar h = require('snabbdom/h').default; // helper function for creating vnodes\r\nvar toVNode = require('snabbdom/tovnode').default;\r\n\r\nvar newVNode = h('div', {style: {color: '#000'}}, [\r\n h('h1', 'Headline'),\r\n h('p', 'A paragraph'),\r\n]);\r\n\r\npatch(toVNode(document.querySelector('.container')), newVNode)\r\n```\r\n\r\n### h函数和 patch 的使用\r\n例如下面的一个dom 结构：\r\n```html\r\n

item1
item2

\r\n```\r\n用h函数来表示，就如下形式：\r\n```javascript\r\nlet vnode = h('ul#list', {}, [\r\n h('li.item', {}, 'item1'),\r\n h('li.item', {}, 'item2')\r\n])\r\n```\r\n作用就是模拟的一个真实节点。\r\n\r\npatch的使用方式： \r\n第一种方式 patch('容器', vnode); // 这种使用方式是直接渲染dom \r\n第二种是用方式: patch(oldVnode, newVnode); // 这种方式会自动对比dom的差异性，然后只渲染我们需要dom;\r\n\r\n一个简单的使用实例：\r\n```html\r\n\r\n\r\n\r\n \r\n snabbdom\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n

\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n### snabbdom 的使用实例\r\n```html\r\n\r\n

\r\n
\r\n\r\n\r\n\r\n```\r\n\r\n\r\n## diff算法\r\n### 概念\r\n就是找出两个文件的不同\r\n\r\ndiff 算法是非常复杂的，实现难度非常大，源码两非常大。所以需要去繁就简，明白流程，不关心细节。 \r\n在vdom中，需要找出本次dom 必须更新的节点来更新，其他的不用更新。找出这个过程就是diff算法实现的。找出前后两个虚拟dom的差异。\r\n\r\n\r\n### diff实现的过程\r\n这里以snabbdom为例子： \r\npatch(container, vnode); patch(vnode, newVnode); 这两个方法里面就使用到了diff算法。用patch方法来解析diff算法流程核心。\r\n\r\n**patch(container, vnode)** \r\n![02-11-1](https://user-images.githubusercontent.com/22188674/224475327-0b8f19b3-7a35-40ec-960b-6040852f1a7d.png)\r\n\r\n如果上面的数据，我们怎么构建真正的dom 结构：\r\n```javascript\r\nlet createElement = function(vnode) {\r\n let tag = vnode.tag;\r\n let attrs = vnode.attrs || {};\r\n let children = vnode.children || {};\r\n \r\n if(!tag) return null;\r\n \r\n // 创建元素\r\n let elem = document.createElement(tag);\r\n \r\n // 属性\r\n let attrName;\r\n for (attrName in attrs) {\r\n if(attrs.hasOwnProperty(attrName)) {\r\n elem.setAttribute(attrName, attrs[attrName])\r\n }\r\n }\r\n \r\n // 子元素\r\n children.forEach(function (childVnode) {\r\n // 给 elem 添加元素\r\n elem.appendChild(createElement(childVnode))\r\n });\r\n \r\n return elem;\r\n};\r\n```\r\n\r\n**patch(vnode, newVnode)** \r\n![02-11-2](https://user-images.githubusercontent.com/22188674/224475289-d2f8b10a-1f02-4126-9f2e-b813b0387c84.png) \r\n![02-11-3](https://user-images.githubusercontent.com/22188674/224475309-45c68933-3aa8-402a-8353-d09b506e0d46.png)\r\n\r\n伪代码实现如下\r\n```javascript\r\nlet createElement = function(vnode) {\r\n let tag = vnode.tag;\r\n let attrs = vnode.attrs || {};\r\n let children = vnode.children || {};\r\n\r\n if(!tag) return null;\r\n\r\n // 创建元素\r\n let elem = document.createElement(tag);\r\n\r\n // 属性\r\n let attrName;\r\n for (attrName in attrs) {\r\n if(attrs.hasOwnProperty(attrName)) {\r\n elem.setAttribute(attrName, attrs[attrName])\r\n }\r\n }\r\n\r\n // 子元素\r\n children.forEach(function (childVnode) {\r\n // 给 elem 添加元素\r\n elem.appendChild(createElement(childVnode))\r\n });\r\n\r\n return elem;\r\n};\r\n```\r\n\r\n### diff算法的其他内容\r\n- 节点的新增和删除\r\n- 节点重新排序\r\n- 节点属性、样式、事件绑定\r\n- 如果极致压榨性能\r\n",{"_58":234,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/78/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/78/timeline",{"_58":237,"_60":61,"_62":238,"_64":239,"_66":240,"_68":241,"_70":242,"_72":243,"_74":244,"_76":245,"_78":246,"_111":247,"_124":125,"_126":24,"_127":-5,"_128":249,"_130":250,"_152":145,"_146":263,"_148":264,"_151":-5,"_155":156,"_106":-5,"_157":-5,"_158":265,"_163":266,"_169":267,"_171":268,"_183":270,"_185":-5,"_186":-5,"_187":188},"https://api.github.com/repos/pro-collection/interview-question/issues/75","https://api.github.com/repos/pro-collection/interview-question/issues/75/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/75/comments","https://api.github.com/repos/pro-collection/interview-question/issues/75/events","https://github.com/pro-collection/interview-question/issues/75",1619931872,"I_kwDOJGDC6c5gjjLg",75,"[vue]: 手写 vue 双向绑定？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[248],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":251,"_68":252,"_62":253,"_70":254,"_72":255,"_74":256,"_76":257,"_122":258,"_140":259,"_142":260,"_144":145,"_124":125,"_146":261,"_148":262,"_150":-5,"_151":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},510,"2023-03-06T15:00:15Z","2025-09-07T06:08:31Z","2023-03-11T08:32:37Z","2023-03-11T08:32:38Z",{"_160":145,"_161":145,"_162":145},{"_165":145,"_166":145,"_167":145,"_168":145},"## 双向绑定核心知识点\n\n如果一个对象中有属性有方法，那么调用属性可以直接. 就可以调用，但是如果是调用方法的时候，是通过入参来决定key的值来调用的话，请用[]来表示： \n```html\n\n\n \n \n MVVM 双项绑定\n \n \n \n

Hi，MVVM

\n \n

{{name}} 's age is {{age}}

\n \n

\n \n \n\n```\n\n",{"_58":269,"_174":145,"_175":145,"_176":145,"_177":145,"_178":145,"_179":145,"_180":145,"_181":145,"_182":145},"https://api.github.com/repos/pro-collection/interview-question/issues/75/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/75/timeline","pagination",{"_273":274,"_160":274},"value",7,"actionData","errors"]