一步一步带你实现virtual dom（一）

一步一步带你实现virtual dom（一）
一步一步带你实现virtual dom（二)--Props和事件

要写你自己的虚拟DOM，有两件事你必须知道。你甚至都不用翻看React的源代码，或者其他的基于虚拟DOM的代码。他们代码量都太大，太复杂。然而要实现一个虚拟DOM的主要部分只需要大约50行的代码。50行代码！！

下面就是那两个你要知道的事情：

  • 虚拟DOM和真实DOM的有某种对应关系
  • 我们在虚拟DOM树的更改会生成另外一个虚拟DOM树。我们会用一种算法来比较两个树有哪些不同，然后对真实的DOM做最小的更改。

下面我们就来看看这两条是如何实现的。

生成虚拟DOM树

首先我们需要在内存里存储我们的DOM树。只要使用js就可以达到这个目的。假设我们有这样的一个树：

<ul class="list">
  <li>item 1</li>
  <li>item 2</li>
</ur>

看起来非常简单对吧。我们怎么用js的对象来对应到这个树呢？

{ type: 'ul', props: {'class': 'list}, children: [
  {type: 'li', props: {}, children: ['item 1']},
  {type: 'li', props: {}, children: ['item 2']}
]}

这里我们会注意到两件事：

  • 我们使用这样的对象来对应到真实的DOM上：{type: '...', props: {...}, children: [...]}。
  • DOM的文本节点会对应到js的字符串上。
    但是如果用这个方法来对应到巨大的DOM树的话那将是非常困难的。所以我们来写一个helper方法，这样结构上也就容易理解一些：
function h(type, props, ...children) {
  return {type, props, children};
}

现在我们可以这样生成一个虚拟DOM树：

h('ul', {'class': 'list'},
  h('li', {}, 'item 1'),
  h('li', {}, 'item 2'),
)

这样看起来就清晰了很多。但是我们还可以做的更好。你应该听说过JSX对吧。是的，我们也要用那种方式。但是，这个应该如何下手呢？

如果你读过Babel的JSX文档的话，你就会知道这些都是Babel的功劳。Babel会把下面的代码转码：

<ul className="list">
  <li>item 1</li>
  <li>item 2</li>
</ul>

转码为：

React.createElement('ul', {className: 'list'}),
 React.createElement('li', {}, 'item 1'),
 React.createElement('li', {}, 'item 2')
);

你注意到多相似了吗？如果把React.createElement(...)体换成我们自己的h方法的话，那我们也已使用类似于JSX的语法。我们只需要在我们的文件最顶端加这么一句话：

/** @jsx h */
<ul className="list">
  <li>item 1</li> 
  <li>item 2</li>
</ul>

这一行/** @jsx h */就是在告诉Babel“�大兄弟，按照jsx的方式转码，但是不要用React.createElement, 使用h。你可以使用任意的东西来代替h。

那么把上面我们说的总结一下，我们会这样写我们的虚拟DOM：

/** @jsx h */
const a = {
  <ul className="list">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
};

然后Babel就会转码成这样：

const a = {
  h('ul', {className: 'list'},
    h('li', {}, 'item 1'),
    h('li', {}, 'item 2'),
  )
};

当方法h执行的时候，它就会返回js的对象--我们的虚拟DOM树。

const a = (
  { type: ‘ul’, props: { className: ‘list’ }, children: [
    { type: ‘li’, props: {}, children: [‘item 1’] },
    { type: ‘li’, props: {}, children: [‘item 2’] }
  ] }
);

在JSFiddle里运行一下试试。

应用我们的DOM展示

现在我们的DOM树用纯的JS对象来代表了。很酷了。但是我们需要根据这些创建实际的DOM。因为我们不能只是把虚拟节点转换后直接加载DOM里。

首先我们来定义一些假设和一些术语：

  • 实际的DOM都会使用$开头的变量来表示。所以$parent是一个实际的DOM。
  • 虚拟DOM使用node变量表示
  • 和React一样，你只可以有一个根节点。其他的节点都在某个根节点里。

我们来写一个方法：createElement()，这个方法可以接收一个虚拟节点之后返回一个真实的DOM节点。先不考虑props和children，这个之后会有介绍。

function createElement(node) {
  if(typeof node === 'string') {
    return document.createTextNode(node);
  }
  return document.createElement(node.type);
}

因为我们不仅需要处理文本节点（js的字符串），还要处理各种元素（element）。这些元素都是想js的对象一样的：

{ type: '-', props: {...}, children: [...]}

我们可以用这个结构来处理文本节点和各种element了。

那么子节点如何处理呢，他们也基本是文本节点或者各种元素。这些子节点也可以用createElement()方法来处理。父节点和子节点都使用这个方法，看到了么？其实这就是递归处理了。我们可以调用createElement方法来创建子节点，然后用appendChild方法来把他们添加到根节点上。

function createElement(node) {
  if(typeof node === 'string') {
    return document.createTextNode(node);
  }
  const $el = document.createElement(node.type);
  node.children
    .map(createElement)
    .forEach($el.appendChild.bind($el));
   return $el;
}

看起来还不错，我们先不考虑节点的props。要理解虚拟节点的概念并不需要这些东西却会增加很多的复杂度。

处理修改

我们可以把虚拟节点转化为真实的DOM了。现在该考虑比较我们的虚拟树了。基本上我们需要写一点算法了。虚拟树的比较需要用到这个算法，比较之后只做必要的修改。

