react与真实dom的联结

我们知道，要修剪一棵电脑世界的树，就是找到要修剪的那个节点，将新的值换上去即可。

这是修改节点，修改子树呢？那就把新的子树换上去。

是的，如果那个节点是根节点，每次有值的变动，你看到的那棵树，已经被连根铲除，换了一棵新的树了。

当然react，vue这种不会这么简单粗暴，不会要求只能砍根。

它可以砍任何地方，每砍一处地方，你都需要绑定一个语句，标明，如果有变动，你要砍的是这个位置。

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
//这里，标明了，要砍的是id为root的这个真实的dom节点，之后的值的变动，也是填补的这个位置

想象一下，你是一个砍柴的打工人，react就是你手里的斧头，你设置了这把斧头，每次往哪个位置砍，然后换上新的值。

那单页面模式又是什么，其实没什么，就是整个页面只有一把斧头，砍的是一个位置，通常来说砍的是自定义的根节点。

页面真正的根节点是html，下面有个body，我们会在body下设置一个唯一节点当做真*根节点。这才是人类可以自由掌控的区域。因为跟body同级的有很多html的配置标签，很多是约定俗成的东西，不会轻易变化。

在这个人类自由掌控的区域里，我们变换不同内容，放置了以前要用多个html页面才能展现的内容，现在仅仅在一个页面上，靠砍树更新树就达到了 。人类赋予它单页面模式这个称号——是不是觉得特别简单，没有什么很高大上的东西。

术语就像知识大地上，人为捏起的一座座山丘，不要太沉迷这种山丘，知识的联结还是在大地上，从一座山丘去另一座山丘，还是得先下山。不过天才们是靠飞的，他们可以从一个山头飞到另一个山头去，这也是为什么思维这么跳跃的原因了。普通人还没搭建好空中走廊，甚至知识大地都没认熟，就还是老老实实走地面吧。

咳咳，扯远了，拉回来。

题目是react与真实dom的联结。

联结我们已经学习了，就是在真实的dom树上做绑定，就上面那句代码。

真实dom？那意味着还有虚假的dom吗？

什么是真？什么是虚假的？

真实的dom是什么？虚假的dom又是什么？

这完全是定义问题，我也可以叫闪亮的dom，不闪亮的dom，不要太纠结于这种文字。

我们知道，浏览器会从得到的html那里，根据各自标签抽出一棵树来，这玩意，我们就叫它真实的dom树，就仅仅是叫它而已。

回到砍树换树的问题来，砍树很容易，删除就行。
那换树，总得有新的树给我吧？

对浏览器而已，它就是需要一棵dom树来展示页面，你不可能连棵树都不给它吧？

而且我们必须要给它一棵上述定义的真实的，dom树。

不管这棵真实的dom树，我们是怎么制造出来的，最后换树的时候，交付给浏览器的，是一棵真实的dom树。

重要的事情说三遍。

打个比方吧，在我们标记的那个节点以下，react这种框架在内存世界，开辟了一个新的平行世界。

在这个平行世界里，react与我们的设定做沟通，我们给了react一份树的图纸，这份图纸被称为 虚假的dom树

而在react与真实dom交接的地方，每一次砍树更新树，虚假的dom树（树的图纸），会被造成一颗真正的dom树（用dom树的标签、语言来造的），然后被更新到真正的dom树上。

从react的世界，树的图纸，到浏览器的世界，变成了一颗真正的dom树，好像魔法一样。仿佛跨越了一个世界，这种神奇就完成了。

react掌控的那个平行世界，就叫做react的世界（打工人叫react框架）

vue掌控的那个平行世界，就叫做vue的世界（打工人叫vue框架）

react与vue它们不知道，它们是在一个电子、硅的世界里，也不知道他们在人类所谓的真实世界里，更不知道它们在一个被人类成为宇宙的宏观世界里。

每个世界有每个世界的规则，react与vue的规则不同，我们叫做语法不同，但是他们的目标是相同的。就是从一份树的图纸，得到一个真实的dom树。

至于这个图纸怎么画，是人类的事情。怎么从一份树的图纸变成一颗树，也是人类事先设定好的。

react没有自由，人类就有么？