blog
blog copied to clipboard
zyl1314
个人博客 :book:
## 前言 [snabbdom](https://github.com/snabbdom/snabbdom)是一个虚拟dom算法库，它的特点是效率高、可扩展，许多开源项目采用了这种算法，例如[vue](https://github.com/vuejs/vue/blob/dev/src/core/vdom/patch.js)。本文试图还原虚拟dom的diff原理（仅限于snabbdom算法）。 ## 虚拟dom #### 什么是虚拟dom 首先需要了解什么是虚拟dom，虚拟dom是真实dom的简单映射。我们知道一个真实dom的属性是十分繁多的，但是表示一个真实dom仅仅需要一部分属性就够了。对于一个真实dom，只要我们清楚它的选择器、它的子节点以及它的“数据”（属性、样式、类、事件等），我们就可以利用一个对象（即虚拟dom）来描述这个真实的dom节点，如下： ```js class Vnode { constructor({sel, data, children, text, key}) { // 选择器 this.sel = sel; // key this.key = key; // 保存属性、样式等...
[原文地址](https://github.com/zyl1314/blog/issues/12) ## 前言 笔者最近在学习使用`react`，提到react就绕不过去`redux`。redux是一个状态管理架构，被广泛用于react项目中，但是redux并不是专为react而生，两者还需要`react-redux`建立一座桥梁。同时，redux架构规定只能发送`同步action`，要想发送`异步action`就需要结合中间件如`redux-thunk`、`redux-saga`等，所以说要想搞定redux还真是不容易啊，光名词就这么多。笔者以前也接触过一点`vuex`，vuex对笔者这样的菜鸡相对友好，但是vuex是和`vue`配套的，是不可能用在react中的，这辈子都别想用在react中。但是我不服，那么这篇文章就探索下如何制作一个可以在react中使用的**类似**vuex的状态管理工具，我将它取名为[reux](https://github.com/zyl1314/reux)。 ```js vuex redux + react-redux + redux-saga ``` ## 正文 - #### 响应式数据观测系统 vue的一大特色就是响应式数据观测系统，它可以在`get`数据时收集依赖，在`set`数据时触发更新。vuex借助于vue的数据观测系统，可以轻松的收集数据依赖，并且依赖可以精细到组件的粒度，也就是说某一状态改变时，只有依赖到这一状态的组件才会触发`rerender`，这样看来redux体系就比较傻，只要提交action，就会从根组件`rerender`（react-redux内部自动进行shouldCompoentUpdate判断）。  上图来自于vue官网对vuex架构的说明，[链接](https://cn.vuejs.org/v2/guide/state-management.html)。 上图中的`component`是`vue component`，只要vue component执行render，那么vuex的数据响应系统就可以自动的收集依赖，当状态改变时，依赖于此状态的组件就会重新渲染。既然我们要实现的是一个类vuex的状态管理工具，即支持以`get`的方式收集依赖，以`set`的方式触发更新，所以reux利用了vue的响应式数据观测系统，正所谓前人种树，后人乘凉。 - #### 如何收集依赖 我们已经有了响应式数据系统，接下来要解决的问题就是如何收集依赖，收集依赖必须要触发`get`，而触发get的前提是组件可以拿到`store`，因此第一步是向组件注入store。类似react-redux，reux提供了Provider使子组件可以拿到store。 ```js class Provider...