如何比较树的不同？

  • 如果新节点的子节点增加了，那么我们就需要调用appendChild方法来添加。
//new 
<ul>
  <li>item 1</li>
  <li>item 2</li>
</ul>
 
//old
<ul>
  <li>item 1</li>
</ul>
  • 新节点比旧节点的子节点少，那么就需要调用removeChild方法来删除掉多余的子节点。
//new
<ul>
  <li>item 1</li>
</ul>

//old
<ul>
  <li>item 1</li>
  <li>item 2</li>  // 这个要被删掉
</ul>
  • 新旧节点的某个子节点不同，也就是某个节点上发生了修改。那么，我们就调用replaceChild方法。
//new
<div>
  <p>hi there!</p>
  <p>hello</p>
</div>


//old
<div>
  <p>hi there!</p>
  <button>click it</button>   //发生了修改，变成了new里的<p />节点
</div>
  • 各节点都一样。那么我们就需要做进一步的比较
//new
<ul>
  <li>item 1</li>
  <li> //*
    <span>hello</span>
    <span>hi!</span> 
  </li>
</ul>

//old
<ul>
  <li>item 1</li>
  <li> //*
    <span>hello</span>
    <div>hi!</div>
  </li>
</ul>

加醒的两个节点可以看到都是<li>，是相等的。但是它的子节点里面却有不同的节点。

我们来写一个方法updateElement，它接收三个参数：$parent、newNode和oldNode。$parent是真的DOM元素。它是我们虚拟节点的父节点。现在我们来看看如何处理上面提到的全部问题。

没有旧节点

这个问题很简单：

function updateElement($parent, newNode, oldNode) {
  if(!oldNode) {
    $parent.appendChild(
      createElement(newNode)
    );
  }
}

没有新节点

如果当前没有新的虚拟节点，我们就应该把它从真的DOM里删除掉。但是，如何做到呢？我们知道父节点（作为参数传入了方法），那么我们就可以调用$parent.removeChild方法，并传入真DOM的引用。但是我们无法得到它，如果我们知道的节点在父节点的位置，就可以用$parent.childNodes[index]来获取它的引用。index就是节点的位置。

假设index也作为参数传入了我们的方法，我们的方法就可以这么写：

function updateElement($parent, newNode, oldNode, index = 0) {
  if(!oldNode) {
    $parent.appendChild(
      createElement(newNode);
    );
  } else if(!newNode) {
    $parent.removeChild(
      $parent.childNodes[index];
    );
  }
}

节点改变

首先写一个方法来比较两个节点（新的和旧的）来区分节点是否发生了改变。要记住，节点可以是文本节点，也可以是元素（element）：

function changed(node1, node2) {
  return typeof node1 !== typeof node2 ||
    typeof node1 === 'string' && node1 !== node2 ||
    node1.type !== node2.type;
}

现在有了当前节点的index了，index就是当前节点在父节点的位置。这样可以很容易用新创建的节点来代替当前节点了。

function updateElement($parent, newNode, oldNode, index = 0) {
  if(!oldNode) {
    $parent.appendChild(
      createElement(newNode);
    );
  } else if(!newNode) {
    $parent.removeChild(
      $parent.childNOdes[index];
    );
  } else if(chianged(newNode, oldNode)) {
    $parent.replaceChild(
      createElement(newNode),
      $parent.childNodes[index]
    );
  }
}

对比子节点的不同

最后，需要遍历新旧节点的子节点，并比较他们。可以在每个节点上都使用updateElement方法。是的，递归。

但是在开始代码之前需要考虑一些问题：

  • 只有在节点是一个元素（element）的时候再去比较子节点（文本节点不可能有子节点）。
  • 当前节点作为父节点传入方法中。
  • 我们要一个一个的比较子节点，即使会遇到undefined的情况。没有关系，我们的方法可以处理。
  • index，当前节点在直接父节点中的位置。
function updateElement($parent, newNode, oldNode, index = 0) {
  if(!oldNode) {
    $parent.appendChild(
      createElement(newNode);
    );
  } else if(!newNode) {
    $parent.removeChild(
      $parent.childNodes[index]
    );
  } else if(changed(newNode, oldNode)) {
    $parent.replaceChild(
      createElement(newNode),
      $parent,childNodes[index]
    );
  } else if(newNode.type) {
    const newLength = newNode.children.length;
    const oldLength = oldNode.children.length;
    for (let i = 0; i < newLength || i < oldLength; i++) {
      updateElement(
        $parent.childNodes[index],
        newNode.children[i],
        oldNode.children[i],
        i
      );
    }
  }
}

在JSFiddle里看看代码把！

结语

祝贺你！我们搞定了。我们写出了虚拟节点的实现。从上面的例子中你已经可以理解虚拟节点的概念了，也大体可以知道React是如何运作的了。

当时还有很多需要讲述的内容，其中包括：

  • 设置节点的属性（props）和比较、更新他们
  • 处理事件，在元素上添加事件监听器
  • 让我们的节点像React的Component那样运作
  • 获取实际DOM的引用
  • 虚拟节点和其他的库一起使用来修改真实的DOM，这些库有jQuery等其他的类似的库。
  • 更多。。

原文地址：https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,772评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,458评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,610评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,640评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,657评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,590评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,962评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,631评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,870评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,386评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,969评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2赞 342